forgeplus-react/src/forge/SecuritySetting/website/createSite.jsx

import React, { useState, useEffect, Fragment } from "react";
import { Button, message, Form, Input, Select } 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";
const { TextArea } = Input;

function CreateSite(props) {
  const { current_user, history, form } = 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);

  useEffect(() => {
    document.title = "创建站点";
  }, []);

  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) {
        axios.post(`/projects/page_migrate.json`,{
          ...values,
          clone_addr: theme && theme.clone_url,
          theme: theme && theme.name,
          user_id: current_user.user_id
        }).then(res=>{
          if(res && res.status === 200){
            message.success("新建成功");
            history.push(`/settings/mysite`);
          }
        })
      }
    });
  }

  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", {
            rules: [{ required: true, message: "请输入站点标识" },
            {pattern: /^[a-zA-Z0-9]{2,100}$/, message: '长度2-100，只能包含数字和字母'}],
          })(
            <Input
              onChange={(e) => {
                setTag(e.target.value);
              }}
              placeholder="请输入站点标识"
            />
          )}
          <span style={{wordBreak: 'break-all'}}>
            http://{current_user.login}.kingchan.cn/{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>
          )}
        </Form.Item>
        <Form.Item name="主题选择" label="主题选择">
          <AlignTop>
            {themes && themes.map(item=>{
              const {image, name, clone_url} = item;
              return <div className="mr20 themeBox" onClick={()=>{setTheme(item)}}>
                <i className={`iconfont icon-wancheng ${theme && theme.clone_url === clone_url ? 'active' : ''}`}></i>
                <img src={getImageUrl(image)} alt="" width="125px"/>
                <p>{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: [{ required: true, message: "请输入项目标识" },
              {pattern: /^[a-zA-Z0-9][a-zA-Z0-9_.-]{2,100}[a-zA-Z0-9]$/, message: "长度2-100，只能包含数字、字母、下划线、中划线、英文句号，必须以数字和字母开头，不能以下划线/中划线/英文句号开头和结尾"}],
            })(
              <Input placeholder="请输入项目标识"/>
            )}
          </Form.Item>
        </AlignCenter>
        <Form.Item
          name="项目名称"
          label="项目名称"
        >
          {getFieldDecorator("name", {
            rules: [{ required: true, message: "请输入项目名称" },
            {type: 'string', max: 50, min: 1, message: "长度1-50"}],
          })(
            <Input placeholder="请输入项目名称"/>
          )}
        </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>
    </Fragment>
  );
}
export default Form.create()(CreateSite);