figmar
9cbb1f7695
- docs/: 源码分析报告、代码深度解析、项目说明书、独立服务化方案 - backend/: 账权模块提取说明（提取原则、文件清单、耦合度验证） - frontend/: 前端剥离方案、剥离历史与说明、框架修改详情
200 lines
8.0 KiB
Markdown
200 lines
8.0 KiB
Markdown
# 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*
|