Merge remote-tracking branch 'gitee/dev' into dev

web-vue/src/pages/build/list.vue

@@ -104,7 +104,7 @@
         <a-form-model-item label="构建命令" prop="script">
           <a-input v-model="temp.script" type="textarea" :rows="3" style="resize: none;" placeholder="构建执行的命令，如：mvn clean package"/>
         </a-form-model-item>
-        <a-form-model-item label="产物目录" prop="resultDirFile">
+        <a-form-model-item label="产物目录" prop="resultDirFile" class="jpom-target-dir">
           <a-input v-model="temp.resultDirFile" placeholder="构建产物目录，相对路径"/>
         </a-form-model-item>
         <a-form-model-item label="发布操作" prop="releaseMethod">
@@ -168,6 +168,7 @@
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex';
 import BuildLog from './log';
 import {
   getBuildGroupList, getBuildList, getBranchList, editBuild, deleteBuild,
@@ -233,12 +234,35 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters([
+      'getGuideFlag'
+    ])
+  },
+  watch: {
+    getGuideFlag() {
+      this.introGuide();
+    }
+  },
   created() {
     this.calcTableHeight();
     this.loadGroupList();
     this.handleFilter();
   },
   methods: {
+    // 页面引导
+    introGuide() {
+      if (this.getGuideFlag) {
+        this.$introJs().setOptions({
+          steps: [{
+            element: document.querySelector('.jpom-target-dir'),
+            intro: '可以理解为项目打包的目录。如 Jpom 项目执行 <b>mvn clean package</b> 构建命令，构建产物相对路径为：<b>modules/server/target/server-2.4.2-release</b>'
+          }]
+        }).start();
+      } else {
+        this.$introJs().exit();
+      }
+    },
     // 计算表格高度
     calcTableHeight() {
       this.$nextTick(() => {
@@ -317,6 +341,11 @@ export default {
       this.loadNodeProjectList();
       this.loadSshList();
       this.editBuildVisible = true;
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.introGuide();
+        }, 500);
+      })
     },
     // 修改
     handleEdit(record) {

web-vue/src/pages/dispatch/list.vue

@@ -92,7 +92,7 @@
         <a-form-model-item label="Main Class" prop="mainClass" v-show="temp.runMode !== 'Jar'">
           <a-input v-model="temp.mainClass" placeholder="程序运行的 main 类(jar 模式运行可以不填)"/>
         </a-form-model-item>
-        <a-form-model-item label="项目白名单路径" prop="whitelistDirectory">
+        <a-form-model-item label="项目白名单路径" prop="whitelistDirectory" class="jpom-project-whitelist">
           <a-select v-model="temp.whitelistDirectory" placeholder="请选择项目白名单路径">
             <a-select-option v-for="access in accessList" :key="access">{{ access }}</a-select-option>
           </a-select>
@@ -179,6 +179,7 @@
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex';
 import File from '../node/node-layout/project/project-file';
 import Console from '../node/node-layout/project/project-console';
 import { getDishPatchList, getDispatchProject, getReqId, editDispatch, editDispatchProject, uploadDispatchFile, getDispatchWhiteList, deleteDisPatch } from '../../api/dispatch';
@@ -252,10 +253,33 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters([
+      'getGuideFlag'
+    ])
+  },
+  watch: {
+    getGuideFlag() {
+      this.introGuide();
+    }
+  },
   created() {
     this.handleFilter();
   },
   methods: {
+    // 页面引导
+    introGuide() {
+      if (this.getGuideFlag) {
+        this.$introJs().setOptions({
+          steps: [{
+            element: document.querySelector('.jpom-project-whitelist'),
+            intro: '项目白名单需要在侧边栏菜单<b>分发白名单</b>组件里面去设置'
+          }]
+        }).start();
+      } else {
+        this.$introJs().exit();
+      }
+    },
     // 加载数据
     loadData() {
       this.list = [];
@@ -454,6 +478,9 @@ export default {
       this.editDispatchVisible = true;
       this.$nextTick(() => {
         this.$refs['editDispatchForm'].resetFields();
+        setTimeout(() => {
+          this.introGuide();
+        }, 500);
       })
     },
     // 编辑分发项目

web-vue/src/pages/monitor/list.vue

@@ -48,7 +48,7 @@
             </a-select-opt-group>
           </a-select>
         </a-form-model-item>
-        <a-form-model-item label="报警联系人" prop="notifyUser">
+        <a-form-model-item label="报警联系人" prop="notifyUser" class="jpom-notify">
           <a-transfer
             :data-source="userList"
             show-search
@@ -63,6 +63,7 @@
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex';
 import { getMonitorList, editMonitor,  deleteMonitor } from '../../api/monitor';
 import { getAdminUserList } from '../../api/user';
 import { getNodeProjectList } from '../../api/node';
@@ -101,12 +102,35 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters([
+      'getGuideFlag'
+    ])
+  },
+  watch: {
+    getGuideFlag() {
+      this.introGuide();
+    }
+  },
   created() {
     this.loadData();
     this.loadUserList();
     this.loadNodeProjectList();
   },
   methods: {
+    // 页面引导
+    introGuide() {
+      if (this.getGuideFlag) {
+        this.$introJs().setOptions({
+          steps: [{
+            element: document.querySelector('.jpom-notify'),
+            intro: '如果这里的报警联系人无法选择，说明这里面的管理员没有设置邮箱，在右上角下拉菜单里面的用户资料里可以设置。'
+          }]
+        }).start();
+      } else {
+        this.$introJs().exit();
+      }
+    },
     // 加载数据
     loadData() {
       this.loading = true;
@@ -171,6 +195,11 @@ export default {
     // 新增
     handleAdd() {
       this.editMonitorVisible = true;
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.introGuide();
+        }, 500);
+      })
     },
     // 修改
     handleEdit(record) {

web-vue/src/pages/node/list.vue

@@ -98,12 +98,14 @@
         <a-form-model-item label="节点地址" prop="url">
           <a-input v-model="temp.url" placeholder="节点地址 (127.0.0.1:2123)"/>
         </a-form-model-item>
-        <a-form-model-item label="节点账号" prop="loginName">
-          <a-input v-model="temp.loginName" placeholder="节点账号"/>
-        </a-form-model-item>
-        <a-form-model-item label="节点密码" prop="loginPwd">
-          <a-input-password v-model="temp.loginPwd" placeholder="节点密码"/>
-        </a-form-model-item>
+        <div class="node-config">
+          <a-form-model-item label="节点账号" prop="loginName">
+            <a-input v-model="temp.loginName" placeholder="节点账号"/>
+          </a-form-model-item>
+          <a-form-model-item label="节点密码" prop="loginPwd">
+            <a-input-password v-model="temp.loginPwd" placeholder="节点密码"/>
+          </a-form-model-item>
+        </div>
         <a-form-model-item label="超时时间" prop="timeOut">
           <a-input-number v-model="temp.timeOut" :min="0" placeholder="毫秒 (值太小可能会取不到节点状态)" style="width: 100%"/>
         </a-form-model-item>
@@ -210,22 +212,8 @@ export default {
       if (this.getGuideFlag) {
         this.$introJs().setOptions({
           steps: [{
-            title: '页面导航系统',
-            intro: '不要慌，这是新版本的页面导航系统，如果你不想看到，可以点击关闭'
-          },{
-            element: document.querySelector('.logo'),
-            intro: '点击这里可以切换是否开启导航'
-          },
-          {
-            element: document.querySelector('.side-menu'),
-            intro: '这里是侧边栏菜单区域'
-          },
-          {
-            element: document.querySelector('.app-header'),
-            intro: '这是页面头部，会出现多个 Tab 标签页，以及个人信息等操作按钮'
-          },{
-            element: document.querySelector('.layout-content'),
-            intro: '这里是主要的内容展示区域'
+            element: document.querySelector('.node-config'),
+            intro: '节点的账号密码可以通过 agent_authorize.json 文件查看'
           }]
         }).start();
       } else {
@@ -300,6 +288,11 @@ export default {
         openStatus: true
       };
       this.editNodeVisible = true;
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.introGuide();
+        }, 500);
+      })
     },
     // 进入终端
     handleTerminal(record) {

web-vue/src/pages/user/index.vue

@@ -23,7 +23,7 @@
         <a-form-model-item label="昵称" prop="name">
           <a-input v-model="temp.name" placeholder="昵称"/>
         </a-form-model-item>
-        <a-form-model-item label="勾选角色" prop="feature" class="feature">
+        <a-form-model-item label="勾选角色" prop="feature" class="feature jpom-role">
           <a-transfer
             :data-source="roleList"
             show-search
@@ -38,6 +38,7 @@
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex';
 import { getUserList, addUser, updateUser, deleteUser } from '../../api/user';
 import { getRoleList } from '../../api/role';
 import { parseTime } from '../../utils/time';
@@ -76,11 +77,34 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters([
+      'getGuideFlag'
+    ])
+  },
+  watch: {
+    getGuideFlag() {
+      this.introGuide();
+    }
+  },
   created() {
     this.loadData();
     this.loadRoleList();
   },
   methods: {
+    // 页面引导
+    introGuide() {
+      if (this.getGuideFlag) {
+        this.$introJs().setOptions({
+          steps: [{
+            element: document.querySelector('.jpom-role'),
+            intro: '如果这里面没有你想要的角色信息，你需要先去添加一个角色。'
+          }]
+        }).start();
+      } else {
+        this.$introJs().exit();
+      }
+    },
     // 加载数据
     loadData() {
       this.loading = true;
@@ -116,6 +140,11 @@ export default {
       this.temp = {};
       this.loadRoleList();
       this.editUserVisible = true;
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.introGuide();
+        }, 500);
+      })
     },
     // 修改用户
     handleEdit(record) {