docs: 添加 apes-Authon-Web 前端剥离方案(HTML + MD)
This commit is contained in:
@@ -0,0 +1,618 @@
|
||||
# AI Helper 表单集成文档
|
||||
|
||||
## 概述
|
||||
|
||||
AI Helper 是一个可全局集成的 AI 对话组件,支持两种展示模式:
|
||||
|
||||
- **图标模式(icon)**:悬浮图标 + 可拖拽弹框,默认展示在页面右下角
|
||||
- **输入框模式(input)**:将对话输入框直接嵌入到页面指定位置,无弹框、无关闭按钮
|
||||
|
||||
两种模式均支持文本输入、图片上传、视频上传,输入框会根据内容自动调整高度。
|
||||
|
||||
---
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 1. 引入组件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<!-- 你的页面内容 -->
|
||||
|
||||
<!-- 在页面底部引入 AI Helper -->
|
||||
<ai-helper :agent_id="agentId" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiHelper from '@/components/ai/ai_helper.vue'
|
||||
|
||||
export default {
|
||||
components: { AiHelper },
|
||||
data() {
|
||||
return {
|
||||
agentId: '1' // Agent ID
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Props 参数
|
||||
|
||||
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
||||
|------|------|------|--------|------|
|
||||
| agent_id | String/Number | 是 | - | Agent 配置 ID,用于加载对应的 Agent 配置 |
|
||||
| user_prompt | String | 否 | '' | 用户提示词,提供上下文数据,调用大模型时作为额外上下文传递 |
|
||||
| display | String | 否 | 'icon' | 展示模式:`icon`(悬浮图标+弹框)/ `input`(嵌入式输入框) |
|
||||
| input_title | String | 否 | '' | 输入框标题,显示在输入框上方,用于说明输入内容的用途 |
|
||||
| default_input | String | 否 | '' | 默认的用户输入文案,组件初始化时自动填充到输入框中 |
|
||||
|
||||
---
|
||||
|
||||
## Events 事件
|
||||
|
||||
| 事件名 | 参数 | 说明 |
|
||||
|--------|------|------|
|
||||
| result | Object | 大模型返回结果时触发 |
|
||||
|
||||
### result 事件数据结构
|
||||
|
||||
```javascript
|
||||
{
|
||||
content: '返回的文本内容', // String - 原始返回内容
|
||||
tokens: { // Object - Token 统计
|
||||
total: 150,
|
||||
prompt: 100,
|
||||
completion: 50
|
||||
},
|
||||
contentObject: {}, // Object - JSON 格式返回内容(仅 outputType 为 json 时)
|
||||
agentId: '1', // String/Number - 当前 Agent ID
|
||||
timestamp: '2026-06-26T17:00:00.000Z' // String - 时间戳
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 展示模式说明
|
||||
|
||||
### 模式 1:图标模式(display="icon")
|
||||
|
||||
默认模式。页面右下角显示一个悬浮图标,点击后弹出可拖拽的对话弹框。
|
||||
|
||||
- 悬浮图标可拖拽移动
|
||||
- 弹框可拖拽移动,带标题栏和关闭按钮
|
||||
- 弹框内包含统一输入框(文本 + 上传)
|
||||
|
||||
```vue
|
||||
<!-- 默认就是 icon 模式,无需显式指定 -->
|
||||
<ai-helper agent_id="1" />
|
||||
<!-- 等价于 -->
|
||||
<ai-helper agent_id="1" display="icon" />
|
||||
```
|
||||
|
||||
### 模式 2:输入框模式(display="input")
|
||||
|
||||
将对话输入框直接嵌入到页面中组件放置的位置,没有悬浮图标、没有弹框、没有关闭按钮。
|
||||
|
||||
- 组件挂载后自动加载 Agent 信息(无需点击)
|
||||
- 统一输入框直接显示在页面中
|
||||
- 文本输入区域根据内容自动增高(最小 3 行,最大 200px 后滚动)
|
||||
- 支持图片/视频上传图标(根据 Agent 配置自动显示)
|
||||
|
||||
```vue
|
||||
<ai-helper agent_id="1" display="input" />
|
||||
```
|
||||
|
||||
### 统一输入框结构
|
||||
|
||||
两种模式共用同一个输入框设计,将文本输入、图片上传、视频上传整合为一个区域:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ [已上传的图片/视频预览] │
|
||||
│ │
|
||||
│ 请输入内容... │
|
||||
│ │
|
||||
│ 📷 🎬 [发送] │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
- 文本区域:自动高度,最小 3 行(66px),最大 200px 后出现滚动条
|
||||
- 左下角:图片上传 📷 和视频上传 🎬 图标按钮(根据 Agent 配置显示)
|
||||
- 右下角:发送按钮
|
||||
- 已上传文件在输入框顶部以缩略图形式预览,支持点击删除
|
||||
|
||||
---
|
||||
|
||||
## 基础集成示例
|
||||
|
||||
### 示例 1:最简集成(图标模式)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<page-box>
|
||||
<div>你的页面内容</div>
|
||||
<ai-helper agent_id="1" />
|
||||
</page-box>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiHelper from '@/components/ai/ai_helper.vue'
|
||||
import PageBox from '@/components/pageBox.vue'
|
||||
|
||||
export default {
|
||||
components: { AiHelper, PageBox }
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 2:监听返回结果
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<page-box>
|
||||
<div>你的页面内容</div>
|
||||
|
||||
<!-- 监听 result 事件 -->
|
||||
<ai-helper
|
||||
agent_id="1"
|
||||
@result="onAiResult"
|
||||
/>
|
||||
|
||||
<!-- 展示结果 -->
|
||||
<div v-if="aiResult">
|
||||
<h3>AI 分析结果</h3>
|
||||
<p>{{ aiResult.content }}</p>
|
||||
</div>
|
||||
</page-box>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiHelper from '@/components/ai/ai_helper.vue'
|
||||
import PageBox from '@/components/pageBox.vue'
|
||||
|
||||
export default {
|
||||
components: { AiHelper, PageBox },
|
||||
data() {
|
||||
return {
|
||||
aiResult: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onAiResult(data) {
|
||||
this.aiResult = data
|
||||
console.log('AI 返回:', data.content)
|
||||
console.log('Token 统计:', data.tokens)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 3:传递上下文数据
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<page-box>
|
||||
<!-- 表单内容 -->
|
||||
<el-form :model="form">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话">
|
||||
<el-input v-model="form.phone" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 传递表单数据作为上下文 -->
|
||||
<ai-helper
|
||||
agent_id="1"
|
||||
:user_prompt="contextData"
|
||||
@result="onAiResult"
|
||||
/>
|
||||
</page-box>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiHelper from '@/components/ai/ai_helper.vue'
|
||||
import PageBox from '@/components/pageBox.vue'
|
||||
|
||||
export default {
|
||||
components: { AiHelper, PageBox },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
phone: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 将表单数据转为上下文字符串
|
||||
contextData() {
|
||||
return `当前表单数据:
|
||||
姓名:${this.form.name}
|
||||
电话:${this.form.phone}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onAiResult(data) {
|
||||
// 处理 AI 返回结果
|
||||
if (data.contentObject) {
|
||||
// JSON 格式结果
|
||||
console.log('JSON 结果:', data.contentObject)
|
||||
} else {
|
||||
// 文本格式结果
|
||||
console.log('文本结果:', data.content)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4:输入框模式嵌入表单
|
||||
|
||||
将 AI 输入框直接嵌入到表单页面中,作为页面的一部分,而非悬浮弹框:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<page-box title="智能分析">
|
||||
<!-- 表单内容 -->
|
||||
<el-form :model="form" label-width="100px">
|
||||
<el-form-item label="客户名称">
|
||||
<el-input v-model="form.customerName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="form.phone" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- AI 输入框直接嵌入页面 -->
|
||||
<div style="margin-top: 20px;">
|
||||
<ai-helper
|
||||
agent_id="5"
|
||||
display="input"
|
||||
input_title="智能分析助手"
|
||||
default_input="请帮我分析这个客户的基本信息"
|
||||
:user_prompt="aiContext"
|
||||
@result="handleAiResult"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- AI 结果展示 -->
|
||||
<el-card v-if="aiResult" style="margin-top: 20px">
|
||||
<div slot="header">AI 分析结果</div>
|
||||
<pre>{{ aiResult.content }}</pre>
|
||||
</el-card>
|
||||
</page-box>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiHelper from '@/components/ai/ai_helper.vue'
|
||||
import PageBox from '@/components/pageBox.vue'
|
||||
|
||||
export default {
|
||||
components: { AiHelper, PageBox },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
customerName: '',
|
||||
phone: ''
|
||||
},
|
||||
aiResult: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
aiContext() {
|
||||
return `请根据以下客户信息进行分析:
|
||||
客户名称:${this.form.customerName}
|
||||
联系电话:${this.form.phone}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAiResult(data) {
|
||||
this.aiResult = data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5:表单场景完整集成(图标模式)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<page-box title="客户信息录入">
|
||||
<el-form :model="form" label-width="100px">
|
||||
<el-form-item label="客户名称">
|
||||
<el-input v-model="form.customerName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="form.phone" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input v-model="form.address" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- AI Helper 集成 -->
|
||||
<ai-helper
|
||||
agent_id="5"
|
||||
:user_prompt="aiContext"
|
||||
@result="handleAiResult"
|
||||
/>
|
||||
|
||||
<!-- AI 结果展示区域 -->
|
||||
<el-card v-if="aiResult" style="margin-top: 20px">
|
||||
<div slot="header">AI 分析结果</div>
|
||||
<div v-if="aiResult.contentObject">
|
||||
<p>建议标签:{{ aiResult.contentObject.tags }}</p>
|
||||
<p>建议分类:{{ aiResult.contentObject.category }}</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<pre>{{ aiResult.content }}</pre>
|
||||
</div>
|
||||
</el-card>
|
||||
</page-box>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiHelper from '@/components/ai/ai_helper.vue'
|
||||
import PageBox from '@/components/pageBox.vue'
|
||||
|
||||
export default {
|
||||
components: { AiHelper, PageBox },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
customerName: '',
|
||||
phone: '',
|
||||
address: ''
|
||||
},
|
||||
aiResult: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
aiContext() {
|
||||
return `请根据以下客户信息进行分析:
|
||||
客户名称:${this.form.customerName}
|
||||
联系电话:${this.form.phone}
|
||||
地址:${this.form.address}
|
||||
|
||||
请以 JSON 格式返回分析结果,包含 tags(标签数组)和 category(分类)。`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAiResult(data) {
|
||||
this.aiResult = data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 6:使用输入框标题和默认文案
|
||||
|
||||
在 input 模式下,可以使用 `input_title` 和 `default_input` 参数来优化用户体验:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<page-box title="施肥方案管理">
|
||||
<el-form :model="form" label-width="100px">
|
||||
<el-form-item label="作物">
|
||||
<el-select v-model="form.cropId" placeholder="请选择作物">
|
||||
<el-option v-for="crop in cropList" :key="crop.id" :label="crop.name" :value="crop.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="物候期">
|
||||
<el-select v-model="form.phenologyId" placeholder="请选择物候期">
|
||||
<el-option v-for="p in phenologyList" :key="p.id" :label="p.name" :value="p.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- AI 输入框带标题和默认文案 -->
|
||||
<div style="margin-top: 20px;">
|
||||
<ai-helper
|
||||
agent_id="4"
|
||||
display="input"
|
||||
input_title="智能施肥方案生成"
|
||||
default_input="请根据选择的作物和物候期,制定科学的施肥方案"
|
||||
:user_prompt="aiContext"
|
||||
@result="handleAiResult"
|
||||
/>
|
||||
</div>
|
||||
</page-box>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiHelper from '@/components/ai/ai_helper.vue'
|
||||
import PageBox from '@/components/pageBox.vue'
|
||||
|
||||
export default {
|
||||
components: { AiHelper, PageBox },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
cropId: null,
|
||||
phenologyId: null
|
||||
},
|
||||
cropList: [],
|
||||
phenologyList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
aiContext() {
|
||||
const crop = this.cropList.find(c => c.id === this.form.cropId)
|
||||
const phenology = this.phenologyList.find(p => p.id === this.form.phenologyId)
|
||||
return `当前选择的作物:${crop ? crop.name : '未选择'}
|
||||
当前物候期:${phenology ? phenology.name : '未选择'}
|
||||
|
||||
请根据以上信息制定施肥方案,返回 JSON 格式:
|
||||
{
|
||||
"formulaName": "配方名称",
|
||||
"applyType": "施肥方式",
|
||||
"totalAmount": 总用量,
|
||||
"details": [...]
|
||||
}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAiResult(data) {
|
||||
if (data.contentObject) {
|
||||
// 回填表单
|
||||
console.log('AI 返回的施肥方案:', data.contentObject)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
**参数说明:**
|
||||
- `input_title="智能施肥方案生成"`:在输入框上方显示标题,帮助用户理解该输入框的用途
|
||||
- `default_input="请根据选择的作物和物候期,制定科学的施肥方案"`:组件初始化时自动填充到输入框,用户可以在此基础上修改或直接发送
|
||||
|
||||
---
|
||||
|
||||
## 组件功能说明
|
||||
|
||||
| 功能 | 说明 |
|
||||
|------|------|
|
||||
| 悬浮图标 | icon 模式下显示在页面右下角,可拖拽移动 |
|
||||
| 对话弹框 | icon 模式下点击图标打开,可拖拽移动,无遮罩层 |
|
||||
| 嵌入式输入框 | input 模式下直接嵌入页面,无弹框无关闭按钮 |
|
||||
| 统一输入框 | 文本输入 + 图片上传 + 视频上传整合为一个输入区域 |
|
||||
| 自动高度 | 文本输入区域根据内容自动增高,最小 3 行,最大 200px |
|
||||
| 图片上传 | 根据 Agent 配置 `supportImage` 自动显示上传图标 |
|
||||
| 视频上传 | 根据 Agent 配置 `supportVideo` 自动显示上传图标 |
|
||||
| 文件预览 | 已上传的图片/视频在输入框顶部以缩略图预览,支持删除 |
|
||||
| 结果输出 | 调用成功后通过 `@result` 事件抛出 |
|
||||
|
||||
---
|
||||
|
||||
## 表单快速填充场景
|
||||
|
||||
### 场景说明
|
||||
|
||||
在业务系统中,很多表单需要用户手动填写大量字段。通过集成 AI Helper(Agent ID = 4),可以实现表单快速填充:
|
||||
|
||||
1. 用户通过 AI 对话描述需求(如"帮我填一个客户信息,张三,电话 13800138000")
|
||||
2. AI 分析用户输入,返回 JSON 格式的表单数据
|
||||
3. 前端监听 `@result` 事件,将返回的 JSON 数据自动回填到表单中
|
||||
|
||||
### 接入步骤
|
||||
|
||||
#### 步骤 1:整理表单字段信息
|
||||
|
||||
整理目标表单的所有字段,包含以下信息:
|
||||
|
||||
| 属性名 | 类型 | 含义 |
|
||||
|--------|------|------|
|
||||
| 字段名 | 数据类型 | 字段说明 |
|
||||
|
||||
例如:
|
||||
| 属性名 | 类型 | 含义 |
|
||||
|--------|------|------|
|
||||
| plateNumber | String | 车牌号 |
|
||||
| vehicleType | String | 车型 |
|
||||
| driverId | Long | 司机ID |
|
||||
|
||||
#### 步骤 2:构建 user_prompt
|
||||
|
||||
将字段信息告诉 AI,让它知道需要返回什么格式:
|
||||
|
||||
```javascript
|
||||
computed: {
|
||||
aiPrompt() {
|
||||
return `请根据用户描述填充表单,返回 JSON 格式:
|
||||
{
|
||||
"plateNumber": "车牌号",
|
||||
"vehicleType": "车型",
|
||||
"driverId": 司机ID
|
||||
}
|
||||
只返回 JSON,不要其他内容。`
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 步骤 3:集成组件并处理回调
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<page-box>
|
||||
<el-form :model="form">
|
||||
<!-- 你的表单字段 -->
|
||||
</el-form>
|
||||
|
||||
<ai-helper
|
||||
agent_id="4"
|
||||
:user_prompt="aiPrompt"
|
||||
@result="handleAiResult"
|
||||
/>
|
||||
</page-box>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
aiPrompt() {
|
||||
return `根据用户描述填充表单,返回 JSON:
|
||||
{
|
||||
"plateNumber": "车牌号",
|
||||
"vehicleType": "车型",
|
||||
"driverId": 司机ID
|
||||
}
|
||||
只返回 JSON。`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAiResult(data) {
|
||||
if (data.contentObject) {
|
||||
// 回填表单
|
||||
Object.keys(data.contentObject).forEach(key => {
|
||||
if (this.form.hasOwnProperty(key)) {
|
||||
this.$set(this.form, key, data.contentObject[key])
|
||||
}
|
||||
})
|
||||
this.$message.success('已填充')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 关键点
|
||||
|
||||
1. **Agent ID = 4**:表单快速填充固定使用
|
||||
2. **字段说明要清晰**:告诉 AI 字段名、类型、含义
|
||||
3. **返回 JSON 格式**:Agent 的 outputType 必须配置为 json
|
||||
4. **自动回填**:根据返回的 JSON key 匹配表单字段名
|
||||
|
||||
---
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **Agent ID 必须有效**:确保传入的 `agent_id` 在后端 `llm_agent_config` 表中存在且状态为启用
|
||||
2. **user_prompt 为可选**:不传则仅使用 Agent 配置的系统提示词和用户提示词模板
|
||||
3. **结果格式**:根据 Agent 的 `outputType` 配置,`contentObject` 仅在 `outputType=json` 时有值
|
||||
4. **组件位置**:
|
||||
- icon 模式:建议放在页面模板的最外层或 `page-box` 内部,确保悬浮层级正确
|
||||
- input 模式:放在表单或内容区域中需要嵌入输入框的位置即可
|
||||
5. **Token 统计**:每次调用会返回 Token 消耗统计,可用于成本监控
|
||||
6. **display 模式选择**:
|
||||
- icon 模式适合全局辅助工具,用户按需打开
|
||||
- input 模式适合 AI 驱动的业务页面,输入框作为页面核心功能的一部分
|
||||
|
||||
---
|
||||
|
||||
## 前置条件
|
||||
|
||||
- 需要在后台 Agent 管理中配置好对应的 Agent(系统提示词、模型等)
|
||||
- 确保 `/static/ai_helper.png` 和 `/static/ai_helper_bai.png` 图标文件存在
|
||||
@@ -0,0 +1,40 @@
|
||||
# Agent 调用文档
|
||||
|
||||
## 调用 Agent
|
||||
|
||||
```javascript
|
||||
import llmAgentApi from '@/api/llmAgentApi'
|
||||
|
||||
llmAgentApi.callAgent(agentId, {
|
||||
userParams: {
|
||||
input: '用户输入内容',
|
||||
imageUrls: ['https://example.com/img1.jpg'], // 可选,图片 URL 列表
|
||||
videoUrls: ['https://example.com/video1.mp4'] // 可选,视频 URL 列表
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 返回
|
||||
|
||||
```javascript
|
||||
{
|
||||
code: 1,
|
||||
data: {
|
||||
content: '模型输出内容',
|
||||
tokens: { prompt: 100, completion: 200, total: 300 }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 图片/视频上传
|
||||
|
||||
先通过公共接口上传文件获取 URL:
|
||||
|
||||
```javascript
|
||||
// 上传接口:POST /api/user-service/common/upload
|
||||
// 返回:{ code: 1, data: 'https://oss.example.com/file.jpg' }
|
||||
```
|
||||
|
||||
再将 URL 放入 `imageUrls` 或 `videoUrls` 数组传给 `callAgent`。
|
||||
@@ -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 | 目标仓库:apes-Authon-Web | 技术栈: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 引用了不存在的 module(app, 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><title></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 module(app/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>
|
||||
@@ -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*
|
||||
@@ -0,0 +1,83 @@
|
||||
# 前端代理配置说明
|
||||
|
||||
## 当前 Vue 开发环境代理配置
|
||||
|
||||
```javascript
|
||||
// vue.config.js
|
||||
devServer: {
|
||||
proxy: {
|
||||
'/api/user-service': {
|
||||
target: 'https://cloud.zhangquyun.com/api/user-service',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/api/user-service': '/'
|
||||
}
|
||||
},
|
||||
'/n8n': {
|
||||
target: 'https://n8n.ccoop.cc',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/n8n': ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Nginx 代理配置
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name your-domain.com;
|
||||
|
||||
# 前端静态资源
|
||||
root /path/to/saas-web/dist;
|
||||
index index.html;
|
||||
|
||||
# API 代理 - 用户服务
|
||||
location /api/user-service/ {
|
||||
proxy_pass https://cloud.zhangquyun.com/;
|
||||
proxy_set_header Host cloud.zhangquyun.com;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
|
||||
# SSL 相关
|
||||
proxy_ssl_server_name on;
|
||||
proxy_ssl_name cloud.zhangquyun.com;
|
||||
}
|
||||
|
||||
# n8n 工作流代理
|
||||
location /n8n/ {
|
||||
proxy_pass https://n8n.ccoop.cc/;
|
||||
proxy_set_header Host n8n.ccoop.cc;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
|
||||
# SSL 相关
|
||||
proxy_ssl_server_name on;
|
||||
proxy_ssl_name n8n.ccoop.cc;
|
||||
}
|
||||
|
||||
# 前端路由 - SPA 模式
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 代理规则说明
|
||||
|
||||
| 前端请求路径 | 代理目标 | 重写后路径 |
|
||||
|------------|---------|-----------|
|
||||
| `/api/user-service/customer/getCurrentUser` | `https://cloud.zhangquyun.com` | `/customer/getCurrentUser` |
|
||||
| `/n8n/api/v1/workflows` | `https://n8n.ccoop.cc` | `/api/v1/workflows` |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **路径重写**:Vue 的 `pathRewrite: { '^/api/user-service': '/' }` 会把 `/api/user-service/xxx` 变成 `/xxx`
|
||||
2. **SSL 代理**:目标地址是 HTTPS,需要配置 `proxy_ssl_server_name on`
|
||||
3. **Host 头**:必须设置正确的 Host 头,否则后端可能拒绝请求
|
||||
4. **CORS**:如果前端和 API 不在同一域名,需要配置 CORS 或使用代理
|
||||
@@ -0,0 +1,202 @@
|
||||
# 电磁阀管理接口文档
|
||||
|
||||
## 接口前缀
|
||||
`/api/user-service/fei/solenoid/valve`
|
||||
|
||||
## 1. 分页查询电磁阀列表
|
||||
|
||||
**请求方式**: POST
|
||||
**请求路径**: `/page`
|
||||
|
||||
### 请求参数
|
||||
```json
|
||||
{
|
||||
"pageIndex": 1, // 页码(必填)
|
||||
"pageSize": 10, // 每页数量(必填)
|
||||
"valveName": "电磁阀A", // 阀门名称(模糊查询,可选)
|
||||
"valveCode": "SV-001", // 阀门编号(精确查询,可选)
|
||||
"parkId": 1, // 园区ID(可选)
|
||||
"plotId": 1, // 地块ID(可选)
|
||||
"valveStatus": 0, // 阀门状态 0-关闭 1-开启(可选)
|
||||
"onlineStatus": 1 // 在线状态 0-离线 1-在线(可选)
|
||||
}
|
||||
```
|
||||
|
||||
### 响应示例
|
||||
```json
|
||||
{
|
||||
"code": 1,
|
||||
"msg": "ok",
|
||||
"data": {
|
||||
"records": [
|
||||
{
|
||||
"id": 1,
|
||||
"valveName": "电磁阀A01",
|
||||
"valveCode": "SV-2026-001",
|
||||
"parkId": 1,
|
||||
"plotId": 1,
|
||||
"longitude": 108.365432,
|
||||
"latitude": 22.842156,
|
||||
"installLocation": "A区1号地块入口",
|
||||
"valveStatus": 0,
|
||||
"onlineStatus": 1,
|
||||
"lastActionTime": null,
|
||||
"remark": "测试数据1",
|
||||
"parkName": "示例园区",
|
||||
"plotName": "A3",
|
||||
"createTime": "2026-07-07 20:52:25",
|
||||
"updateTime": "2026-07-07 20:52:25",
|
||||
"isDel": 0
|
||||
}
|
||||
],
|
||||
"total": 2,
|
||||
"size": 10,
|
||||
"current": 1,
|
||||
"pages": 1
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 2. 查询电磁阀详情
|
||||
|
||||
**请求方式**: POST
|
||||
**请求路径**: `/detail`
|
||||
|
||||
### 请求参数
|
||||
```json
|
||||
{
|
||||
"id": 1 // 电磁阀ID(必填)
|
||||
}
|
||||
```
|
||||
|
||||
### 响应示例
|
||||
```json
|
||||
{
|
||||
"code": 1,
|
||||
"msg": "ok",
|
||||
"data": {
|
||||
"id": 1,
|
||||
"valveName": "电磁阀A01",
|
||||
"valveCode": "SV-2026-001",
|
||||
"parkId": 1,
|
||||
"plotId": 1,
|
||||
"longitude": 108.365432,
|
||||
"latitude": 22.842156,
|
||||
"installLocation": "A区1号地块入口",
|
||||
"valveStatus": 0,
|
||||
"onlineStatus": 1,
|
||||
"lastActionTime": null,
|
||||
"remark": "测试数据1",
|
||||
"parkName": "示例园区",
|
||||
"plotName": "A3",
|
||||
"createTime": "2026-07-07 20:52:25",
|
||||
"updateTime": "2026-07-07 20:52:25",
|
||||
"isDel": 0
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 3. 新增电磁阀
|
||||
|
||||
**请求方式**: POST
|
||||
**请求路径**: `/add`
|
||||
|
||||
### 请求参数
|
||||
```json
|
||||
{
|
||||
"valveName": "电磁阀A01", // 阀门名称(必填)
|
||||
"valveCode": "SV-2026-001", // 阀门编号(必填,唯一)
|
||||
"parkId": 1, // 园区ID(必填)
|
||||
"plotId": 1, // 地块ID(可选)
|
||||
"longitude": 108.365432, // 经度(可选)
|
||||
"latitude": 22.842156, // 纬度(可选)
|
||||
"installLocation": "A区1号地块入口", // 安装位置描述(可选)
|
||||
"valveStatus": 0, // 阀门状态 0-关闭 1-开启(可选,默认0)
|
||||
"onlineStatus": 1, // 在线状态 0-离线 1-在线(可选,默认0)
|
||||
"remark": "备注信息" // 备注(可选)
|
||||
}
|
||||
```
|
||||
|
||||
### 响应示例
|
||||
```json
|
||||
{
|
||||
"code": 1,
|
||||
"msg": "ok",
|
||||
"data": null
|
||||
}
|
||||
```
|
||||
|
||||
## 4. 更新电磁阀
|
||||
|
||||
**请求方式**: POST
|
||||
**请求路径**: `/update`
|
||||
|
||||
### 请求参数
|
||||
```json
|
||||
{
|
||||
"id": 1, // 电磁阀ID(必填)
|
||||
"valveName": "电磁阀A01-修改", // 阀门名称(可选)
|
||||
"valveCode": "SV-2026-001", // 阀门编号(可选,唯一)
|
||||
"parkId": 1, // 园区ID(可选)
|
||||
"plotId": 1, // 地块ID(可选)
|
||||
"longitude": 108.365500, // 经度(可选)
|
||||
"latitude": 22.842200, // 纬度(可选)
|
||||
"installLocation": "新位置", // 安装位置描述(可选)
|
||||
"valveStatus": 1, // 阀门状态 0-关闭 1-开启(可选)
|
||||
"onlineStatus": 1, // 在线状态 0-离线 1-在线(可选)
|
||||
"remark": "更新后的备注" // 备注(可选)
|
||||
}
|
||||
```
|
||||
|
||||
### 响应示例
|
||||
```json
|
||||
{
|
||||
"code": 1,
|
||||
"msg": "ok",
|
||||
"data": null
|
||||
}
|
||||
```
|
||||
|
||||
## 5. 删除电磁阀
|
||||
|
||||
**请求方式**: POST
|
||||
**请求路径**: `/delete`
|
||||
|
||||
### 请求参数
|
||||
```json
|
||||
{
|
||||
"id": 1 // 电磁阀ID(必填)
|
||||
}
|
||||
```
|
||||
|
||||
### 响应示例
|
||||
```json
|
||||
{
|
||||
"code": 1,
|
||||
"msg": "ok",
|
||||
"data": null
|
||||
}
|
||||
```
|
||||
|
||||
## 字段说明
|
||||
|
||||
### 电磁阀字段
|
||||
| 字段名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| id | Long | 主键ID |
|
||||
| valveName | String | 阀门名称 |
|
||||
| valveCode | String | 阀门编号(唯一) |
|
||||
| parkId | Long | 园区ID |
|
||||
| plotId | Long | 地块ID |
|
||||
| longitude | BigDecimal | 经度 |
|
||||
| latitude | BigDecimal | 纬度 |
|
||||
| installLocation | String | 安装位置描述 |
|
||||
| valveStatus | Integer | 阀门状态 0-关闭 1-开启 |
|
||||
| onlineStatus | Integer | 在线状态 0-离线 1-在线 |
|
||||
| lastActionTime | Date | 最后操作时间 |
|
||||
| remark | String | 备注 |
|
||||
| parkName | String | 园区名称(非数据库字段,用于展示) |
|
||||
| plotName | String | 地块名称(非数据库字段,用于展示) |
|
||||
| createTime | Date | 创建时间 |
|
||||
| updateTime | Date | 更新时间 |
|
||||
| isDel | Integer | 逻辑删除 0-正常 1-删除 |
|
||||
@@ -0,0 +1,32 @@
|
||||
-- 电磁阀数据批量插入
|
||||
-- 生成时间: 2026-07-07 21:13
|
||||
-- 数据来源: 设备接口返回的26个电磁阀
|
||||
-- 说明: did 为控制器设备ID(全部相同), valve_code 使用 did-index 组合保证唯一
|
||||
|
||||
INSERT INTO fei_solenoid_valve (valve_name, valve_code, park_id, plot_id, longitude, latitude, install_location, valve_status, online_status, last_action_time, remark, is_del, create_time, update_time) VALUES
|
||||
('电磁阀-1', '864865086276673-1', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-2', '864865086276673-2', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-3', '864865086276673-3', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-4', '864865086276673-4', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-5', '864865086276673-5', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-6', '864865086276673-6', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-7', '864865086276673-7', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-8', '864865086276673-8', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-9', '864865086276673-9', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-10', '864865086276673-10', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-11', '864865086276673-11', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-12', '864865086276673-12', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-13', '864865086276673-13', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-14', '864865086276673-14', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-15', '864865086276673-15', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-16', '864865086276673-16', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-17', '864865086276673-17', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-18', '864865086276673-18', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-19', '864865086276673-19', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-20', '864865086276673-20', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-21', '864865086276673-21', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-22', '864865086276673-22', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-23', '864865086276673-23', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-24', '864865086276673-24', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-25', '864865086276673-25', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW()),
|
||||
('电磁阀-26', '864865086276673-26', 1, NULL, NULL, NULL, NULL, 0, 1, NULL, NULL, 0, NOW(), NOW());
|
||||
@@ -0,0 +1,23 @@
|
||||
-- 电磁阀灌溉记录表
|
||||
CREATE TABLE `fei_solenoid_valve_log` (
|
||||
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
|
||||
`valve_id` bigint(20) NOT NULL COMMENT '电磁阀ID',
|
||||
`valve_code` varchar(64) DEFAULT NULL COMMENT '阀门编号',
|
||||
`park_id` bigint(20) DEFAULT NULL COMMENT '所属园区ID',
|
||||
`plot_id` bigint(20) DEFAULT NULL COMMENT '所属地块ID',
|
||||
`flow_rate` decimal(10,2) DEFAULT NULL COMMENT '流量(立方米/小时)',
|
||||
`start_time` datetime NOT NULL COMMENT '开始灌溉时间',
|
||||
`end_time` datetime DEFAULT NULL COMMENT '结束灌溉时间',
|
||||
`duration_minutes` int(11) DEFAULT NULL COMMENT '灌溉时长(分钟)',
|
||||
`total_water` decimal(10,2) DEFAULT NULL COMMENT '总灌溉量(立方米)',
|
||||
`status` tinyint(1) NOT NULL DEFAULT '0' COMMENT '状态 0-未关阀 1-已关阀',
|
||||
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
|
||||
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
|
||||
`is_del` tinyint(1) DEFAULT '0' COMMENT '逻辑删除 0-正常 1-删除',
|
||||
PRIMARY KEY (`id`),
|
||||
KEY `idx_valve_id` (`valve_id`),
|
||||
KEY `idx_park_id` (`park_id`),
|
||||
KEY `idx_plot_id` (`plot_id`),
|
||||
KEY `idx_status` (`status`),
|
||||
KEY `idx_start_time` (`start_time`)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='电磁阀灌溉记录表';
|
||||
Reference in New Issue
Block a user