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

账权页面保留

102

业务页面删除

框架文件修改

Step 1: 保留清单（账权相关）

1.1 页面 (views/) — 保留 24 个

目录	文件	功能
login/	index.vue	登录页（短信+密码+SSO）
register/	index.vue	注册页
user/	list.vue, editProfile.vue, info.vue, pwd.vue, sso.vue	用户管理（列表/编辑/信息/改密/SSO配置）
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	应用管理
404.vue	—	404 错误页
home/	index.vue	首页看板（保留作为默认着陆页）

1.2 API 文件 (api/) — 保留 8 个

文件	行数	功能
user.js	99	登录/注册/用户管理/获取当前用户
permissionApi.js	104	菜单/权限/角色 CRUD
menuApi.js	79	动态路由构建（从后端菜单数据生成 Vue 路由）
appApi.js	31	应用管理 CRUD
customerApi.js	100	客户管理 CRUD + 用户关联
customerPackageApi.js	56	客户套餐管理
accessTokenApi.js	33	AccessToken 管理
organizationApi.js	43	组织架构管理

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 需修改（移除 huobanToken）
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 需修改（移除 huoban 逻辑）
组件	breadcrumb.vue, tagView.vue, pageBox.vue, iframeView.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 页面删除 — 102 个 .vue 文件

目录	文件数	业务域
fei/	22	智慧农业大屏/可视化
trace/	21	溯源管理
weight/	13	自助过磅系统
system/	9	系统配置（含业务配置项）
ai/	7	AI 助手/LLM
huoban/	7	伙伴云表单配置
tracing/	6	溯源追踪/路线
irrigation/	2	灌溉管理
其他	15	base, brain, certify, payment, park, waterFertilizer, fertigationDevice, extLink, preference, agreement, certifyAgreement, web, tracking

2.2 API 删除 — 30+ 个 .js 文件

文件	业务域
aiSkill.js, llmAgentApi.js, llmAgentSkillApi.js, llmAgentToolApi.js, llmConversationApi.js, llmModelApi.js, llmToolApi.js, llmToolLogApi.js	AI/LLM
fei/	智慧农业
trace/, traceabilityApi.js, trackingConfigApi.js	溯源
weightApi.js	过磅
huobanTableApi.js	伙伴云
farmPlan.js, inspection.js, inputMaterial.js, irrigation.js, park.js, fertigationDevice.js, cameraInfo.js	农业/设备
quotaApi.js, packagePlanApi.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	富文本编辑器配置（业务页面用）
tracingDisplay.js	溯源展示

2.4 组件删除

目录/文件	原因
components/ai/	AI 组件
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/* (list, pwd, info, sso, editProfile)	用户管理
保留	/base/* (app/list, app/detail, permission/*)	应用+权限管理
保留	/customer/* (index, detail, user, my, employee, edit)	客户管理
保留	/error/404, / (redirect to login)	404 + 默认重定向
删除	/certify, /certifyAgreement, /agreement	认证协议页
删除	/huoban/*	伙伴云配置
删除	/weight/*	过磅系统
删除	/tracing/*	溯源管理
删除	/fei_screen, /screen/fei, /brain, /tracing_screen	大屏入口
删除	/common (空 children)	无意义路由

3.2 main.js 修改

移除 import echarts 和 Vue.prototype.$echarts
移除 import userPreferenceApi 及相关调用（或保留为空操作）
清理 staticPages 数组，移除业务页面路径
保留核心逻辑：getCurrentUser → setLoginUser → getMyApps → loadAppMenus → matchCurrentPath

3.3 utils/request.js 修改

删除 isHuobanWebApi() 函数
简化 resolveRequestToken()：直接返回 localStorage.getItem('_token')
清理 staticPages 数组，移除业务页面路径

3.4 store/modules/user.js 修改

删除 huobanToken state
删除 SET_HUOBAN_TOKEN mutation
删除 setHuobanToken action

3.5 store/getters.js 修改

当前 getters 引用了不存在的 module（app, permission, errorLog, common），需要清理：

删除 sidebar, size, device（引用 state.app，不存在）
删除 permission_routes（引用 state.permission，不存在）
删除 errorLogs（引用 state.errorLog，不存在）
删除 common_baseURL（引用 state.common，不存在）
保留 token, avatar, name, introduction, roles（引用 state.user，但需确认 user 模块是否有这些字段）

3.6 vue.config.js 修改

移除 MonacoWebpackPlugin 引用和使用
移除 n8n 代理配置
移除 externals 中的 echarts 和 monaco-editor
移除 splitChunks 中的 monaco/echarts/wangEditor 缓存组
更新 outputDir 从 "saas-web" 改为 "authon-web"
更新 devServer.public 域名

3.7 package.json 修改

移除业务专用依赖：

操作	依赖	原因
删除	@amap/amap-jsapi-loader	高德地图
删除	@wangeditor/editor, editor-for-vue	富文本编辑器
删除	echarts	图表库
删除	html2canvas, jspdf	截图/PDF
删除	monaco-editor, monaco-editor-webpack-plugin, vue-monaco	代码编辑器
删除	marked, highlight.js	Markdown
删除	qrcodejs2	二维码
删除	fix, them, to	无效/可疑依赖
保留	axios, core-js, element-ui, vue, vue-router, vuex, nprogress, path-to-regexp, normalize.css, animate.css, svg-sprite-loader	框架必需

3.8 public/index.html 修改

更新 <title> 为 "apes-Authon"
移除 echarts/monaco CDN 引用（如果有）

Step 4: 执行步骤

创建仓库：在 Gitea 创建 apes-Authon-Web 仓库
复制源码：cp -r gitea-upload/web-master apes-Authon-Web
删除业务页面：删除 20 个业务 views 目录
删除业务 API：删除 30+ 个业务 api 文件
删除业务组件：删除 ai/brain/tracing/MarkdownContent
删除业务 Utils：删除 ezviz/tracing/huoban/markdown/wangEdit 文件
删除业务 Config：删除 ezviz/tracingOpenKey 文件
删除业务样式：删除 tracing-screen.scss
修改 router/index.js：移除业务路由
修改 main.js：移除 echarts/userPreference 引用
修改 utils/request.js：移除 huoban 逻辑
修改 store/user.js：移除 huobanToken
修改 store/getters.js：清理不存在的 module 引用
修改 vue.config.js：移除 monaco/echarts/n8n 配置
修改 package.json：移除业务依赖，更新名称
修改 public/index.html：更新标题
编写 README.md：项目说明
验证 build：npm install && npm run build:prod
Git 初始化 + 推送：提交到 Gitea

Step 5: 风险与注意事项

⚠️ 依赖链风险：部分账权页面可能引用了业务组件或工具函数，需在删除后逐一排查编译错误。

已知潜在问题：

store/getters.js 引用了 4 个不存在的 store module（app/permission/errorLog/common），这些是模板残留，清理时需确保没有页面依赖这些 getter
menuApi.js 中的 handleMenu 方法可能引用了业务页面的 require.context 映射，需确认是否能正常工作（当业务 .vue 文件被删除后）
customer/index.vue（81KB）体量很大，可能包含业务联动逻辑，需检查是否引用了业务 API
views/base/imageUpload 被放在 base 路由下，可能是公共图片上传组件，需要保留
需确认 userPreference.js 是否为账权功能（UI 尺寸偏好），如需要则保留 API 和 main.js 中的调用

与后端 apes-Authon 的对应关系

后端 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/index.vue	user.js (ssoLogin)
CustomerPackageController	views/customer/packages.vue	customerPackageApi.js

总结

保留页面

102

删除页面

修改文件

剥离后 apes-Authon-Web 将是一个纯净的账权管理前端，包含：登录注册、用户管理、客户管理、权限管理（菜单/角色/权限项）、应用管理、AccessToken 管理、SSO 配置。与后端 apes-Authon 一一对应。

方案生成时间：2026-08-09 | 源码版本：saas-web v1.0.0 | 框架：Vue 2.7 + Element UI 2.15