Ready to reuse the Form.Item.

src/pages/preference/widget/PreviewConfigPanel.tsx

@@ -51,7 +51,11 @@ export default class PreviewConfigPanel extends TankComponent <IProps, IState> {
       <div className="widget-preview-config-panel">
 
         {previewConfig.previewEngines.map((previewEngine: PreviewEngine, index: number) => {
-          return <PreviewEngineCell key={index} previewEngine={previewEngine}/>
+          return <PreviewEngineCell key={index} previewEngine={previewEngine} index={index} onDelete={() => {
+            console.log("删除index=", index)
+            previewConfig.previewEngines.splice(index, 1)
+            this.updateUI()
+          }}/>
         })}
 
         <Button type="dashed" block={true} icon={<PlusOutlined/>} onClick={this.addEngine.bind(this)}>

src/pages/preference/widget/PreviewEngineCell.less

@@ -1,7 +1,31 @@
 
 .widget-preview-engine-cell {
 
+  margin-bottom: 15px;
+  border: 1px solid #eee;
+  border-radius: 4px;
 
+  .engine-title {
+    border-bottom: 1px solid #eeeeee;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+
+  }
+
+  .engine-content {
+    padding: 10px;
+
+    .castle-widget-info-cell {
+
+      .info-cell-name {
+        color: rgba(0, 0, 0, 0.85);
+        font-size: 14px;
+        font-weight: normal;
+      }
+    }
+
+  }
 
 
 }

src/pages/preference/widget/PreviewEngineCell.tsx

@@ -2,10 +2,15 @@ import React from 'react';
 import "./PreviewEngineCell.less"
 import TankComponent from "../../../common/component/TankComponent";
 import PreviewEngine from "../../../common/model/preference/model/PreviewEngine";
+import {DeleteOutlined} from '@ant-design/icons';
+import {Input, Form} from "antd";
+import InfoCell from "../../widget/InfoCell";
 
 interface IProps {
 
   previewEngine: PreviewEngine
+  index: number
+  onDelete: () => void
 
 }
 
@@ -24,17 +29,42 @@ export default class PreviewEngineCell extends TankComponent <IProps, IState> {
 
   }
 
+
   render() {
 
     let that = this
     let previewEngine: PreviewEngine = this.props.previewEngine
 
     return (
-
       <div className="widget-preview-engine-cell">
+        <div className="engine-title">
+          <span>{this.props.index + 1}号预览引擎</span>
+          <span>
+            <DeleteOutlined className="btn-action text-danger" onClick={() => {
+              this.props.onDelete()
+            }}/>
+          </span>
+        </div>
+        <div className="engine-content">
 
-        URL: {previewEngine.url}
-        extension: {previewEngine.extensions}
+          <Form.Item label="Warning" hasFeedback validateStatus="warning">
+            <Input.Password placeholder="with input password" />
+          </Form.Item>
+
+          <InfoCell name={"URL"} firstSpan={4}>
+            <Input value={previewEngine.url} onChange={(e) => {
+              previewEngine.url = e.target.value
+              this.updateUI()
+            }}/>
+          </InfoCell>
+          <InfoCell name={"后缀"} firstSpan={4}>
+            <Input value={previewEngine.extensions} onChange={(e) => {
+              previewEngine.extensions = e.target.value
+              this.updateUI()
+            }}/>
+          </InfoCell>
+
+        </div>
 
       </div>