init: apes-Authon-history — 剥离历史与源码分析归档

- docs/: 源码分析报告、代码深度解析、项目说明书、独立服务化方案
- backend/: 账权模块提取说明(提取原则、文件清单、耦合度验证)
- frontend/: 前端剥离方案、剥离历史与说明、框架修改详情
This commit is contained in:
figmar
2026-08-09 13:04:04 +08:00
commit 9cbb1f7695
9 changed files with 4639 additions and 0 deletions
+335
View File
@@ -0,0 +1,335 @@
<!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>
+199
View File
@@ -0,0 +1,199 @@
# apes-Authon-Web 前端剥离方案
> 从 saas-web 单体前端中提取纯净账权页面,构建独立的 `apes-Authon-Web` 前端仓库,与后端 `apes-Authon` 配合使用。
- **源仓库**: gitea-upload/web-master
- **目标仓库**: apes-Authon-Web
- **技术栈**: Vue 2.7 + Element UI + Vuex + Vue Router
## 概览
| 分类 | 数量 | 说明 |
|------|------|------|
| 账权页面保留 | 24 | login、register、user、permission、customer、app |
| 系统配置保留 | 9 | organization、operationlog、quota、packagePlan |
| AI/LLM 页面保留 | 11 | llmModel、llmAgent、aiHelper、ai 工具管理 |
| 业务页面删除 | ~82 | fei、trace、weight、tracing、irrigation 等 |
| 框架文件修改 | 8 | router、main.js、request.js、store 等 |
## Step 1: 保留清单
### 1.1 页面 (views/) — 保留
| 目录 | 文件 | 功能 |
|------|------|------|
| login/ | index.vue | 登录页(短信+密码+SSO |
| register/ | index.vue | 注册页 |
| user/ | list.vue, editProfile.vue, info.vue, pwd.vue, sso.vue | 用户管理 |
| permission/ | menuList.vue, permissionList.vue, roleList.vue | 权限管理 |
| customer/ | index.vue, detail.vue, editCustomer.vue, employee.vue, user.vue, myCustomer.vue, packages.vue, packageOverview.vue, quotaChangeLog.vue, uiConfig.vue, accessToken.vue, extendApplyList.vue | 客户管理(12个页面) |
| app/ | appList.vue, appDetail.vue | 应用管理 |
| system/ | organization/, operationlog/, quota/, packagePlan/, llmModel/, llmAgent/, aiHelper/ | 系统配置 + AI/LLM 配置 |
| ai/ | tool.vue, toolEdit.vue, skill.vue, toolLog.vue, callLog.vue, conversationHistory.vue, chat.vue | AI 工具管理 |
| home/ | index.vue | 首页看板 |
| 404.vue | — | 404 错误页 |
### 1.2 API 文件 (api/) — 保留
| 文件 | 功能 |
|------|------|
| user.js | 登录/注册/用户管理/获取当前用户 |
| permissionApi.js | 菜单/权限/角色 CRUD |
| menuApi.js | 动态路由构建 |
| appApi.js | 应用管理 CRUD |
| customerApi.js | 客户管理 CRUD |
| customerPackageApi.js | 客户套餐管理 |
| accessTokenApi.js | AccessToken 管理 |
| organizationApi.js | 组织架构管理 |
| quotaApi.js | 配额管理 |
| packagePlanApi.js | 套餐方案管理 |
| llmAgentApi.js | LLM Agent 管理 |
| llmAgentSkillApi.js | LLM Agent 技能管理 |
| llmAgentToolApi.js | LLM Agent 工具管理 |
| llmModelApi.js | LLM 模型配置 |
| llmConversationApi.js | LLM 对话管理 |
| llmToolApi.js | LLM 工具管理 |
| llmToolLogApi.js | LLM 工具日志 |
| aiSkill.js | AI 技能管理 |
### 1.3 框架文件 — 全量保留(部分需修改)
| 类别 | 文件 | 说明 |
|------|------|------|
| 入口 | main.js, App.vue | 需修改(移除业务引用) |
| 路由 | router/index.js | 需大幅修改(移除业务路由) |
| 布局 | layout/index.vue, Sidebar/, TagsView/, TopHeader.vue | 全量保留 |
| Store | store/index.js, getters.js, modules/user.js, settings.js, tagsView.js | user.js + getters.js 需修改 |
| Utils | request.js, index.js, validate.js, get-page-title.js, msgUtil.js, public.js, constUtil.js, envUtil.js, autoRefresh.js, uiSizeUtil.js | request.js 需修改 |
| 组件 | breadcrumb.vue, tagView.vue, pageBox.vue, iframeView.vue, ai/ai_helper.vue | 保留 |
| 样式 | styles/index.scss, variables.scss, mixin.scss, sidebar.scss, transition.scss, element-ui.scss | 保留(删除 tracing-screen.scss |
| 构建配置 | package.json, vue.config.js, babel.config.js, postcss.config.js, jsconfig.json | 需修改 |
| 静态资源 | public/index.html, public/static/ | 保留 |
| 图片资源 | assets/404_images/, assets/images/, assets/base.scss | 保留 |
## Step 2: 删除清单(业务相关)
### 2.1 页面删除
| 目录 | 文件数 | 业务域 |
|------|--------|--------|
| fei/ | 22 | 智慧农业大屏/可视化 |
| trace/ | 21 | 溯源管理 |
| weight/ | 13 | 自助过磅系统 |
| tracing/ | 6 | 溯源追踪/路线 |
| irrigation/ | 2 | 灌溉管理 |
| 其他 | ~18 | base, brain, certify, payment, park, waterFertilizer, fertigationDevice, extLink, preference, agreement, certifyAgreement, web, tracking, huoban |
> **注意**: huoban/ 目录暂不保留,作为后续 Phase 5C 代办。
### 2.2 API 删除
| 文件 | 业务域 |
|------|--------|
| fei/ 目录 | 智慧农业 |
| trace/, traceabilityApi.js, trackingConfigApi.js | 溯源 |
| weightApi.js | 过磅 |
| huobanTableApi.js | 伙伴云 |
| farmPlan.js, inspection.js, inputMaterial.js, irrigation.js, park.js, fertigationDevice.js, cameraInfo.js | 农业/设备 |
| n8nApi.js | N8N 工作流 |
| extLink.js, userPreference.js | 外链/偏好 |
### 2.3 Utils 删除
| 文件 | 原因 |
|------|------|
| ezvizConfig.js, ezvizStream.js | 萤石云视频流 |
| tracingDisplay.js, tracingPermission.js, tracingQualPermission.js, tracingTestCertificate.js | 溯源专用 |
| huobanAuth.js | 伙伴云鉴权 |
| markdown.js, wangEditConfig.js | 富文本编辑器 |
### 2.4 组件删除
| 目录/文件 | 原因 |
|-----------|------|
| components/brain/ | 大屏组件 |
| components/tracing/ | 溯源组件 |
| components/MarkdownContent.vue | 富文本组件 |
### 2.5 样式删除
| 文件 | 原因 |
|------|------|
| styles/tracing-screen.scss | 溯源大屏样式 |
### 2.6 Config 删除
| 文件 | 原因 |
|------|------|
| config/ezviz.js, config/ezviz.example.js | 萤石云配置 |
| config/tracingOpenKey.js | 溯源 OpenKey 配置 |
## Step 3: 文件修改清单
### 3.1 router/index.js — 大幅修改
- 保留: /login, /register, /user/*, /base/*, /customer/*, /system/*, /ai/*, /error/404
- 删除: /certify, /huoban/*, /weight/*, /tracing/*, /fei_screen, /brain, /tracing_screen, /common
### 3.2 main.js — 修改
- 移除 echarts 引用
- 清理 staticPages 数组
- 保留核心逻辑
### 3.3 utils/request.js — 修改
- 删除 isHuobanWebApi() 函数
- 简化 resolveRequestToken()
- 清理 staticPages
### 3.4 store/modules/user.js — 修改
- 删除 huobanToken state/mutation/action
### 3.5 store/getters.js — 修改
- 清理不存在的 module 引用(app/permission/errorLog/common
### 3.6 vue.config.js — 修改
- 移除 MonacoWebpackPlugin
- 移除 n8n 代理
- 移除 echarts/monaco externals
- 更新 outputDir 为 "authon-web"
### 3.7 package.json — 修改
- 移除: @amap/amap-jsapi-loader, @wangeditor/*, echarts, html2canvas, jspdf, monaco-editor/*, marked, highlight.js, qrcodejs2
- 更新 name 为 "apes-Authon-Web"
### 3.8 public/index.html — 修改
- 更新 title 为 "apes-Authon"
## Step 4: 与后端对应关系
| 后端 Controller | 前端页面 | API 文件 |
|----------------|----------|----------|
| UserController | views/user/ | user.js |
| PermissionController | views/permission/ | permissionApi.js |
| CustomerController | views/customer/ | customerApi.js |
| AppController | views/app/ | appApi.js |
| MenuController | menuApi.js | menuApi.js |
| AccessTokenController | views/customer/accessToken.vue | accessTokenApi.js |
| SSOController | views/user/sso.vue, views/login/ | user.js |
| CustomerPackageController | views/customer/packages.vue | customerPackageApi.js |
| SysOrganizationController | views/system/organization/ | organizationApi.js |
| SysOperationLogController | views/system/operationlog/ | — |
| SysQuotaController | views/system/quota/ | quotaApi.js |
| SysPackagePlanController | views/system/packagePlan/ | packagePlanApi.js |
| LlmModelConfigController | views/system/llmModel/ | llmModelApi.js |
| LlmAgentConfigController | views/system/llmAgent/ | llmAgentApi.js |
| AiController | views/system/aiHelper/ | aiSkill.js |
| LlmToolController | views/ai/tool.vue | llmToolApi.js |
| LlmChatController | views/ai/chat.vue | — |
| LlmConversationController | views/ai/conversationHistory.vue | llmConversationApi.js |
## Step 5: 后续代办
| 代办 | 说明 |
|------|------|
| Phase 5C: 伙伴云表单 | 7 .vue + 1 API,后端 5 Controller 待提取 |
| Phase 4: SDK化 | AuthContext 远程调用 SDK |
| Phase 5: 网关集成 | API 网关统一鉴权 |
---
*方案生成时间: 2026-08-09 | 源码版本: saas-web v1.0.0 | 框架: Vue 2.7 + Element UI 2.15*
+344
View File
@@ -0,0 +1,344 @@
# apes-Authon-Web 剥离历史与说明
> 本文档记录从 saas-web 单体前端剥离纯净账权页面的执行过程、变更明细和框架修改说明。
- **源仓库**: saas-web(单体前端,含 120+ 页面)
- **目标仓库**: apes-Authon-Web(纯净账权前端,40 页面)
- **剥离时间**: 2026-08-09
- **提交**: `8ebd1ca` — 176 files changed, +222/-60093
---
## 一、剥离概览
| 分类 | 数量 | 说明 |
|------|------|------|
| 账权页面保留 | 24 | login、register、user、permission、customer、app |
| 系统配置保留 | 9 | organization、operationlog、quota、packagePlan |
| AI/LLM 页面保留 | 11 | llmModel、llmAgent、aiHelper、ai 工具管理 |
| 业务页面删除 | ~82 | fei、trace、weight、tracing、irrigation 等 |
| 框架文件修改 | 8 | router、main.js、request.js、store 等 |
| 代码变更量 | +222 / -60093 | 净减约 6 万行业务代码 |
---
## 二、保留清单
### 2.1 页面 (views/)
| 目录 | 文件 | 功能 |
|------|------|------|
| login/ | index.vue | 登录页(短信验证码 + 密码 + SSO) |
| register/ | index.vue | 注册页 |
| user/ | list.vue, editProfile.vue, info.vue, pwd.vue, sso.vue | 用户管理(5 个页面) |
| permission/ | menuList.vue, permissionList.vue, roleList.vue | 权限管理(3 个页面) |
| customer/ | index.vue, detail.vue, editCustomer.vue, employee.vue, user.vue, myCustomer.vue, packages.vue, packageOverview.vue, quotaChangeLog.vue, uiConfig.vue, accessToken.vue, extendApplyList.vue | 客户管理(12 个页面) |
| app/ | appList.vue, appDetail.vue | 应用管理 |
| system/ | organization/, operationlog/, quota/, packagePlan/, llmModel/, llmAgent/, aiHelper/ | 系统配置 + AI/LLM 配置(8 个页面) |
| ai/ | tool.vue, toolEdit.vue, skill.vue, toolLog.vue, callLog.vue, conversationHistory.vue, chat.vue | AI 工具管理(7 个页面) |
| home/ | index.vue | 首页看板 |
| base/ | imageUpload.vue | 图片上传 |
| 404.vue | — | 404 错误页 |
### 2.2 API 文件 (api/) — 19 个
| 文件 | 功能 |
|------|------|
| user.js | 登录/注册/用户管理/获取当前用户 |
| permissionApi.js | 菜单/权限/角色 CRUD |
| menuApi.js | 动态路由构建(require.context |
| appApi.js | 应用管理 CRUD |
| customerApi.js | 客户管理 CRUD |
| customerPackageApi.js | 客户套餐管理 |
| accessTokenApi.js | AccessToken 管理 |
| organizationApi.js | 组织架构管理 |
| quotaApi.js | 配额管理 |
| packagePlanApi.js | 套餐方案管理 |
| baseApi.js | 基础接口(文件上传等) |
| llmModelApi.js | LLM 模型配置 |
| llmAgentApi.js | LLM Agent 管理 |
| llmAgentSkillApi.js | LLM Agent 技能管理 |
| llmAgentToolApi.js | LLM Agent 工具管理 |
| llmToolApi.js | LLM 工具管理 |
| llmToolLogApi.js | LLM 工具日志 |
| llmConversationApi.js | LLM 对话管理 |
| aiSkill.js | AI 技能管理 |
### 2.3 组件 (components/) — 6 个
| 文件 | 功能 | 备注 |
|------|------|------|
| breadcrumb.vue | 面包屑导航 | 原样保留 |
| tagView.vue | 标签页缓存 | 原样保留 |
| pageBox.vue | 页面容器 | 原样保留 |
| iframeView.vue | 通用 iframe 组件 | **重写**(见下文) |
| MarkdownContent.vue | Markdown 渲染 | **新建**(见下文) |
| ai/ai_helper.vue | AI 助手浮窗 | 原样保留 |
### 2.4 工具函数 (utils/) — 10 个
| 文件 | 功能 | 备注 |
|------|------|------|
| request.js | Axios 封装 | **修改**(见下文) |
| index.js | 通用工具函数 | 原样保留 |
| validate.js | 校验工具 | 原样保留 |
| msgUtil.js | 消息提示 | 原样保留 |
| public.js | 公共方法 | 原样保留 |
| constUtil.js | 常量 | 原样保留 |
| envUtil.js | 环境变量 | 原样保留 |
| autoRefresh.js | 自动刷新 | 原样保留 |
| uiSizeUtil.js | UI 尺寸 | 原样保留 |
| get-page-title.js | 页面标题 | 原样保留 |
---
## 三、删除清单
### 3.1 页面删除
| 目录 | 文件数 | 业务域 |
|------|--------|--------|
| fei/ | 22 | 智慧农业大屏/可视化 |
| trace/ | 21 | 溯源管理 |
| weight/ | 13 | 自助过磅系统 |
| tracing/ | 6 | 溯源追踪/路线 |
| irrigation/ | 2 | 灌溉管理 |
| brain/ | 3 | AI 大脑 |
| certify/ | 5 | 认证管理 |
| certifyAgreement/ | 1 | 认证协议 |
| payment/ | 1 | 支付 |
| park/ | 2 | 园区管理 |
| waterFertilizer/ | 2 | 水肥一体化 |
| fertigationDevice/ | 2 | 施肥设备 |
| extLink/ | 1 | 外部链接 |
| preference/ | 1 | 偏好设置 |
| agreement/ | 1 | 协议管理 |
| web/ | 1 | Web iframe |
| tracking/ | 1 | 追踪 |
| huoban/ | 1 | 伙伴云(Phase 5C 代办) |
| 其他 | ~3 | PAGECODE.md 等 |
### 3.2 API 删除
| 文件/目录 | 业务域 |
|-----------|--------|
| fei/ 目录 | 智慧农业 |
| trace/, traceabilityApi.js, trackingConfigApi.js | 溯源 |
| weightApi.js | 过磅 |
| huobanTableApi.js | 伙伴云 |
| farmPlan.js, inspection.js, inputMaterial.js, irrigation.js, park.js, fertigationDevice.js, cameraInfo.js | 农业/设备 |
| n8nApi.js | N8N 工作流 |
| extLink.js, userPreference.js | 外链/偏好 |
### 3.3 工具函数删除
| 文件 | 原因 |
|------|------|
| ezvizConfig.js, ezvizStream.js | 萤石云视频流配置 |
| tracingDisplay.js, tracingPermission.js, tracingQualPermission.js, tracingTestCertificate.js | 溯源专用工具 |
| huobanAuth.js | 伙伴云鉴权 |
| markdown.js | 富文本编辑器封装(被 MarkdownContent.vue 替代) |
| wangEditConfig.js | wangEditor 富文本配置 |
### 3.4 组件删除
| 目录/文件 | 原因 |
|-----------|------|
| components/brain/ | 大屏专用组件 |
| components/tracing/ | 溯源专用组件 |
| components/MarkdownContent.vue(原版) | 依赖已删除的 markdown.js,由新版替代 |
### 3.5 配置删除
| 文件 | 原因 |
|------|------|
| config/ezviz.js, config/ezviz.example.js | 萤石云配置 |
| config/tracingOpenKey.js | 溯源 OpenKey 配置 |
| styles/tracing-screen.scss | 溯源大屏样式 |
---
## 四、框架文件修改详情
### 4.1 router/index.js — 路由重构
**修改内容**
- 移除所有业务路由(certify、huoban、weight、tracing、fei_screen、brain、tracing_screen
- 保留核心路由:`/login``/register``/user/*``/base/*``/customer/*``/error/404``/`(首页)
- 新增 `/common` 路由作为动态菜单路由的容器:
```javascript
{
path: '/common',
component: LayoutBox,
name: 'common',
children: [] // 动态路由运行时注入
}
```
**原因**`menuApi.js` 通过 `router.addRoute('common', ...)` 动态注册菜单路由,需要一个名为 `common` 的命名路由作为父容器。
### 4.2 main.js — 入口精简
**移除内容**
- `import * as echarts from 'echarts'``Vue.prototype.$echarts = echarts`(首页看板不再使用 echarts 图表)
- `import userPreferenceApi from '@/api/userPreference'` 及相关调用(用户偏好功能已删除)
- `staticPages` 数组精简为 `['/register']`(移除了其他静态页面路径)
**保留内容**
- Token 从 URL 参数读取(SSO 支持)
- `getCurrentUser``setLoginUser``getMyApps``loadAppMenus``matchCurrentPath` 核心启动流程
### 4.3 utils/request.js — 请求层简化
**移除内容**
- `isHuobanWebApi()` 函数(判断是否为伙伴云 API 请求)
- `resolveRequestToken()` 辅助函数(根据请求类型解析不同 token)
- 伙伴云 token 相关逻辑
**简化后**Token 统一从 `localStorage.getItem('_token')` 获取:
```javascript
config.headers = {
...config.headers,
time: new Date().getTime(),
version: '1.1',
token: localStorage.getItem('_token') || ''
}
```
### 4.4 store/modules/user.js — 状态清理
**移除内容**
- `huobanToken` state 字段
- `SET_HUOBAN_TOKEN` mutation
- `setHuobanToken` action
**保留的 State**`loginUser``menuList``currentMenuId``currentCustomer``appList``currentApp``currentAppMenus``allAppMenus`
### 4.5 store/getters.js — 清理不存在模块
**移除内容**:对 `app``permission``errorLog``common` 模块的 getter 引用(这些模块不存在于本项目中)
**修改后**
```javascript
const getters = {
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
loginUser: state => state.user.loginUser,
currentCustomer: state => state.user.currentCustomer,
menuList: state => state.user.menuList,
appList: state => state.user.appList,
currentApp: state => state.user.currentApp,
currentAppMenus: state => state.user.currentAppMenus
}
```
### 4.6 vue.config.js — 构建配置更新
**移除内容**
- `MonacoWebpackPlugin` require 和插件注册
- n8n 工作流代理配置
- `echarts``monaco-editor` 的 externals 配置
- monaco/echarts/wangEditor 的 splitChunks cacheGroups
**修改内容**
- `outputDir`: `"saas-web"``"authon-web"`
- `name`: 添加 `'apes-Authon'`
### 4.7 package.json — 依赖清理
**移除的依赖**
- `@amap/amap-jsapi-loader`(高德地图)
- `@wangeditor/core``@wangeditor/editor``@wangeditor/editor-for-vue`(富文本编辑器)
- `echarts`(图表库)
- `html2canvas`(截图)
- `jspdf`PDF 生成)
- `qrcodejs2`(二维码)
**保留的特殊依赖**
- `monaco-editor` — AI 工具编辑器使用(`views/ai/toolEdit.vue`
- `vue-monaco` — Monaco Editor 的 Vue 封装
- `marked` — AI 对话中的 Markdown 渲染
- `highlight.js` — AI 对话中的代码高亮
### 4.8 public/index.html — CDN 清理
**移除内容**
- echarts CDN script
- monaco-editor CDN scriptsloader、nls、editor.main
**保留内容**
- Vue、VueRouter、Vuex、ElementUI、Axios 的 CDN externals
### 4.9 iframeView.vue — 重写
**原版**:为每种 iframe 类型(web/payment/huoban)分别导入对应的 view 组件。
**新版**:统一为单个通用 `<iframe>` 组件,适用于所有 menuType 2/3/4
```vue
<template>
<div class="iframe-container">
<iframe :src="frameUrl" frameborder="0" style="width:100%;height:100%"></iframe>
</div>
</template>
```
### 4.10 menuApi.js — 路由注册统一
**修改内容**menuType 2/3/4 统一使用 `@/components/iframeView` 组件,不再为每种类型分别导入 view。
### 4.11 MarkdownContent.vue — 新建
**背景**:原版 `MarkdownContent.vue` 导入了已删除的 `@/utils/markdown.js`,导致构建失败。
**新版**:直接使用 `marked` + `highlight.js`,自包含无外部依赖:
```javascript
import { marked } from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
```
---
## 五、业务引用清理
以下文件中移除了对已删除模块的引用,替换为空操作或简化逻辑:
| 文件 | 移除的引用 | 替代方案 |
|------|-----------|----------|
| TopHeader.vue | `weightApi``clearTracingPermissionCache``clearHuobanToken` | 移除调用,保留方法结构 |
| login/index.vue | `weightApi``clearHuobanToken` | 移除调用 |
| home/index.vue | `extLinkApi` | `loadExtLinks()` 改为空操作 |
| customer/index.vue | `huobanTableApi` | `upsetOne()` 改为设置 skip 状态 |
| customer/uiConfig.vue | `weightApi` | `loadConfig()` / `handleSave()` / `handleReset()` 改为成功提示 |
| permissionApi.js | `TRACING_OPEN_KEY` | 移除 `getTrackingConfigByCustomerId()` 方法 |
---
## 六、构建验证
```bash
npm run build:prod
# DONE Compiled successfully
# Build complete. The authon-web directory is ready to be deployed.
```
构建产物输出到 `authon-web/` 目录,可直接部署到 Nginx 或其他 Web 服务器。
---
## 七、后续代办
| 代办 | 说明 | 状态 |
|------|------|------|
| Phase 5A: AI/LLM 后端提取 | ~54 Java 文件从源码同步到 apes-Authon | 待办 |
| Phase 5B: 系统配置页面补充 | 后端已有 Controller,前端已保留页面 | 基本完成 |
| Phase 5C: 伙伴云表单配置 | 5 Controller + 7 .vue + 1 API | 待办 |
---
*文档更新时间: 2026-08-09 | 仓库: https://gitea.apescale.com/figmar/apes-Authon-Web*