forked from Gitlink/forgeplus-react
246 lines
9.6 KiB
JavaScript
246 lines
9.6 KiB
JavaScript
import React, { useState, useEffect, Fragment } from "react";
|
||
import { Button, message, Form, Input, Select, Modal, Checkbox } from "antd";
|
||
import "./index.scss";
|
||
import "../../users/Material/Index.scss";
|
||
import axios from "axios";
|
||
import { AlignCenter, AlignTop } from "../../Component/layout";
|
||
import { Link } from "react-router-dom";
|
||
import { getImageUrl } from "../../../common/UrlTool";
|
||
import { ImageLayerOfCommentHOC } from "../../../modules/page/layers/ImageLayerOfCommentHOC";
|
||
import { withRouter } from "react-router";
|
||
const { TextArea } = Input;
|
||
|
||
function CreateSite(props) {
|
||
const { current_user, history, form, mygetHelmetapi:{site_page_deploy_domain} } = props;
|
||
const { getFieldDecorator, validateFieldsAndScroll, setFieldsValue } = form;
|
||
const [tag, setTag] = useState(undefined);
|
||
const [language, setLanguage] = useState(undefined);
|
||
const [themes, setThemes] = useState([]);
|
||
const [theme, setTheme] = useState(undefined);
|
||
const [modalVisibal, setmodalVisibal] = useState(false);
|
||
const [accept, setAccept] = useState(false);
|
||
const [formValues, setFormValues] = useState({});
|
||
|
||
useEffect(() => {
|
||
document.title = "创建站点";
|
||
setFieldsValue({
|
||
identifier: `http://${current_user.login}.${site_page_deploy_domain || 'gitlink.net'}`,
|
||
repository_name: `${current_user.login}.${site_page_deploy_domain || 'gitlink.net'}`,
|
||
name: `${current_user.login}.${site_page_deploy_domain || 'gitlink.net'}`
|
||
})
|
||
}, []);
|
||
|
||
useEffect(()=>{
|
||
axios.get(`/site_pages/themes.json`, {params: {language_frame: language}}).then(res=>{
|
||
if(res && res.status === 200){
|
||
setThemes(res.data.themes);
|
||
setTheme(res.data.themes[0]);
|
||
}
|
||
})
|
||
}, [language])
|
||
|
||
// useEffect(()=>{
|
||
// if(theme && theme.clone_url && theme && theme.clone_url.indexOf("/") > -1){
|
||
// let arr = theme && theme.clone_url.split("/");
|
||
// let first = arr[arr.length-1];
|
||
// if(first.indexOf(".") > -1){
|
||
// let second = first.split('.')[0];
|
||
// if(!second)return;
|
||
// setFieldsValue({
|
||
// repository_name:second,
|
||
// name:second
|
||
// })
|
||
// }else{
|
||
// setFieldsValue({
|
||
// repository_name:first
|
||
// })
|
||
// }
|
||
// }
|
||
// }, [theme])
|
||
|
||
function submit(e) {
|
||
e.preventDefault();
|
||
validateFieldsAndScroll((err, values) => {
|
||
if (!err) {
|
||
setmodalVisibal(true)
|
||
setFormValues(values)
|
||
}
|
||
});
|
||
}
|
||
|
||
function confirmSubmit() {
|
||
axios.post(`/projects/page_migrate.json`,{
|
||
...formValues,
|
||
site_name: formValues.identifier,
|
||
clone_addr: theme && theme.clone_url,
|
||
theme: theme && theme.name,
|
||
user_id: current_user.user_id,
|
||
identifier: formValues.identifier.split("http://")[1]
|
||
}).then(res=>{
|
||
onCancel()
|
||
if(res && res.status === 200){
|
||
message.success("新建成功");
|
||
history.push(`/settings/mysite`);
|
||
}
|
||
})
|
||
}
|
||
function onCancel() {
|
||
setmodalVisibal(false);
|
||
setAccept(false);
|
||
setFormValues({});
|
||
}
|
||
|
||
return (
|
||
<Fragment>
|
||
<div className="mySites_head mb30"><Link to={`/settings/mysite`} className="font-16">我的站点 / </Link><span>新建站点</span></div>
|
||
<Form
|
||
form={form}
|
||
name="register"
|
||
className="createSiteForm"
|
||
scrollToFirstError
|
||
layout="horizontal"
|
||
labelCol={{ span: 3 }}
|
||
wrapperCol={{ span: 16 }}
|
||
onSubmit={submit}
|
||
>
|
||
<div className="formTitle font-16 mb20 ml20">站点配置</div>
|
||
{/* <Form.Item name="站点名称" label="站点名称">
|
||
{getFieldDecorator("site_name", {
|
||
rules: [{ required: true, message: "请输入站点名称" },
|
||
{type: 'string', max: 50, min: 1, message: "长度1-50"}],
|
||
})(<Input placeholder="请输入站点名称" />)}
|
||
</Form.Item> */}
|
||
<Form.Item
|
||
name="站点标识"
|
||
label="站点标识"
|
||
className="Create-Form-biaoshi"
|
||
>
|
||
{getFieldDecorator("identifier")(
|
||
<Input
|
||
onChange={(e) => {
|
||
setTag(e.target.value);
|
||
}}
|
||
placeholder="请输入站点标识"
|
||
disabled
|
||
/>
|
||
)}
|
||
{/* <span style={{wordBreak: 'break-all'}}>
|
||
http://{current_user.login}.{site_page_deploy_domain}/{tag}
|
||
</span> */}
|
||
</Form.Item>
|
||
<Form.Item name="建站工具" label="建站工具">
|
||
{getFieldDecorator("language_frame", {initialValue: 0})(
|
||
<Select style={{ width: 100 }} onChange={(value)=>{setLanguage(value)}}>
|
||
<Select.Option value={0}>hugo</Select.Option>
|
||
<Select.Option value={1}>jekyll</Select.Option>
|
||
<Select.Option value={2}>hexo</Select.Option>
|
||
</Select>
|
||
)}
|
||
<a className="ml20" href="https://help.gitlink.org.cn/%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5%E5%BB%BA%E7%AB%99/%E5%BB%BA%E7%AB%99%E5%B7%A5%E5%85%B7" target="_blank">
|
||
<i className="iconfont icon-xiaowenhao font-15 mr5"></i>
|
||
建站工具介绍
|
||
</a>
|
||
</Form.Item>
|
||
<Form.Item name="主题选择" label="主题选择" wrapperCol={{span: 20}}>
|
||
<AlignTop style={{flexWrap: 'wrap'}}>
|
||
{themes && themes.map(item=>{
|
||
const {image, name, clone_url} = item;
|
||
return <div className="mr20 themeBox imageLayerParent" onClick={()=>{setTheme(item)}}>
|
||
<i className={`iconfont icon-wancheng ${theme && theme.clone_url === clone_url ? 'active' : ''}`}></i>
|
||
<img src={getImageUrl(image)} alt="" width="125px" height="85px" className="imageTarget"/>
|
||
<p className="task-hide" style={{maxWidth: '120px'}}>{name}</p>
|
||
</div>
|
||
})}
|
||
</AlignTop>
|
||
</Form.Item>
|
||
<div className="formTitle font-16 mb20 ml20">项目配置</div>
|
||
<div className="font-15 mb20 ml40">我们会为您生成一个项目，来管理您的个人主页，请配置您的项目信息</div>
|
||
<AlignCenter style={{marginLeft: '58px'}}>
|
||
<Form.Item name="拥有者" label="拥有者" style={{width: '260px'}} labelCol={{span: 6}}>
|
||
<Input
|
||
placeholder={current_user.username}
|
||
disabled
|
||
/>
|
||
</Form.Item>
|
||
{/* <span className="mb20 font-18">/</span> 0.87 */}
|
||
<Form.Item name="项目标识" label="项目标识" style={{flex: '0.83'}} labelCol={{span: 4}}>
|
||
{getFieldDecorator("repository_name", {
|
||
rules: [
|
||
{pattern: /^[a-zA-Z0-9][a-zA-Z0-9_.-]{2,100}[a-zA-Z0-9]$/, message: "长度2-100，只能包含数字、字母、下划线、中划线、英文句号，必须以数字和字母开头，不能以下划线/中划线/英文句号开头和结尾"}],
|
||
})(
|
||
<Input placeholder="请输入项目标识" disabled/>
|
||
)}
|
||
</Form.Item>
|
||
</AlignCenter>
|
||
<Form.Item
|
||
name="项目名称"
|
||
label="项目名称"
|
||
>
|
||
{getFieldDecorator("name", {
|
||
rules: [{type: 'string', max: 50, min: 1, message: "长度1-50"}],
|
||
})(
|
||
<Input placeholder="请输入项目名称" disabled/>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item name="项目简介" label="项目简介">
|
||
{getFieldDecorator("description", {
|
||
rules: [{type: 'string', max: 200, message: "长度200"}]
|
||
})(
|
||
<TextArea rows={4} />
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item style={{marginLeft: '123px'}} className="mt40">
|
||
<Button type="primary" htmlType="submit" className="mr20">
|
||
创建站点
|
||
</Button>
|
||
<Button
|
||
onClick={() => {
|
||
history.push("/settings/mysite");
|
||
}}
|
||
>
|
||
取消
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
<Modal
|
||
visible={modalVisibal}
|
||
onCancel={onCancel}
|
||
footer={null}
|
||
closable={false}
|
||
bodyStyle={{ padding: 0 }}
|
||
width={'650px'}
|
||
>
|
||
<div className="m-header">
|
||
个人建站声明
|
||
<i className="iconfont icon-shanchuicon2 mr5 font-14" onClick={onCancel}></i>
|
||
</div>
|
||
<div className="m-content">
|
||
<p>个人建站服务仅供Jekyll、Hugo、Hexo静态网站效果演示用途，请勿用于违规内容，包括但不仅限于：</p>
|
||
<ul>
|
||
<ol>发布诱导分享/诱导关注/诱导下载/诱导跳转内容</ol>
|
||
<ol>发布欺诈/谣言/骚扰信息/广告信息/垃圾信息/特殊识别码、口令类信息</ol>
|
||
<ol>发布低俗内容/“宗教性捐献”及相关信息</ol>
|
||
<ol>发布侵害他人权利/违法经营及可疑服务类内容</ol>
|
||
<ol>发布其它违反国家法律法规的内容</ol>
|
||
</ul>
|
||
<p>平台保留使用规则最终解释权，如发现上述违规行为，平台将视违规情况严重程度予以建站服务封禁以至账号永久封禁惩罚。</p>
|
||
<Checkbox checked={accept} onChange={(e) => { setAccept(e.target.checked) }}>我已阅读并接受 《个人建站声明条款》</Checkbox>
|
||
<div className="divider"></div>
|
||
</div>
|
||
<div className="m-footer">
|
||
<Button onClick={onCancel}>
|
||
取消
|
||
</Button>
|
||
<Button type="primary" className="mr20" disabled={ !accept } onClick={confirmSubmit}>
|
||
确认
|
||
</Button>
|
||
</div>
|
||
</Modal>
|
||
</Fragment>
|
||
);
|
||
}
|
||
export default withRouter(ImageLayerOfCommentHOC({
|
||
imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
|
||
parentSelector: ".newContainer",
|
||
})(Form.create()(CreateSite)));
|