seecoder-devcloud-frontend/src/components/Tutorial.vue

<template>
  <div class="tutorial">
    <el-row style="padding: 5px; font-size: larger">Developer使用指南
      <el-button size="small" class="closeButton" @click="closeTutorial"></el-button>
    </el-row>
    <el-divider style="margin: 4px; height: 2px"/>
    <div id="taskContainer" class="introduction" v-if="showTask">
      <div v-for="(task, index) in taskList" :key="index" class="taskLine" @click="beginTask(index)">
        <el-tag type="info" size="mini" effect="light" round v-if="task.status === 0">未开始</el-tag>
        <el-tag type="danger" size="mini" effect="light" round v-if="task.status === 1">进行中</el-tag>
        <el-tag type="success" size="mini" effect="light" round v-if="task.status === 2">已完成</el-tag>
        {{task.description}}
      </div>
    </div>
    <div id="stepContainer" class="introduction" v-if="showStep">
      <div style="float: left; padding: 6px; left: 5px">{{stepIndex+1}}.</div>
      <div style="padding: 4px; margin-left:20px; margin-bottom: 8px">{{ currentSteps[stepIndex].description }}</div>
      <div style="padding: 4px; margin-left:20px; margin-bottom: 8px">请按照下列指示进行操作：</div>
      <div class="actionDisplay" v-show="!stepFinish">{{currentSteps[stepIndex].action}}</div>
      <div class="actionDisplaySuccess" v-show="stepFinish">{{currentSteps[stepIndex].action}}</div>
      <el-button size="small" type="primary" plain
                 :disabled="!stepFinish" style="float: right; right: 5px; margin-top: 10px" @click="nextStep">
        下一步
      </el-button>
    </div>
  </div>
  <div class="shade" style="height: 60px; width: 100%"></div>
  <div class="shade" style="top: 60px; height: 100%; width: 100%;"></div>
</template>

<script>
export default {
  name: 'Tutorial',
  data() {
    return {
      showTask: true,
      showStep: false,
      // status 表示某一个任务是否被完成，0表示未开始，1表示进行中，2表示已完成
      taskList: [
        { name: 'display', description: 'Developer界面介绍', status: 0 },
        { name: 'taskList', description: '学习使用任务列表模块', status: 0 },
        { name: 'git', description: '学习使用提交记录模块', status: 0 },
        { name: 'pipeline', description: '学习使用流水线模块', status: 0 },
        { name: 'database', description: '学习使用数据库模块', status: 0 },
        { name: 'apitest', description: '学习使用测试模块', status: 0 },
        { name: 'bugList', description: '学习使用缺陷模块', status: 0 },
        { name: 'codereview', description: '学习开展分支评审任务', status: 0 },
      ],
      instructions: {
        display: [],
        taskList: [
          {
            id: 'taskList', popUpId: 'sidebar', description: 'Developer系统提供了任务列表模块，用户可以管理项目开发过程中的所有任务。', action: '点击左边栏中的"任务列表"按钮', type: 'click',
          },
          {
            id: 'taskListTable', popUpId: 'taskListTable', description: '在此模块中可以看到所有存在的任务，以及其预计耗时、优先级等信息', action: '查看表中的任务信息', type: 'display',
          },
        ],
        git: [
          {
            id: 'git', popUpId: 'sidebar', description: 'Developer系统的模块选择位于最左侧的选择栏中', action: '点击左边栏中的"提交记录"按钮', type: 'click',
          },
          {
            id: 'gitCommitTree', popUpId: 'gitCommitTree', description: '提交记录模块中展示了项目的所有git commit记录', action: '查看当前分支的commit信息', type: 'display',
          },
          {
            id: 'gitBranchSelect', popUpId: 'gitSelectRow', description: '提交记录模块允许选择分支来单独展示分支上的变更', action: '选择master分支', type: 'select', value: 'master',
          },
          {
            id: 'gitFilterButton', popUpId: 'gitSelectRow', description: '', action: '点击\'过滤\'按钮确认筛选', type: 'click',
          },
          {
            id: 'gitAuthorSelect', popUpId: 'gitSelectRow', description: '提交记录模块允许在分支的基础上通过提交人进行筛选', action: '选择任意的提交者', type: 'select',
          },
          {
            id: 'gitFilterButton', popUpId: 'gitSelectRow', description: '', action: '点击\'过滤\'按钮确认筛选', type: 'click',
          },
          {
            id: 'gitTitleFilter', popUpId: 'gitSelectRow', description: '提交记录模块允许根据commit信息以及哈希码进行过滤', action: '输入需要筛选的message或者哈希码', type: 'input',
          },
          {
            id: 'gitFilterButton', popUpId: 'gitSelectRow', description: '', action: '点击\'过滤\'按钮确认筛选', type: 'click',
          },
        ],
        pipeline: [
          {
            id: 'pipeline', popUpId: 'sidebar', description: 'Developer系统提供了流水线模块，用户可以创建并触发部署流水线，查看部署产物。', action: '点击左边栏中的"流水线"按钮', type: 'click',
          },
          {
            id: 'pipelineCreateButton', popUpId: 'pipelineElTable', description: '为了使用流水线模块的功能，我们首先创建一个新的流水线', action: '点击创建按钮', type: 'click',
          },
          {
            id: 'pipelineCreateTitle', popUpId: 'pipelineCreateTitle', description: '', action: '填写流水线标题为"springboot"', type: 'input', input: 'springboot',
          },
          {
            id: 'pipelineCreateTemplate', popUpId: 'pipelineCreateTemplate', description: '', action: '选择流水线模版"SpringBoot"', type: 'select', value: 'SPRINGBOOT_JAVA8',
          },
          {
            id: 'pipelineCreateConfirm', popUpId: 'pipelineCreateConfirm', description: '', action: '点击确认创建流水线', type: 'select',
          },
          {
            id: 'pipelineTable', popUpId: 'pipelineTabs', description: '在此表中可以看到所有的流水线信息', action: '查看流水线列表', type: 'display',
          },
          {
            id: 'pipelineEditButton-springboot', popUpId: 'pipelineElTable', description: '为了使用流水线任务，我们还需要配置一些必要信息，比如代码仓库地址、端口等', action: '点击编辑按钮', type: 'click',
          },
          {
            id: 'pipelineEditInput-branchOrHash', popUpId: 'pipelineEditInput-branchOrHash', description: '代码检查镜像会在构建前检查指定的分支或提交的代码', action: '输入需要生成检查镜像的分支或hash', type: 'input',
          },
          {
            id: 'pipelineEditNextStep', popUpId: 'pipelineEditNextStep', description: '', action: '点击按钮进行后续配置', type: 'click',
          },
          {
            id: 'pipelineEditInput-repoUrl', popUpId: 'pipelineEditInput-repoUrl', description: '在触发流水线任务时，Developer系统会在指定仓库、指定分支拉取代码并进行构建', action: '输入需要构建的代码仓库地址', type: 'input',
          },
          {
            id: 'pipelineEditInput-branchName', popUpId: 'pipelineEditInput-branchName', description: '', action: '输入需要构建的代码分支', type: 'input',
          },
          {
            id: 'pipelineEditNextStep', popUpId: 'pipelineEditNextStep', description: '', action: '点击按钮进行后续配置', type: 'click',
          },
          {
            id: 'pipelineEditInput-port', popUpId: 'pipelineEditInput-port', description: '此处需要填写springboot后端项目将要占用的端口', action: '填写8080', type: 'input', value: '8080',
          },
          {
            id: 'pipelineEditNextStep', popUpId: 'pipelineEditNextStep', description: '', action: '点击按钮进行后续配置', type: 'click',
          },
          {
            id: 'pipelineEditInput-testSelect', popUpId: 'pipelineEditInput-testSelect', description: '此处可以选择需要进行的自动化接口测试，可以在测试模块中创建API测试', action: '选择需要进行的API测试任务，可以不选择', type: 'display',
          },
          {
            id: 'pipelineEditFinish', popUpId: 'pipelineEditFinish', description: '', action: '点击按钮完成配置', type: 'click',
          },
          {
            id: 'pipelineActivateButton-springboot', popUpId: 'pipelineActivateButton-springboot', description: '点击触发按钮后，系统会根据配置拉取代码并进行构建', action: '点击触发按钮', type: 'click',
          },
        ],
        database: [
          {
            id: 'pipeline', popUpId: 'sidebar', description: '在使用数据库模块之前需要先通过流水线部署一个数据库实例', action: '点击左边栏中的"流水线"按钮', type: 'click',
          },
          {
            id: 'pipelineCreateButton', popUpId: 'pipelineElTable', description: '', action: '点击按钮新建流水线', type: 'click',
          },
          {
            id: 'pipelineCreateTitle', popUpId: 'pipelineCreateTitle', description: '', action: '填写流水线标题为"mysql"', type: 'input', input: 'mysql',
          },
          {
            id: 'pipelineCreateTemplate', popUpId: 'pipelineCreateTemplate', description: '', action: '选择流水线模版"MYSQL"', type: 'select', value: 'MYSQL',
          },
          {
            id: 'pipelineCreateConfirm', popUpId: 'pipelineCreateConfirm', description: '', action: '点击确认创建流水线', type: 'select',
          },
          {
            id: 'pipelineActivateButton-mysql', popUpId: 'pipelineElTable', description: '默认的数据库占用3306端口，root账户的密码默认为root，可以在编辑中进行修改。', action: '点击确认触发数据库部署', type: 'click',
          },
          {
            id: 'database', popUpId: 'sidebar', description: 'Developer系统提供了数据库模块，用户可以在此模块中执行SQL语句，直观的对数据库进行操作', action: '点击左边栏中的"数据库"按钮', type: 'click',
          },
          {
            id: 'databaseSelect', popUpId: 'projectContainer', description: '用户在此处需要选择要操作的数据库，必须在流水线模块中部署后才可以选择', action: '选择mysql数据库实例', type: 'select', value: 'mysql',
          },
          {
            id: 'databasePassword', popUpId: 'projectContainer', description: '用户在此处需要输入数据库的密码', action: '输入root用户的密码', type: 'input',
          },
          {
            id: 'databaseSQL', popUpId: 'projectContainer', description: '用户在此处输入要执行的SQL语句', action: '输入SQL语句', type: 'input',
          },
          {
            id: 'databaseExec', popUpId: 'projectContainer', description: '', action: '点击按钮执行SQL语句', type: 'click',
          },
          {
            id: 'databaseHistory', popUpId: 'databaseHistory', description: '', action: '在此处可以看到SQL语句执行历史以及结果', type: 'display',
          },
        ],
        apitest: [
          {
            id: 'apitest', popUpId: 'sidebar', description: '', action: '点击左边栏中的"测试"', type: 'click',
          },
          {
            id: 'testCreateButton', popUpId: 'testElTable', description: '测试模块包括接口测试与黑盒测试两个部分，首先使用接口测试部分', action: '点击按钮新建接口测试任务', type: 'click',
          },
          {
            id: 'testCreateTitle', popUpId: 'testCreateTitle', description: '此处填写测试的名称，在构建时可以根据此名称选择需要进行的自动化测试', action: '输入"tutorial"', type: 'input', value: 'tutorial',
          },
          {
            // eslint-disable-next-line max-len
            id: 'testCreateUrl', popUpId: 'testCreateUrl', description: '此处填写接口测试使用的URL, 触发测试时会想此处发送请求', action: '输入"http://backend.todolist-backend-877.devcloud.seec.seecoder.cn/hello"', type: 'input', value: 'http://backend.todolist-backend-877.devcloud.seec.seecoder.cn/hello',
          },
          {
            id: 'testCreateMethod', popUpId: 'testCreateMethod', description: '此处填写接口使用的Http方法类型', action: '选择GET', type: 'select', value: 'GET',
          },
          {
            id: 'testCreateParam', popUpId: 'testCreateParam', description: '此处填写Http需要填写的参数，POST方法中是指RequestBody', action: '在此方法中无需填写', type: 'display',
          },
          {
            id: 'testCreateConfirm', popUpId: 'testCreateConfirm', description: '', action: '点击按钮创建测试', type: 'click',
          },
          {
            id: 'testExec-tutorial', popUpId: 'testElTable', description: '触发测试后，系统会按照配置发送Http请求并返回结果', action: '点击按钮触发测试', type: 'click',
          },
          {
            id: 'testDetail-tutorial', popUpId: 'testElTable', description: '用户可以查看测试的执行历史等信息', action: '点击按钮查看详情', type: 'click',
          },
          {
            id: 'testExecHistory', popUpId: 'testExecHistory', description: '', action: '查看接口测试的执行历史，点击前面的按钮可以查看测试执行返回结果', type: 'display',
          },
        ],
        bugList: [
          {
            id: 'bugList', popUpId: 'sidebar', description: 'Developer系统提供了缺陷管理模块用于管理开发过程中发现的各种问题', action: '点击左边栏中的"缺陷列表"', type: 'click',
          },
          {
            id: 'generalTableCreateButton', popUpId: 'projectContainer', description: '', action: '点击按钮创建新的缺陷', type: 'click',
          },
          {
            id: 'bugAddTitle', popUpId: 'bugAddTitle', description: '', action: '填写缺陷的名称', type: 'input',
          },
          {
            id: 'bugAddDescription', popUpId: 'bugAddDescription', description: '此处需要描述缺陷出现的场景，可能出现的原因，方便其余人员进行修复', action: '填写缺陷描述(非必填)', type: 'display',
          },
          {
            id: 'bugAddTime', popUpId: 'bugAddTime', description: '此处填写预计解决缺陷需要花费的事件，以"人月"作为单位', action: '选择需要的时间', type: 'display',
          },
          {
            id: 'bugAddPriority', popUpId: 'bugAddPriority', description: '此处需要选择缺陷需要处理的优先级', action: '选择优先级', type: 'select',
          },
          {
            id: 'bugAddProcessor', popUpId: 'bugAddProcessor', description: '此处可以指定项目中的开发人员负责修复这个缺陷', action: '选择经办人', type: 'select',
          },
          {
            id: 'bugAddConfirm', popUpId: 'bugAddConfirm', description: '', action: '点击按钮创建缺陷', type: 'click',
          },
          {
            id: 'bugTable', popUpId: 'projectContainer', description: '在此处展示了当前项目的缺陷列表，点击其中一列可以查看缺陷的详情', action: '点击任意一列', type: 'click',
          },
          {
            id: 'bugEditSwitch', popUpId: 'bugEditSwitch', description: '在此处展示了某一个缺陷的详情，点击上方的开关按钮可以对缺陷进行编辑', action: '查看缺陷详情，对缺陷进行编辑', type: 'display',
          },
        ],
        codereview: [
          {
            id: 'codereview', popUpId: 'sidebar', description: '分支评审任务属于代码评审模块的一部分', action: '点击左边栏中的"代码评审"按钮', type: 'click',
          },
          {
            id: 'addBranchReview', popUpId: 'codeReviewButtonRow', description: '', action: '点击新建分支评审任务', type: 'click',
          },
          {
            id: 'selectSourceBranch', popUpId: 'branchSelectDrawer', description: '分支评审基于项目的不同分支进行，在创建分支评审时需要首先选择分支，目标分支与源分支不能相同', action: '选择master分支', type: 'select', value: 'master',
          },
          {
            id: 'selectTargetBranch', popUpId: 'branchSelectDrawer', description: '当分支评审任务结束时，会将源分支上的改动合并至目标分支中', action: '选择dev分支', type: 'select', value: 'dev',
          },
          {
            id: 'confirmSelectBranch', popUpId: 'branchSelectDrawer', description: '', action: '点击继续按钮', type: 'click',
          },
          {
            id: 'branchAddCodeDiff', popUpId: 'branchReviewDrawer', description: '在此处可以预览分支间的代码差异', action: '查看分支代码差异预览', type: 'display',
          },
          {
            id: 'branchReviewTitle', popUpId: 'branchReviewDrawer', description: '', action: '填写评审任务的的标题', type: 'input',
          },
          {
            id: 'branchReviewer', popUpId: 'branchReviewDrawer', description: '分支评审任务只可以选择项目内部的开发人员作为评审人', action: '选择任意的评审人', type: 'select',
          },
          {
            id: 'confirmCreateBranchReview', popUpId: 'branchReviewDrawer', description: '', action: '点击确认创建新的分支评审任务', type: 'click',
          },
        ],
      },
      currentSteps: [],
      eventListeners: [],
      stepFinish: false,
      stepIndex: -1,
      taskIndex: 1,
    };
  },
  methods: {
    beginTask(index) {
      this.currentSteps = this.instructions[this.taskList[index].name];
      this.taskList[index].status = 1;
      this.taskIndex = index;
      this.nextStep();
      this.showTask = false;
      this.showStep = true;
    },
    nextStep() {
      if (this.stepIndex !== -1) {
        // 存在前一个步骤，需要先消除之前的闪烁边框以及z-index提前
        document.getElementById(this.currentSteps[this.stepIndex].id).classList.remove('border-glow');
        document.getElementById(this.currentSteps[this.stepIndex].popUpId).classList.remove('pop-up');
        // 去除事件监听器
        if (this.eventListeners[this.stepIndex] !== null) {
          document.getElementById(this.currentSteps[this.stepIndex].id).removeEventListener(this.eventListeners[this.stepIndex].type, this.eventListeners[this.stepIndex].func);
        }
      }
      if (this.stepIndex === this.currentSteps.length - 1) {
        // 所有的步骤都被遍历完，可以直接推出步骤引导，返回任务列表
        this.stepIndex = -1;
        this.taskList[this.taskIndex].status = 2;
        this.showStep = false;
        this.showTask = true;
        this.eventListeners = [];
        this.currentSteps = [];
        return;
      }
      this.stepIndex += 1;
      this.stepFinish = false;
      // 更改元素的样式，增加闪烁边框以及增加z-index
      document.getElementById(this.currentSteps[this.stepIndex].id).classList.add('border-glow');
      document.getElementById(this.currentSteps[this.stepIndex].popUpId).classList.add('pop-up');
      const { type } = this.currentSteps[this.stepIndex];
      let event;
      const that = this;
      if (type === 'display') {
        // 操作类型为仅展示，不需要操作
        this.stepFinish = true;
        event = null;
        this.eventListeners.push(event);
      } else if (type === 'click') {
        event = function () {
          that.stepFinish = true;
          document.getElementById(that.currentSteps[that.stepIndex].popUpId).classList.remove('pop-up');
        };
        document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('click', event);
        this.eventListeners.push({ type: 'click', func: event });
      } else if (type === 'select') {
        event = function () {
          const expectedV = that.currentSteps[that.stepIndex].value;
          const actualV = document.getElementById(that.currentSteps[that.stepIndex].id).value;
          if (expectedV === null || expectedV === undefined) {
            that.stepFinish = true;
          } else {
            that.stepFinish = expectedV === actualV;
          }
        };
        document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('focus', event);
        this.eventListeners.push({ type: 'focus', func: event });
      } else if (type === 'input') {
        event = function () {
          const expectedV = that.currentSteps[that.stepIndex].value;
          const actualV = document.getElementById(that.currentSteps[that.stepIndex].id).value;
          if (expectedV === null || expectedV === undefined) {
            that.stepFinish = true;
          } else {
            that.stepFinish = expectedV === actualV;
          }
        };
        document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('change', event);
        this.eventListeners.push({ type: 'change', func: event });
      } else if (type === 'row-click') {
        event = function () {
          that.stepFinish = true;
          document.getElementById(that.currentSteps[that.stepIndex].popUpId).classList.remove('pop-up');
        };
        document.getElementById(this.currentSteps[this.stepIndex].id).addEventListener('row-click', event);
        this.eventListeners.push({ type: 'row-click', func: event });
      }
    },
    closeTutorial() {
      this.currentSteps = [];
      this.showStep = false;
      this.showTask = true;
      if (this.stepIndex !== -1 && this.eventListeners[this.stepIndex] !== null) {
        document.getElementById(this.currentSteps[this.stepIndex].id).removeEventListener(this.eventListeners[this.stepIndex].type, this.eventListeners[this.stepIndex].func);
      }
      this.eventListeners = [];
      this.stepIndex = -1;
      this.stepFinish = false;
      this.$emit('close');
    },
  },
  emits: ['close'],
};
</script>

<style scoped>
.shade {
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0,0,0,0);
  z-index: 2000;
}
.tutorial {
  width: 300px;
  height: 100%;
  z-index: 5000;
  padding: 5px;
  background-color: rgba(255,255,255,1);
}
.introduction {
  padding: 5px;
  margin-top: 5px;
  color: #444444;
}
.taskLine {
  padding: 8px 5px;
  margin-bottom: 10px;
  border-bottom: solid 1px #eeeeee;
}
.taskLine:hover {
  cursor: pointer;
}
.actionDisplay {
  margin-left: 20px;
  border-left: 5px solid #909090;
  margin-bottom: 8px;
  background-color: whitesmoke;
  padding: 5px;
  font-size: smaller;
}
.actionDisplaySuccess {
  margin-left: 20px;
  margin-bottom: 8px;
  border-left: 5px solid #67C23A;
  background-color: #F0F9EB;
  padding: 5px;
  font-size: smaller;
}
.closeButton {
  background-image: url("../assets/icon/close.svg");
  background-size: 25px 25px;
  background-repeat: no-repeat;
  border: none;
  margin-left: 70px;
}
</style>
<style>
.border-glow {
  animation: glow 800ms ease-out infinite alternate;
}
@keyframes glow {
  0% {
    border-color: yellow;
    box-shadow: 0 0 1px 3px yellow inset;
  }
  100% {
    border-color: yellow;
    box-shadow: 0 0 1px 5px yellow inset;
  }
}
.pop-up {
  z-index: 3000;
}
</style>