From 60f54bfc3c4c1ff1c31d6ae73703c1209d58e3a1 Mon Sep 17 00:00:00 2001
From: Erindcl <zhifei@dtstack.com>
Date: Wed, 12 Aug 2020 19:46:28 +0800
Subject: [PATCH] feat(dark): form basic

---
 components/form/demo/basic.md      | 101 +++++++++++++++++++++++++++++
 components/form/index.zh-CN.md     |  20 ++++++
 components/select/demo/light.md    |   2 +-
 docs/react/change-log.zh-CN.md     |  11 ++++
 theme/dt-theme/dark/form.less      |  21 ++++++
 theme/dt-theme/dark/resetDark.less |   2 +-
 theme/static/common.less           |   1 +
 7 files changed, 156 insertions(+), 2 deletions(-)
 create mode 100755 components/form/demo/basic.md
 create mode 100755 components/form/index.zh-CN.md

diff --git a/components/form/demo/basic.md b/components/form/demo/basic.md
new file mode 100755
index 00000000..2d7ab682
--- /dev/null
+++ b/components/form/demo/basic.md
@@ -0,0 +1,101 @@
+---
+order: 0
+title:
+  zh-CN: 基本使用
+  en-US: Basic usage
+---
+
+## zh-CN
+
+基本使用。
+
+## en-US
+
+Basic usage example.
+
+```jsx
+import { Form, Icon, Input, Button, Checkbox, InputNumber, Radio, Switch } from 'antd';
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 3 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 10 },
+  },
+};
+class NormalLoginForm extends React.Component {
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+      }
+    });
+  };
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
+        <Form.Item label={'用户名'}>
+          {getFieldDecorator('username', {
+            rules: [{ required: true, message: 'It is required!' }],
+          })(
+            <Input placeholder="Username"/>
+          )}
+        </Form.Item>
+        <Form.Item label={'密码'}>
+          {getFieldDecorator('password', {
+            rules: [{ required: true, message: 'It is required!' }],
+          })(
+            <Input type="password" placeholder="Password"/>
+          )}
+        </Form.Item>
+        <Form.Item label={'次数限制'}>
+          {getFieldDecorator('count', {
+            rules: [{ required: false, message: 'It is required!' }],
+          })(
+            <InputNumber min={1} style={{ width: '100%' }} max={10} />
+          )}
+        </Form.Item>
+        <Form.Item label={'告警方式'}>
+          {getFieldDecorator('way', {
+            rules: [{ required: false, message: 'It is required!' }],
+          })(
+            <Checkbox.Group options={[{ label: '邮件', value: '1' }, { label: '短信', value: '2' }]} />
+          )}
+        </Form.Item>
+        <Form.Item label={'存储类型'}>
+          {getFieldDecorator('type', {
+            rules: [{ required: false, message: 'It is required!' }],
+          })(
+            <Radio.Group>
+              <Radio value={1}>orc</Radio>
+              <Radio value={2}>text</Radio>
+              <Radio value={3}>md</Radio>
+            </Radio.Group>
+          )}
+        </Form.Item>
+        <Form.Item label={'开关'}>
+          {getFieldDecorator('switch', {
+            rules: [{ required: false, message: 'It is required!' }],
+          })(
+            <Switch />
+          )}
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit">
+            提交表单
+          </Button>
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);
+
+ReactDOM.render(<WrappedNormalLoginForm />, mountNode);
+```
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
new file mode 100755
index 00000000..5495d50e
--- /dev/null
+++ b/components/form/index.zh-CN.md
@@ -0,0 +1,20 @@
+---
+category: Components
+subtitle: 表单
+type: 数据录入
+title: Form
+cols: 1
+---
+
+具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
+
+## 设计规则
+
+纵向相邻表单之间的间隔为 20 px
+
+## API
+
+|类名  |说明  |使用示例  |
+|---------|---------|---------|
+|.dt-form-shadow-bg  | 灰色背景,表单样式设置   | 灰色背景(仅默认主题下使用)   |
+|.dt-form-light-bg  | 浅色背景上，显示深色控件   | 浅色背景(仅暗黑主题下使用)   |
diff --git a/components/select/demo/light.md b/components/select/demo/light.md
index 63c1cb8d..a6ff7529 100755
--- a/components/select/demo/light.md
+++ b/components/select/demo/light.md
@@ -19,7 +19,7 @@ const { Option } = Select;
 
 ReactDOM.render(
   <div className="demo-select-light">
-    <Select defaultValue="lucy" dropdownClassName="dt-form-light-bg" className="dt-form-light-bg" style={{ width: 200 }}>
+    <Select defaultValue="lucy" dropdownClassName="dt-form-light-bg" className="dt-form-light-bg" style={{ width: 200, marginRight: 20 }}>
       <Option value="jack">Jack</Option>
       <Option value="lucy">Lucy</Option>
       <Option value="Yiminghe">yiminghe</Option>
diff --git a/docs/react/change-log.zh-CN.md b/docs/react/change-log.zh-CN.md
index 4977cff2..c680211b 100755
--- a/docs/react/change-log.zh-CN.md
+++ b/docs/react/change-log.zh-CN.md
@@ -5,6 +5,17 @@ toc: false
 timeline: true
 ---
 
+## [1.1.0](http://gitlab.prod.dtstack.cn/dt-insight-front/infrastructure/ant-design-dtinsight-theme/tree/v1.1.0) (020-07-31)
+
+### Features
+
+* (待补充)
+
+### Fix
+
+* 更新 readme 线上地址
+* 修复 layout 侧边栏导航图标不对齐问题
+
 ## [1.0.9](http://gitlab.prod.dtstack.cn/dt-insight-front/infrastructure/ant-design-dtinsight-theme/tree/v1.0.9) (020-07-31)
 
 ### Fix
diff --git a/theme/dt-theme/dark/form.less b/theme/dt-theme/dark/form.less
index 95d596a3..658794b9 100644
--- a/theme/dt-theme/dark/form.less
+++ b/theme/dt-theme/dark/form.less
@@ -1,5 +1,9 @@
 @import '../const.less';
 
+// form 
+.ant-form-item-label > label {
+    color: @whiteBF;
+}
 // input
 .ant-input {
     border-radius: 4px;
@@ -31,6 +35,23 @@
 .ant-select-dropdown {
     box-shadow:0px 2px 8px 0px rgba(6,7,10,1);
 }
+// checkbox
+.ant-checkbox-inner {
+    background-color: #11121C;
+    border-color: #363B59;
+}
+.ant-checkbox + span {
+    color: @whiteBF;
+}
+// radio
+.ant-radio-inner {
+    background-color: #11121C;
+    border-color: #363B59;
+}
+// switch
+.ant-switch-loading-icon, .ant-switch::after {
+    background-color: #ffffff;
+}
 
 // 浅色背景中 显示深色控件
 .dt-form-light-bg {
diff --git a/theme/dt-theme/dark/resetDark.less b/theme/dt-theme/dark/resetDark.less
index eda00814..e2e529f5 100644
--- a/theme/dt-theme/dark/resetDark.less
+++ b/theme/dt-theme/dark/resetDark.less
@@ -493,4 +493,4 @@
 // select
 @select-background: #1D1F2E;
 @select-item-selected-bg: #292D42;
-@select-item-selected-font-weight: normal;
+@select-item-selected-font-weight: normal;
\ No newline at end of file
diff --git a/theme/static/common.less b/theme/static/common.less
index 43e31297..30cf9da1 100755
--- a/theme/static/common.less
+++ b/theme/static/common.less
@@ -178,6 +178,7 @@ a {
 .demo-select-size {
   .ant-select {
     margin-bottom: 20px;
+    margin-right: 20px;
     width: 200px;
   }
 }