forked from Gitlink/forgeplus-react
Merge pull request 'fix 样式、按需引入viewport' (#727) from Eeeros/forgeplus-react:gitlink_ssr_head into gitlink_ssr_head
1
This commit is contained in:
commit
cd6c0bbfbb
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,8 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2340181 */
|
||||
src: url('iconfont.woff2?t=1686823554834') format('woff2'),
|
||||
url('iconfont.woff?t=1686823554834') format('woff'),
|
||||
url('iconfont.ttf?t=1686823554834') format('truetype');
|
||||
src: url('iconfont.woff2?t=1715677391041') format('woff2'),
|
||||
url('iconfont.woff?t=1715677391041') format('woff'),
|
||||
url('iconfont.ttf?t=1715677391041') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -13,6 +13,22 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-a-22ziliaoshouce-xianxing:before {
|
||||
content: "\e971";
|
||||
}
|
||||
|
||||
.icon-changjiantou:before {
|
||||
content: "\e970";
|
||||
}
|
||||
|
||||
.icon-bangzhuzhongxinicon2:before {
|
||||
content: "\e96f";
|
||||
}
|
||||
|
||||
.icon-liulan1:before {
|
||||
content: "\e96e";
|
||||
}
|
||||
|
||||
.icon-a-zu2044:before {
|
||||
content: "\e96d";
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,34 @@
|
|||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "40333433",
|
||||
"name": "使用手册",
|
||||
"font_class": "a-22ziliaoshouce-xianxing",
|
||||
"unicode": "e971",
|
||||
"unicode_decimal": 59761
|
||||
},
|
||||
{
|
||||
"icon_id": "40172194",
|
||||
"name": "长箭头",
|
||||
"font_class": "changjiantou",
|
||||
"unicode": "e970",
|
||||
"unicode_decimal": 59760
|
||||
},
|
||||
{
|
||||
"icon_id": "37836900",
|
||||
"name": "帮助中心icon",
|
||||
"font_class": "bangzhuzhongxinicon2",
|
||||
"unicode": "e96f",
|
||||
"unicode_decimal": 59759
|
||||
},
|
||||
{
|
||||
"icon_id": "36898536",
|
||||
"name": "浏览",
|
||||
"font_class": "liulan1",
|
||||
"unicode": "e96e",
|
||||
"unicode_decimal": 59758
|
||||
},
|
||||
{
|
||||
"icon_id": "36020261",
|
||||
"name": "组 2044",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -23,7 +23,8 @@
|
|||
<meta name="theme-color" content="#000000">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="referrer" content="always">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
|
||||
<!-- 按需引用viewport content -->
|
||||
<meta name="viewport" content="">
|
||||
<link rel="canonical" href="https://gitlink.org.cn" data-turbo-transient="">
|
||||
<link rel="fluid-icon" href="https://www.gitlink.org.cn/images/logo.png" title="GitLink">
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import React, {useEffect, useState} from 'react';
|
||||
import { Button, Modal, Input, Select, message, Form } from 'antd';
|
||||
import axios from 'axios';
|
||||
import { confirmInfo1, confirmInfo2, synchronizeTips } from './editStore';
|
||||
import { branchForm, confirmInfo1, confirmInfo2, synchronizeTips } from './editStore';
|
||||
import gitHub from '../../img/github.png';
|
||||
import gitee from '../../img/gitee.png';
|
||||
import '../index.scss';
|
||||
|
||||
function DeleteBox({owner, projectsId, visible, setVisible, branchList, reload, form, sync_repositories_unique=[]}) {
|
||||
const { getFieldDecorator, validateFields , resetFields, getFieldsValue } = form;
|
||||
function DeleteBox({owner, projectsId, visible, setVisible, branchList, reload, form, sync_repositories_unique=[], repositoriesBranch}) {
|
||||
const { getFieldDecorator, validateFields , resetFields, getFieldsValue, setFieldsValue } = form;
|
||||
// 选择仓库类型
|
||||
const [platform, setPlatform] = useState();
|
||||
// 已添加的仓库类型
|
||||
|
|
@ -72,45 +72,29 @@ function DeleteBox({owner, projectsId, visible, setVisible, branchList, reload,
|
|||
rules:[{required:true,message:`请选择同步仓库平台`}],
|
||||
})(
|
||||
<Select placeholder="请选择同步仓库平台" onChange={(value)=>{
|
||||
setPlatform(value)
|
||||
setPlatform(value);
|
||||
}}>
|
||||
<Select.Option value="Github"><img src={gitHub} alt="" className="storeLogo mr5"/>Github</Select.Option>
|
||||
<Select.Option value="Gitee"><img src={gitee} alt="" className="storeLogo mr5"/>Gitee</Select.Option>
|
||||
<Select.Option value="Github" disabled={!repositoriesBranch["Github"]}><img src={gitHub} alt="" className="storeLogo mr5"/>Github{!repositoriesBranch["Github"] && "，获取分支列表失败，请检查token是否有效"}</Select.Option>
|
||||
<Select.Option value="Gitee" disabled={!repositoriesBranch["Gitee"]}><img src={gitee} alt="" className="storeLogo mr5"/>Gitee{!repositoriesBranch["Gitee"] && "，获取分支列表失败，请检查token是否有效"}</Select.Option>
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>}
|
||||
{platform && <Form.Item label={`${platform}分支`}>
|
||||
{getFieldDecorator("external_branch_name",{
|
||||
rules:[{required:true,message:`请输入${platform}分支名称`}]
|
||||
})(
|
||||
<Input placeholder={`请输入${platform}分支名称`} className="storeInput" maxLength={50}/>
|
||||
)}
|
||||
</Form.Item>}
|
||||
<Form.Item label="Gitlink分支">
|
||||
{getFieldDecorator("gitlink_branch_name",{
|
||||
rules:[{required:true,message:"请选择Gitlink仓库分支"}]
|
||||
})(
|
||||
<Select placeholder="请选择Gitlink仓库分支">
|
||||
{branchList && branchList.map(item=>{
|
||||
const {branch_id, name} = item;
|
||||
return <Select.Option value={name} key={branch_id}>{name}</Select.Option>
|
||||
})}
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
<div className='directionByAddTaskModal'>
|
||||
{platform && <div className='directionByAddTaskModal'>
|
||||
<Form.Item label="首次同步方向：">
|
||||
{getFieldDecorator("first_sync_direction",{
|
||||
rules:[{required:true,message:"请选择首次同步方向"}]
|
||||
})(
|
||||
<Select placeholder="请选择首次同步方向">
|
||||
<Select placeholder="请选择首次同步方向" onChange={()=>{
|
||||
resetFields(["external_branch_name", "gitlink_branch_name"]);
|
||||
}}>
|
||||
<Select.Option value="2">{platform}同步至GitLink</Select.Option>
|
||||
<Select.Option value="1">GitLink同步至{platform}</Select.Option>
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
{synchronizeTips(platform)}
|
||||
</div>
|
||||
</div>}
|
||||
{platform && first_sync_direction && branchForm(getFieldDecorator, setFieldsValue, getFieldsValue, {}, first_sync_direction, first_sync_direction === "2" ? repositoriesBranch[platform] : branchList, platform, {})}
|
||||
</Form>
|
||||
{showConfrimContent && <div className='pt15'>
|
||||
{confirmInfo1()}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import '../index.scss';
|
|||
import axios from "axios";
|
||||
import CopyTool from "../../../Component/CopyTool";
|
||||
import { platformLogo, platformLogoUnText } from "..";
|
||||
import { reposyncerHelpIcon } from "./storeList";
|
||||
const { Step } = Steps;
|
||||
|
||||
export const confirmInfo1 = (tips="首次同步时，系统将主分支源码强制向从分支推送，覆盖从分支源码。后续任意分支有push事件，将自动同步至其他分支，与主从设置无关。若想更改主从分支，请返回并更改同步方向") =>{
|
||||
|
|
@ -50,22 +51,61 @@ export const confirmInfo2 = (info) =>{
|
|||
|
||||
export const synchronizeTips = (platform="Github")=>{
|
||||
return <Tooltip title={<div>
|
||||
①首次同步方向指两个仓库首次进行同步时，执行git pull指令的方向<br/>
|
||||
②若同步分支为全部分支，首次同步方向为<span style={{color: 'red'}}>GitLink同步至 {platform}</span>:系统将本仓库导入至已绑定的{platform}仓库，覆善目标仓库源码后，保持两个仓库的双向同步<br/>
|
||||
③若同步分支为单个分支，首次同步方向为<span style={{color: 'red'}}>GitLink同步至 {platform}</span>:系统将本仓库目标分支导入至已绑定的{platform}仓库，覆盖目标分支名称的源码，保持两个分支的双向同步
|
||||
首次同步方向指两个仓库首次进行同步时，执行git push指令的方向。<br/>
|
||||
若首次同步方向为GitLink同步至{platform}，则本仓库代码将被强推至绑定的{platform}仓库一次，后续根据webhook来监听仓库的双向同步
|
||||
{/* ②若同步分支为全部分支，首次同步方向为<span style={{color: 'red'}}>GitLink同步至 {platform}</span>:系统将本仓库导入至已绑定的{platform}仓库，覆善目标仓库源码后，保持两个仓库的双向同步<br/>
|
||||
③若同步分支为单个分支，首次同步方向为<span style={{color: 'red'}}>GitLink同步至 {platform}</span>:系统将本仓库目标分支导入至已绑定的{platform}仓库，覆盖目标分支名称的源码，保持两个分支的双向同步 */}
|
||||
</div>}>
|
||||
<Icon type="question-circle" theme="filled" style={{color: '#466aff'}} className="mb20 synchronizeTip"/>
|
||||
</Tooltip>
|
||||
}
|
||||
|
||||
// 根据同步方向显示分支form item
|
||||
export const branchForm = (getFieldDecorator, setFieldsValue, getFieldsValue, initialValues, first_sync_direction = "1", branchList, platform, formItemLayout)=>{
|
||||
const branchBySelectLabel = first_sync_direction === "1" ? "Gitlink" : platform;
|
||||
const branchBySelectKey = first_sync_direction === "1" ? "gitlink_branch_name" : "external_branch_name";
|
||||
const branchByInputLabel = first_sync_direction === "1" ? platform : "Gitlink";
|
||||
const branchByInputKey = first_sync_direction === "1" ? "external_branch_name" : "gitlink_branch_name";
|
||||
const branchName = getFieldsValue([branchByInputKey])[branchByInputKey]
|
||||
return <Fragment>
|
||||
<Form.Item label={`${branchBySelectLabel}分支`} {...formItemLayout}>
|
||||
{getFieldDecorator(branchBySelectKey,{
|
||||
rules:[{required:true,message:`请选择${branchBySelectLabel}仓库分支`}],
|
||||
initialValue: initialValues[branchBySelectKey]
|
||||
})(
|
||||
<Select placeholder={`请选择${branchBySelectLabel}仓库分支`} onChange={(value)=>{
|
||||
const formValue = {}
|
||||
formValue[branchByInputKey] = value
|
||||
setFieldsValue(formValue);
|
||||
}}>
|
||||
{branchList && branchList.map((item, index)=>{
|
||||
const {name} = item;
|
||||
return <Select.Option value={name} key={index}>{name}</Select.Option>
|
||||
})}
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item hidden={!branchName} label={`${branchByInputLabel}分支`} {...formItemLayout} extra="注:若仓库存在该分支，同步后将被源分支覆盖。若不存在该分支，则会新建一条同名分支并同步代码">
|
||||
{getFieldDecorator(branchByInputKey,{
|
||||
rules:[{required:true,message:`请输入${branchByInputLabel}分支名称`}],
|
||||
initialValue: initialValues[branchByInputKey]
|
||||
})(
|
||||
<Input placeholder={`请输入${branchByInputLabel}分支名称`} className="storeInput" maxLength={50} disabled/>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Fragment>
|
||||
}
|
||||
|
||||
function EditStore(props){
|
||||
const { form, history, storeDetail} = props;
|
||||
const {sync_repositories_unique=[]} = storeDetail || {};
|
||||
const { owner , projectsId } = props.match.params;
|
||||
const { getFieldDecorator, validateFields , resetFields, setFields, getFieldsValue } = form;
|
||||
const { getFieldDecorator, validateFields , resetFields, setFieldsValue, getFieldsValue } = form;
|
||||
const [step, setStep] = useState(0);
|
||||
// 仓库分支列表
|
||||
// Gitlink仓库分支列表
|
||||
const [branchList, setBranchList] = useState();
|
||||
const [externalRepoBranchList, setExternalRepoBranchList] = useState();
|
||||
// form表单值
|
||||
const [values, setValues] = useState({});
|
||||
// 选择仓库类型
|
||||
|
|
@ -95,6 +135,10 @@ function EditStore(props){
|
|||
branchName: branch === "1" ? "全部分支" : gitlink_branch_name,
|
||||
type: "gitlink"
|
||||
}
|
||||
|
||||
// 获取同步方向
|
||||
const first_sync_direction = values.first_sync_direction || getFieldsValue(["first_sync_direction"]).first_sync_direction;
|
||||
|
||||
// 根据已配置仓库同步的平台显示还剩哪些平台
|
||||
const synchronizedPlatformList = sync_repositories_unique.map(item=>{return item.type.split("::").pop()})
|
||||
const platformList = (synchronizedPlatformList.length && ["Github", "Gitee"].filter(item=>synchronizedPlatformList.indexOf(item) === -1)) || ["Github", "Gitee"]
|
||||
|
|
@ -153,7 +197,7 @@ function EditStore(props){
|
|||
return <div className="storeListBox mt20">
|
||||
<div className="headBox font-16 pl15 mb25">
|
||||
跨平台仓库代码同步
|
||||
<Tooltip title="跨平台仓库代码同步系统提供跨托管平台的项目协同开发同步功能。支持用户在任何一个托管平台上的代码提交、代码推送、合并请求等操作自动同步至其他托管平台。不仅增加每个开源项目与开发者的流量，也使不同平台的开源项目维护与更新变得方便与快捷" overlayStyle={{width: 400}}><span className="helpBox1 font-12 ml10">?</span></Tooltip>
|
||||
{reposyncerHelpIcon}
|
||||
</div>
|
||||
<div className="registerBox">
|
||||
<Steps current={step}>
|
||||
|
|
@ -175,8 +219,6 @@ function EditStore(props){
|
|||
resetFields();
|
||||
setPlatform(value);
|
||||
}}>
|
||||
{/* <Select.Option value="Github"><img src={github} alt="" className="storeLogo mr5"/>Github</Select.Option>
|
||||
<Select.Option value="Gitee"><img src={gitee} alt="" className="storeLogo mr5"/>Gitee</Select.Option> */}
|
||||
{platformList.map(item=>{
|
||||
return <Select.Option key={item} value={item}>{platformLogoUnText(item)}{item}</Select.Option>
|
||||
})}
|
||||
|
|
@ -194,7 +236,14 @@ function EditStore(props){
|
|||
<Input placeholder={`请输入${platform}同步仓库地址`} className="storeInput" maxLength={200}/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label={`${platform}同步仓库授权验证`} className="storeFormItem" hidden={step || !platform}>
|
||||
<Form.Item label={`${platform}同步仓库授权验证`} className="storeFormItem" hidden={step || !platform} extra={<div className="pt5 pl10 font-13">
|
||||
如何配置token：<br/>
|
||||
1、登录{platform}，确保拥有读写同步仓库的权限<br/>
|
||||
{platform === "Github" && "2、找到已存在的token，或新建一个token；新建方式为：点击个人头像→Settings→Developer Settings→Personal access tokens (classic)→Generate new token"}
|
||||
{platform === "Gitee" && "2、找到已存在的token，或新建一个token，新建方式为：点击个人头像→设置→私人令牌→生成新令牌"}
|
||||
<br/>
|
||||
3、确保token拥有仓库读写权限，且未过期。将token复制到此处token填写框
|
||||
</div>}>
|
||||
{getFieldDecorator("external_token",{
|
||||
rules:[{required:true,message: `请输入${platform || ""}授权token`}],
|
||||
initialValue: values.external_token
|
||||
|
|
@ -203,21 +252,26 @@ function EditStore(props){
|
|||
)}
|
||||
</Form.Item>
|
||||
{!step && <div>
|
||||
{/* {platform && <div>
|
||||
<Form.Item label={`${platform}同步仓库授权`} className="storeFormItem" required style={{marginBottom: '0'}}></Form.Item>
|
||||
<Button type="primary" ghost>点击授权</Button>
|
||||
</div>} */}
|
||||
<div className="mt30">
|
||||
<Button style={{width: '100px'}} onClick={()=>{history.go(-1)}} className="mr30">返回</Button>
|
||||
<Button type="primary" style={{width: '100px'}} onClick={()=>{
|
||||
// 保存用户已经输入的值
|
||||
validateFields(['type', 'external_repo_address', 'external_token'], (error, formValues )=>{
|
||||
if(!error){
|
||||
setStep(1);
|
||||
setValues({
|
||||
...values,
|
||||
...formValues
|
||||
})
|
||||
const address = formValues.external_repo_address.replace(".git", "").replace(`https://${platform.toLowerCase()}.com/`, "")
|
||||
// 获取github/gitee仓库的分支列表
|
||||
platform && axios.get(`/v1/${address}/branches/${platform.toLowerCase()}`, {params: {page: 1, limit: 100, token: formValues.external_token}}).then(res=>{
|
||||
if(res && res.data && Array.isArray(res.data)){
|
||||
setExternalRepoBranchList(res.data)
|
||||
setStep(1);
|
||||
setValues({
|
||||
...values,
|
||||
...formValues
|
||||
})
|
||||
}else{
|
||||
message.error(`获取${platform}平台仓库分支列表失败，请检查参数输入是否正确`)
|
||||
}
|
||||
}).catch((error)=>{})
|
||||
}
|
||||
})
|
||||
}}>下一步</Button>
|
||||
|
|
@ -226,19 +280,17 @@ function EditStore(props){
|
|||
{/* 第二步 */}
|
||||
{step === 1 && <div>
|
||||
<Icon type="info-circle" theme="filled" style={{color: '#466aff'}}/>
|
||||
<span className="color-grey-6 ml5">为了保证双向同步实时性，请您完成以下操作，以保证每个参与同步的仓库均已配置Webhook</span>
|
||||
<p className="mt15 mb15">1、登录{platform}账号</p>
|
||||
|
||||
2、复制以下url，配置为同步仓库Webhook接收请求的地址<br/>
|
||||
<span className="color-grey-6 ml5 mb15">为了保证双向同步实时性，请您完成以下操作，以保证每个参与同步的仓库均已配置Webhook</span>
|
||||
<p className="mt15">1、复制Webhook接受请求地址：</p>
|
||||
<Input
|
||||
id="webhook"
|
||||
className="mt10 mb15 copyWebhookInput"
|
||||
className="mt10 mb10 copyWebhookInput"
|
||||
value={`${window.location.origin}/api/v1/${owner}/${projectsId}/sync_repositories/sync?sync_direction=2&repo_type=SyncRepositories::${platform}`}
|
||||
readOnly
|
||||
addonAfter={<a onClick={inviteClick}>复制链接</a>}
|
||||
/>
|
||||
3、登录并前往{platform}仓库Webhook配置页，激活此Webhook，请务必勾选push触发事件（此webhook用于监听{platform}仓库代码变更）<br/>
|
||||
<Button type="primary" ghost className="mt10 mb15" onClick={()=>{
|
||||
2、前往{platform}登录并进入同步仓库WebHook页面进行配置：
|
||||
<Button type="primary" ghost className="mt10 mb10 ml10" onClick={()=>{
|
||||
const {type, external_repo_address} = values;
|
||||
if(external_repo_address){
|
||||
window.open(`${external_repo_address.replace(/.git$/, "")}${type === "Github" ? "/settings/hooks" : "/hooks"}`)
|
||||
|
|
@ -246,7 +298,13 @@ function EditStore(props){
|
|||
message.error("您暂未配置同步仓库地址")
|
||||
}
|
||||
}}>点击前往</Button><br/>
|
||||
4、完成配置
|
||||
<div className="pl15 pb10">
|
||||
① 添加webHook<br/>
|
||||
② 将步骤1地址填入页面中的URL处<br/>
|
||||
③ 确保已勾选Push事件<br/>
|
||||
④ 激活
|
||||
</div>
|
||||
3、完成配置
|
||||
<div className="mt30">
|
||||
<Button style={{width: '100px'}} onClick={()=>{setStep(0)}} className="mr30">上一步</Button>
|
||||
<Button type="primary" style={{width: '100px'}} onClick={()=>{setStep(2)}}>下一步</Button>
|
||||
|
|
@ -254,8 +312,8 @@ function EditStore(props){
|
|||
</div>}
|
||||
{/* 第三步 */}
|
||||
{step === 2 && <div>
|
||||
<div className="color-grey-6 mb15">请绑定同步分支</div>
|
||||
<Form.Item>
|
||||
<div className="color-grey-6 mb15">请绑定同步分支，建立单个分支的实时双向同步</div>
|
||||
<Form.Item hidden>
|
||||
{getFieldDecorator("sync_granularity",{
|
||||
rules:[],
|
||||
// initialValue: values.sync_granularity
|
||||
|
|
@ -274,34 +332,15 @@ function EditStore(props){
|
|||
</Radio.Group>
|
||||
)}
|
||||
</Form.Item>
|
||||
{branch === "2" && <Form.Item label={`${platform}分支`} {...formItemLayout}>
|
||||
{getFieldDecorator("external_branch_name",{
|
||||
rules:[{required:true,message:`请输入${platform}分支名称`}],
|
||||
initialValue: values.external_branch_name
|
||||
})(
|
||||
<Input placeholder={`请输入${platform}分支名称`} className="storeInput" maxLength={50}/>
|
||||
)}
|
||||
</Form.Item>}
|
||||
{branch === "2" && <Form.Item label="Gitlink分支" {...formItemLayout}>
|
||||
{getFieldDecorator("gitlink_branch_name",{
|
||||
rules:[{required:true,message:"请选择Gitlink仓库分支"}],
|
||||
initialValue: values.gitlink_branch_name
|
||||
})(
|
||||
<Select placeholder="请选择Gitlink仓库分支">
|
||||
{branchList && branchList.map(item=>{
|
||||
const {branch_id, name} = item;
|
||||
return <Select.Option value={name} key={branch_id}>{name}</Select.Option>
|
||||
})}
|
||||
</Select>
|
||||
)}
|
||||
</Form.Item>}
|
||||
{branch && <div style={{display: 'flex', alignItems: "center"}}>
|
||||
<Form.Item label="首次同步方向：" {...formItemLayout}>
|
||||
{getFieldDecorator("first_sync_direction",{
|
||||
rules:[{required:true,message:"请选择首次同步方向"}],
|
||||
initialValue: values.first_sync_direction
|
||||
})(
|
||||
<Select placeholder="请选择首次同步方向">
|
||||
<Select placeholder="请选择首次同步方向" onChange={()=>{
|
||||
resetFields(["external_branch_name", "gitlink_branch_name"]);
|
||||
}}>
|
||||
<Select.Option value="2">{platform}同步至GitLink</Select.Option>
|
||||
<Select.Option value="1">GitLink同步至{platform}</Select.Option>
|
||||
</Select>
|
||||
|
|
@ -309,6 +348,7 @@ function EditStore(props){
|
|||
</Form.Item>
|
||||
{synchronizeTips(platform)}
|
||||
</div>}
|
||||
{branch === "2" && first_sync_direction && branchForm(getFieldDecorator, setFieldsValue, getFieldsValue, values, first_sync_direction, first_sync_direction === "2" ? externalRepoBranchList : branchList, platform, formItemLayout)}
|
||||
<div className="mt30">
|
||||
<Button style={{width: '100px'}} className="mr30" onClick={()=>{
|
||||
saveStep3Info();
|
||||
|
|
@ -324,45 +364,6 @@ function EditStore(props){
|
|||
}}>确认绑定</Button>}
|
||||
</div>
|
||||
</div>}
|
||||
{/* <div className="storeTitle pb10 mb15"><img src={gitHub} alt="" className="storeLogo"/></div>
|
||||
<Form.Item label="Github同步仓库地址" className="storeFormItem">
|
||||
{getFieldDecorator("github_address",{
|
||||
rules:[]
|
||||
})(
|
||||
<Input placeholder="请输入Github目标版本库地址" className="storeInput"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Github同步仓库授权验证" className="storeFormItem">
|
||||
{getFieldDecorator("github_token",{
|
||||
rules:[]
|
||||
})(
|
||||
<Input addonBefore="token" placeholder="请输入Github的授权token" className="storeInput"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<div className="storeTitle pb10 mb15 pt20"><img src={gitee} alt="" className="storeLogo"/></div>
|
||||
<Form.Item label="Gitee同步仓库地址" className="storeFormItem">
|
||||
{getFieldDecorator("gitee_address",{
|
||||
rules:[]
|
||||
})(
|
||||
<Input placeholder="请输入Gitee目标版本库地址" className="storeInput"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item label="Gitee同步仓库授权验证" className="storeFormItem">
|
||||
{getFieldDecorator("gitee_token",{
|
||||
rules:[]
|
||||
})(
|
||||
<Input addonBefore="token" placeholder="请输入Gitee的授权token" className="storeInput"/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<div className="tipStoreBox">
|
||||
1、在开启仓库同步前，您需要绑定并授权目标同步仓库；<br/>
|
||||
2、完成仓库绑定后，需对仓库内的分支进行二次绑定。当已绑定的分支有代码提交、代码推送变更，将实时同步更新至其他仓库；<br/>
|
||||
3、目前仅提供Github与Gitee平台的仓库同步功能，每个平台支持同时同步一个仓库；
|
||||
</div>
|
||||
<Form.Item>
|
||||
<Button type="primary" style={{width: '112px', height: '36px'}} onClick={submit}>确认绑定</Button>
|
||||
<Button style={{width: '112px', height: '36px'}} className="ml40" onClick={()=>{history.goBack(-1)}}>取消</Button>
|
||||
</Form.Item> */}
|
||||
</Form>
|
||||
<Modal
|
||||
title="绑定同步分支"
|
||||
|
|
|
|||
|
|
@ -12,27 +12,24 @@ import AddTaskModal from './addTaskModal';
|
|||
import { confirmInfo1, confirmInfo2 } from "./editStore";
|
||||
import { platformLogo, platformLogoUnText } from "..";
|
||||
|
||||
export function unique(arr) {
|
||||
const data = new Map()
|
||||
return arr.filter((item) => !data.has(item.type) && data.set(item.type, 1))
|
||||
}
|
||||
|
||||
export const sync_status = (status) =>{
|
||||
return status === "failure" ? <Badge status="error" text="失败" className="deleteRecord"/> : status === "success" ? <Badge status="success" text="成功" className="success"/> : ""
|
||||
}
|
||||
|
||||
export const reposyncerHelpIcon = <a className="ml25 primaryColor font-15" target="_blank" href="https://help.gitlink.org.cn/%E7%AC%AC%E4%B8%89%E6%96%B9%E6%9C%8D%E5%8A%A1/%E8%B7%A8%E5%B9%B3%E5%8F%B0%E4%BB%A3%E7%A0%81%E5%90%8C%E6%AD%A5">
|
||||
<i className="iconfont icon-a-22ziliaoshouce-xianxing mr5 font-15"></i>使用手册
|
||||
</a>
|
||||
|
||||
function StoreList(props){
|
||||
const { storeDetail, form, reflushRepos} = props;
|
||||
const { getFieldDecorator, validateFields , setFieldsValue, setFields, getFieldsValue } = form;
|
||||
const {sync_repositories, sync_repositories_unique=[]} = storeDetail || {};
|
||||
const {sync_repositories, sync_repositories_unique=[], repositoriesBranch={}} = storeDetail || {};
|
||||
const { owner , projectsId } = props.match.params;
|
||||
const [visible, setVisible] = useState(false);
|
||||
// 新建分支同步
|
||||
const [visibleNew, setVisibleNew] = useState(false);
|
||||
// 仓库分支列表
|
||||
const [branchList, setBranchList] = useState();
|
||||
// 选择仓库类型
|
||||
const [platform, setPlatform] = useState("GitHub");
|
||||
const [current, setCurrent] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
|
|
@ -129,10 +126,9 @@ function StoreList(props){
|
|||
{platformLogoUnText(item.type, "21px")}{text}
|
||||
</span> },
|
||||
{ title: 'GitLink分支', dataIndex: 'gitlink_branch_name', className:"recordColumns"},
|
||||
{ title: '最后一次同步时间', dataIndex: 'sync_time', className:"primaryColor recordColumns"},
|
||||
{ title: '最后一次同步时间', dataIndex: 'sync_time', className:"recordColumns"},
|
||||
{ title: '最后一次同步状态', dataIndex: 'sync_status', className:"recordColumns", render: (text)=>sync_status(text)},
|
||||
{ title: '操作', dataIndex: 'enable', align: 'center', className:"primaryColor recordColumns", render: (text, item)=>{
|
||||
const branch = item[platform === 'GitHub' ? 'github_branch': 'gitee_branch']
|
||||
return <div>
|
||||
<Link to={`/${owner}/${projectsId}/service/reposyncer/record/${item.reposync_branch_ids}`} className="primaryColor">同步记录</Link>
|
||||
<Divider type="vertical" />
|
||||
|
|
@ -154,24 +150,18 @@ function StoreList(props){
|
|||
{/* 空数据 */}
|
||||
{sync_repositories && !sync_repositories.length && <Fragment>
|
||||
<div className="headBox font-16 pl15">跨平台仓库同步服务
|
||||
{/* {storeDetail !== null && <Tooltip title="跨平台仓库代码同步系统提供跨托管平台的项目协同开发同步功能。支持用户在任何一个托管平台上的代码提交、代码推送、合并请求等操作自动同步至其他托管平台。不仅增加每个开源项目与开发者的流量，也使不同平台的开源项目维护与更新变得方便与快捷" overlayStyle={{width: 400}}><span className="helpBox1 font-12 ml10">?</span></Tooltip>} */}
|
||||
{reposyncerHelpIcon}
|
||||
</div>
|
||||
<div className="nullStoreBox mt25">
|
||||
<img src={logo} alt="" className="loBox mt50"/>
|
||||
<p className="font-22 mt10">欢迎使用跨平台仓库代码同步服务</p>
|
||||
<div className="introBox font-15">跨平台仓库代码同步服务提供跨托管平台的项目协同开发同步功能。支持用户在任何一个托管平台上的代码提交、代码推送、合并请求等操作自动同步至其他托管平台。不仅增加每个开源项目与开发者的流量，也使不同平台的开源项目维护与更新变得方便与快捷</div>
|
||||
<div className="introBox font-15">跨平台仓库代码同步服务用于不同代码托管平台之间的仓库代码双向同步。用户将不同平台的仓库分支进行绑定，当任意仓库分支有push事件被webhook监听时，代码推送将实时自动同步至另一个仓库，以实现不同平台之间分支、提交信息的自动同步</div>
|
||||
<div className="borBox"></div>
|
||||
<Button type="primary" style={{width: '112px', height: '36px'}}><Link to={`/${owner}/${projectsId}/service/reposyncer/store/edit`}>开始体验</Link></Button>
|
||||
</div>
|
||||
</Fragment>}
|
||||
{/* 已绑定仓库信息 */}
|
||||
{sync_repositories && !!sync_repositories.length && <Fragment>
|
||||
{/* <Radio.Group defaultValue="GitHub" buttonStyle="solid" onChange={(e)=>{
|
||||
setPlatform(e.target.value);
|
||||
}}>
|
||||
<Radio.Button value="GitHub"><img src={platform === "GitHub" ? gitHub : gitHub1} alt="" style={{width: '70px'}}/></Radio.Button>
|
||||
<Radio.Button value="Gitee"><img src={platform === "Gitee" ? gitee : gitee1} alt="" style={{width: '70px'}}/></Radio.Button>
|
||||
</Radio.Group> */}
|
||||
<div className="headBox flexBetween pl20 mt20">
|
||||
<div>
|
||||
{sync_repositories_unique.map((item, index)=>{
|
||||
|
|
@ -183,12 +173,21 @@ function StoreList(props){
|
|||
{sync_repositories_unique[index+1] ? <Divider type="vertical" /> : ""}
|
||||
</Fragment>
|
||||
})}
|
||||
{reposyncerHelpIcon}
|
||||
</div>
|
||||
<div className="flexBetween">
|
||||
<Input.Search placeholder="搜索分支名称" allowClear onSearch={(value)=>{
|
||||
setBranchName(value);
|
||||
}}/>
|
||||
<Button type="primary" className="ml20 mr20" onClick={()=>{setVisibleNew(true);}}>添加同步分支</Button>
|
||||
<Button type="primary" className="ml20 mr20" onClick={()=>{
|
||||
// 如果只有一个第三方平台，判断分支列表是否有数据
|
||||
const platformByFirstRepo = sync_repositories_unique[0] && sync_repositories_unique[0].type.replace("SyncRepositories::", "")
|
||||
if(sync_repositories_unique.length === 1 && !repositoriesBranch[platformByFirstRepo]){
|
||||
message.error(`获取${platformByFirstRepo}平台仓库分支列表失败，请检查token是否有效`);
|
||||
return
|
||||
}
|
||||
setVisibleNew(true);
|
||||
}}>添加同步分支</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Table
|
||||
|
|
@ -300,7 +299,7 @@ function StoreList(props){
|
|||
)}
|
||||
</Form.Item>
|
||||
</Modal>
|
||||
<AddTaskModal owner={owner} projectsId={projectsId} visible={visibleNew} setVisible={setVisibleNew} branchList={branchList} sync_repositories_unique={sync_repositories_unique} reload={getRecordList}/>
|
||||
<AddTaskModal owner={owner} projectsId={projectsId} visible={visibleNew} setVisible={setVisibleNew} branchList={branchList} sync_repositories_unique={sync_repositories_unique} reload={getRecordList} repositoriesBranch={repositoriesBranch}/>
|
||||
</div>
|
||||
}
|
||||
export default Form.create()(StoreList);;
|
||||
|
|
@ -61,11 +61,29 @@ function Reposyncer(propsF){
|
|||
// 获取仓库同步详情
|
||||
axios.get(`/v1/${owner}/${projectsId}/sync_repositories.json`).then(res=>{
|
||||
if(res && res.status === 200){
|
||||
setStoreDetail({
|
||||
...res.data,
|
||||
// 根据仓库类型去重
|
||||
sync_repositories_unique: unique(res.data.sync_repositories || [])
|
||||
});
|
||||
const repoList = unique(res.data.sync_repositories || []);
|
||||
// 获取已绑定第三方平台的分支列表，添加同步分支弹框使用
|
||||
const repositoriesBranch = {}
|
||||
const promises = repoList.map(item=>{
|
||||
const {external_repo_address, external_token, type} = item;
|
||||
const platform = type.replace("SyncRepositories::", "").toLowerCase()
|
||||
const address = external_repo_address.replace(".git", "").replace(`https://${platform}.com/`, "")
|
||||
// 获取github/gitee仓库的分支列表
|
||||
if(!external_token) return
|
||||
axios.get(`/v1/${address}/branches/${platform}`, { params: { page: 1, limit: 100, token: external_token } }).then(response=>{
|
||||
if (response && response.data && Array.isArray(response.data)) {
|
||||
repositoriesBranch[type.replace("SyncRepositories::", "")] = response.data;
|
||||
}
|
||||
})
|
||||
})
|
||||
Promise.all(promises).then(() => {
|
||||
setStoreDetail({
|
||||
...res.data,
|
||||
// 根据仓库类型去重
|
||||
sync_repositories_unique: repoList,
|
||||
repositoriesBranch
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},[reload])
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import Login from "./Login";
|
||||
import Register from "./Register";
|
||||
import ResetPassword from "./ResetPassword";
|
||||
|
|
@ -9,9 +9,24 @@ import ball from './img/ball.png';
|
|||
import img1 from './img/img1.png';
|
||||
import img2 from './img/img2.png';
|
||||
import '../loginRegister/LoginRegisterPage.scss';
|
||||
import { isPhone } from 'educoder';
|
||||
|
||||
function LoginRegisterPage(props){
|
||||
const {mygetHelmetapi} = props;
|
||||
|
||||
useEffect(()=>{
|
||||
let initialContent = undefined;
|
||||
if(isPhone()){
|
||||
initialContent = document.querySelector('meta[name="viewport"]').getAttribute('content');
|
||||
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0');
|
||||
}
|
||||
return()=>{
|
||||
if(isPhone()){
|
||||
document.querySelector('meta[name="viewport"]').setAttribute('content', initialContent);
|
||||
}
|
||||
}
|
||||
},[])
|
||||
|
||||
return(
|
||||
<div className="loginRegister">
|
||||
<div className="login_register_left">
|
||||
|
|
|
|||
Loading…
Reference in New Issue