搜索结果列表页面开发
This commit is contained in:
付民康
186
src/views/UserSetting/Pipeline/index.vue
Normal file
186
src/views/UserSetting/Pipeline/index.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<!-- 用户设置-流水线 -->
|
||||
<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>
|
||||
Reference in New Issue
Block a user