Situation-Awareness-Platform-Frontend/src/views/UserSetting/Pipeline/index.vue

<!-- 用户设置-流水线 -->
<script setup lang="ts">
import { SettingTitle } from '@/components/Setting/index';
import { useAccountStore } from '@/stores/user';
const { accountInfo } = useAccountStore();
const startUse = () => {
  window.open('https://auth.huaweicloud.com/authui/saml/login?xAccountType=hid_ochgo94c_ruldd9_IDP&isFirstLogin=false&service=https%3A%2F%2Fdevcloud.cn-north-4.huaweicloud.com%2Fcicd%2Fpipeline', '_blank');
};
</script>
<template>
  <div class="pt-6 pipeline">
    <div>
      <SettingTitle title="三方流水线" class="font-[600]"></SettingTitle>
    </div>
    <Card class="mt-3 overflow-hidden">
      <div class="content">
        <div class="desc">
          流水线服务提供可视化、可编排的CI/CD持续交付软件生产线，帮助企业快速转型，实现DevOps持续交付高效自动化，缩短应用交付周期，提升研发效率。
        </div>
        <div class="flow">
          <div class="item">
            <span>登录</span>
            <span>华为云</span>
          </div>
          <div class="item">
            <span>实名认证</span>
          </div>
          <div class="item">
            <span>开通</span>
            <span>CodeArts</span>
          </div>
          <div class="item">
            <span>创建</span>
            <span>流水线</span>
          </div>
        </div>
        <div class="desc">
          欢迎使用 GitCode 流水线（华为云 CodeArts 版），你可以通过 GitCode 账号直接登录华为云账号，并在完成实名认证后使用 CodeArts 流水线。
        </div>
        <div class="flow-desc mt-20">
          <div class="title">一、华为云实名认证</div>
          <div class="desc">通过GitCode账号登录华为云之后，你需要先完成华为云的实名认证，目前个人账号实名认证支持个人银行卡认证、人脸识别认证和个人证件认证三种方式：</div>
          <ul class="list">
            <li>推荐人脸识别认证（即时完成认证）<a href="https://support.huaweicloud.com/usermanual-account/zh-cn_topic_0133456714.html" target="_blank">如何进行人脸识别认证</a></li>
            <li>银行卡认证（即时完成认证）<a href="https://support.huaweicloud.com/usermanual-account/zh-cn_topic_0076156874.html" target="_blank">如何进行银行卡认证</a></li>
            <li>证件认证（1-3个工作日）<a href="https://support.huaweicloud.com/usermanual-account/zh-cn_topic_0066810647.html" target="_blank">如何进行证件认证</a> </li>
          </ul>
          <div class="title">二、开通 CodeArts 服务</div>
          <div class="desc">选择开通CodeArts体验版 <a href="https://support.huaweicloud.com/usermanual-devcloud/devcloud_01_0002.html" target="_blank">如何开通CodeArts</a></div>
          <div class="title">三、创建流水线</div>
          <div class="desc">你可以使用流水线提供的一系列常用功能：</div>
          <ul class="list">
            <li>新建流水线</li>
            <li>配置流水线</li>
            <li>执行流水线</li>
          </ul>
          <div class="desc">流水线中可以运行下列任务：</div>
          <ul class="list">
            <li>构建</li>
            <li>代码检查</li>
            <li>部署</li>
            <li>测试</li>
            <li>通用（子流水线、创建仓库标签、Jenkins任务、人工审核、延时执行、挂起流水线等）</li>
          </ul>
          <div class="desc">点击查看 <a href="https://support.huaweicloud.com/usermanual-pipeline/pipeline_01_0014.html" target="_blank">更多流水线的使用说明</a></div>
        </div>
        <div class="account" v-if="accountInfo.atomgit_username">
          <div class="avator">
          </div>
          <div class="name">
            AtomGit 账号：{{ accountInfo.atomgit_username }}
          </div>
          <div class="star-use ml-20">
            <d-button variant="solid" color="primary" @click="startUse">开始使用</d-button>
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>
<style scoped lang="scss">
.pipeline {
  .content {
    // padding: 20px;
    background-color: #fff;

    .flow {
      display: flex;
      justify-content: center;
      padding: 20px 0;

      .item {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        background: #F2F7FF;
        border: 1px solid #D6E6FF;
        color: var(--color-G900);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 40px;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          width: 20px;
          height: 1px;
          right: -30px;
          background-color: var(--color-O500);
        }
        &::before {
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          border-left: 8px solid var(--color-O500);
          border-top: 4px solid transparent;
          border-bottom: 4px solid transparent;
          right: -32px;
        }
        &:last-child {
          &::after,&::before {
            display: none;
          }
        }
      }
    }

    .flow-desc {
      padding: 20px;
      background-color: var(--color-CG100);

      .title {
        font-weight: bold;
        margin-bottom: 8px;
        margin-top: 20px;

        &:first-child {
          margin-top: 0;
        }
      }

      .list {
        padding-left: 16px;
        margin-top: 8px;
        margin-bottom: 8px;

        li {
          position: relative;
          line-height: 20px;

          &::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #3B82F6;
            left: -10px;
            top: 10px;
          }
        }
      }
    }

    .account {
      padding: 30px 0 12px;
      display: flex;
      align-items: center;

      .avator {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 8px;
        background: linear-gradient(135deg, #A855F7 0%, #818CF8 100%);
      }
    }

    a {
      color: var(--color-B600);
    }
  }
}</style>