diff --git a/web/config/router.config.js b/web/config/router.config.js
index f648edbf..b82b0695 100644
--- a/web/config/router.config.js
+++ b/web/config/router.config.js
@@ -132,25 +132,115 @@ export default [
         icon: 'search',
         routes: [
           {
-            path: '/search/template',
-            name: 'template',
-            component: './SearchManage/SearchTemplate',
+              path: '/search/template',
+              name: 'template',
+              component: './SearchManage/template/Template',
+              routes: [
+                  {
+                      path: '/search/template',
+                      redirect: '/search/template/summary',
+                  },
+                  {
+                      path: '/search/template/summary',
+                      component: './SearchManage/template/Summary',
+                  },
+                  {
+                      path: '/search/template/template',
+                      component: './SearchManage/template/SearchTemplate',
+                  },
+                  {
+                      path: '/search/template/param',
+                      component: './SearchManage/template/Param',
+                  },
+                  {
+                      path: '/search/template/history',
+                      component: './SearchManage/template/History',
+                  },
+              ]
           }, {
             path: '/search/alias',
             name: 'alias',
-            component: './SearchManage/AliasManage',
+            component: './SearchManage/alias/Alias',
+                routes: [
+                    {
+                        path: '/search/alias',
+                        redirect: '/search/alias/index',
+                    },
+                    {
+                        path: '/search/alias/index',
+                        component: './SearchManage/alias/AliasManage',
+                    },
+                    {
+                        path: '/search/alias/param',
+                        component: './SearchManage/alias/Param',
+                    },
+                    {
+                        path: '/search/alias/rule',
+                        component: './SearchManage/alias/Rule',
+                    }
+                ]
           }, {
             path: '/search/dict',
             name: 'dict',
-            component: './SearchManage/DictManage',
+            component: './SearchManage/dict/Dict',
+                routes: [
+                    {
+                        path: '/search/dict',
+                        redirect: '/search/dict/professional',
+                    },
+                    {
+                        path: '/search/dict/professional',
+                        component: './SearchManage/dict/Professional',
+                    },
+                    {
+                        path: '/search/dict/common',
+                        component: './SearchManage/dict/Common',
+                    }
+                ]
           }, {
             path: '/search/analyzer',
             name: 'analyzer',
-            component: './SearchManage/AnalyzerManage',
+            component: './SearchManage/analyzer/Analyzer',
+                routes: [
+                    {
+                        path: '/search/analyzer',
+                        redirect: '/search/analyzer/manage',
+                    },
+                    {
+                        path: '/search/analyzer/manage',
+                        component: './SearchManage/analyzer/Manage',
+                    },
+                    {
+                        path: '/search/analyzer/test',
+                        component: './SearchManage/analyzer/AnalyzerTest',
+                    }
+                ]
           }, {
             path: '/search/nlp',
             name: 'nlp',
-            component: './SearchManage/NLPManage',
+            component: './SearchManage/nlp/NLP',
+            routes: [
+                {
+                    path: '/search/nlp',
+                    redirect: '/search/nlp/query',
+                },
+                {
+                    path: '/search/nlp/query',
+                    component: './SearchManage/nlp/Query',
+                },
+                {
+                    path: '/search/nlp/intention',
+                    component: './SearchManage/nlp/Intention',
+                },
+                {
+                    path: '/search/nlp/knowledge',
+                    component: './SearchManage/nlp/Knowledge',
+                },
+                {
+                    path: '/search/nlp/text',
+                    component: './SearchManage/nlp/Text',
+                }
+            ]
           },
         ]
       },
diff --git a/web/src/pages/SearchManage/AnalyzerManage.js b/web/src/pages/SearchManage/AnalyzerManage.js
deleted file mode 100644
index 166a0e90..00000000
--- a/web/src/pages/SearchManage/AnalyzerManage.js
+++ /dev/null
@@ -1,675 +0,0 @@
-import React, { PureComponent, Fragment } from 'react';
-import { connect } from 'dva';
-import moment from 'moment';
-import {
-  Row,
-  Col,
-  Card,
-  Form,
-  Input,
-  Select,
-  Icon,
-  Button,
-  Dropdown,
-  Menu,
-  InputNumber,
-  DatePicker,
-  Modal,
-  message,
-  Badge,
-  Divider,
-  Steps,
-  Radio,
-} from 'antd';
-import StandardTable from '@/components/StandardTable';
-import PageHeaderWrapper from '@/components/PageHeaderWrapper';
-
-import styles from './AnalyzerManage.less';
-
-const FormItem = Form.Item;
-const { Step } = Steps;
-const { TextArea } = Input;
-const { Option } = Select;
-const RadioGroup = Radio.Group;
-const getValue = obj =>
-  Object.keys(obj)
-    .map(key => obj[key])
-    .join(',');
-const statusMap = ['default', 'processing', 'success', 'error'];
-const status = ['关闭', '运行中', '已上线', '异常'];
-
-const CreateForm = Form.create()(props => {
-  const { modalVisible, form, handleAdd, handleModalVisible } = props;
-  const okHandle = () => {
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-      form.resetFields();
-      handleAdd(fieldsValue);
-    });
-  };
-  return (
-    <Modal
-      destroyOnClose
-      title="新建规则"
-      visible={modalVisible}
-      onOk={okHandle}
-      onCancel={() => handleModalVisible()}
-    >
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
-        {form.getFieldDecorator('desc', {
-          rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
-        })(<Input placeholder="请输入" />)}
-      </FormItem>
-    </Modal>
-  );
-});
-
-@Form.create()
-class UpdateForm extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      formVals: {
-        name: props.values.name,
-        desc: props.values.desc,
-        key: props.values.key,
-        target: '0',
-        template: '0',
-        type: '1',
-        time: '',
-        frequency: 'month',
-      },
-      currentStep: 0,
-    };
-
-    this.formLayout = {
-      labelCol: { span: 7 },
-      wrapperCol: { span: 13 },
-    };
-  }
-
-  handleNext = currentStep => {
-    const { form, handleUpdate } = this.props;
-    const { formVals: oldValue } = this.state;
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-      const formVals = { ...oldValue, ...fieldsValue };
-      this.setState(
-        {
-          formVals,
-        },
-        () => {
-          if (currentStep < 2) {
-            this.forward();
-          } else {
-            handleUpdate(formVals);
-          }
-        }
-      );
-    });
-  };
-
-  backward = () => {
-    const { currentStep } = this.state;
-    this.setState({
-      currentStep: currentStep - 1,
-    });
-  };
-
-  forward = () => {
-    const { currentStep } = this.state;
-    this.setState({
-      currentStep: currentStep + 1,
-    });
-  };
-
-  renderContent = (currentStep, formVals) => {
-    const { form } = this.props;
-    if (currentStep === 1) {
-      return [
-        <FormItem key="target" {...this.formLayout} label="监控对象">
-          {form.getFieldDecorator('target', {
-            initialValue: formVals.target,
-          })(
-            <Select style={{ width: '100%' }}>
-              <Option value="0">表一</Option>
-              <Option value="1">表二</Option>
-            </Select>
-          )}
-        </FormItem>,
-        <FormItem key="template" {...this.formLayout} label="规则模板">
-          {form.getFieldDecorator('template', {
-            initialValue: formVals.template,
-          })(
-            <Select style={{ width: '100%' }}>
-              <Option value="0">规则模板一</Option>
-              <Option value="1">规则模板二</Option>
-            </Select>
-          )}
-        </FormItem>,
-        <FormItem key="type" {...this.formLayout} label="规则类型">
-          {form.getFieldDecorator('type', {
-            initialValue: formVals.type,
-          })(
-            <RadioGroup>
-              <Radio value="0">强</Radio>
-              <Radio value="1">弱</Radio>
-            </RadioGroup>
-          )}
-        </FormItem>,
-      ];
-    }
-    if (currentStep === 2) {
-      return [
-        <FormItem key="time" {...this.formLayout} label="开始时间">
-          {form.getFieldDecorator('time', {
-            rules: [{ required: true, message: '请选择开始时间！' }],
-          })(
-            <DatePicker
-              style={{ width: '100%' }}
-              showTime
-              format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间"
-            />
-          )}
-        </FormItem>,
-        <FormItem key="frequency" {...this.formLayout} label="调度周期">
-          {form.getFieldDecorator('frequency', {
-            initialValue: formVals.frequency,
-          })(
-            <Select style={{ width: '100%' }}>
-              <Option value="month">月</Option>
-              <Option value="week">周</Option>
-            </Select>
-          )}
-        </FormItem>,
-      ];
-    }
-    return [
-      <FormItem key="name" {...this.formLayout} label="规则名称">
-        {form.getFieldDecorator('name', {
-          rules: [{ required: true, message: '请输入规则名称！' }],
-          initialValue: formVals.name,
-        })(<Input placeholder="请输入" />)}
-      </FormItem>,
-      <FormItem key="desc" {...this.formLayout} label="规则描述">
-        {form.getFieldDecorator('desc', {
-          rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
-          initialValue: formVals.desc,
-        })(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
-      </FormItem>,
-    ];
-  };
-
-  renderFooter = currentStep => {
-    const { handleUpdateModalVisible } = this.props;
-    if (currentStep === 1) {
-      return [
-        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
-          上一步
-        </Button>,
-        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
-          取消
-        </Button>,
-        <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
-          下一步
-        </Button>,
-      ];
-    }
-    if (currentStep === 2) {
-      return [
-        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
-          上一步
-        </Button>,
-        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
-          取消
-        </Button>,
-        <Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
-          完成
-        </Button>,
-      ];
-    }
-    return [
-      <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
-        取消
-      </Button>,
-      <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
-        下一步
-      </Button>,
-    ];
-  };
-
-  render() {
-    const { updateModalVisible, handleUpdateModalVisible } = this.props;
-    const { currentStep, formVals } = this.state;
-
-    return (
-      <Modal
-        width={640}
-        bodyStyle={{ padding: '32px 40px 48px' }}
-        destroyOnClose
-        title="规则配置"
-        visible={updateModalVisible}
-        footer={this.renderFooter(currentStep)}
-        onCancel={() => handleUpdateModalVisible()}
-      >
-        <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
-          <Step title="基本信息" />
-          <Step title="配置规则属性" />
-          <Step title="设定调度周期" />
-        </Steps>
-        {this.renderContent(currentStep, formVals)}
-      </Modal>
-    );
-  }
-}
-
-/* eslint react/no-multi-comp:0 */
-@connect(({ rule, loading }) => ({
-  rule,
-  loading: loading.models.rule,
-}))
-@Form.create()
-class AnalyzerManage extends PureComponent {
-  state = {
-    modalVisible: false,
-    updateModalVisible: false,
-    expandForm: false,
-    selectedRows: [],
-    formValues: {},
-    stepFormValues: {},
-  };
-
-  columns = [
-    {
-      title: '规则名称',
-      dataIndex: 'name',
-    },
-    {
-      title: '描述',
-      dataIndex: 'desc',
-    },
-    {
-      title: '服务调用次数',
-      dataIndex: 'callNo',
-      sorter: true,
-      align: 'right',
-      render: val => `${val} 万`,
-      // mark to display a total number
-      needTotal: true,
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      filters: [
-        {
-          text: status[0],
-          value: 0,
-        },
-        {
-          text: status[1],
-          value: 1,
-        },
-        {
-          text: status[2],
-          value: 2,
-        },
-        {
-          text: status[3],
-          value: 3,
-        },
-      ],
-      render(val) {
-        return <Badge status={statusMap[val]} text={status[val]} />;
-      },
-    },
-    {
-      title: '上次调度时间',
-      dataIndex: 'updatedAt',
-      sorter: true,
-      render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
-    },
-    {
-      title: '操作',
-      render: (text, record) => (
-        <Fragment>
-          <a onClick={() => this.handleUpdateModalVisible(true, record)}>配置</a>
-          <Divider type="vertical" />
-          <a href="">订阅警报</a>
-        </Fragment>
-      ),
-    },
-  ];
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'rule/fetch',
-    });
-  }
-
-  handleStandardTableChange = (pagination, filtersArg, sorter) => {
-    const { dispatch } = this.props;
-    const { formValues } = this.state;
-
-    const filters = Object.keys(filtersArg).reduce((obj, key) => {
-      const newObj = { ...obj };
-      newObj[key] = getValue(filtersArg[key]);
-      return newObj;
-    }, {});
-
-    const params = {
-      currentPage: pagination.current,
-      pageSize: pagination.pageSize,
-      ...formValues,
-      ...filters,
-    };
-    if (sorter.field) {
-      params.sorter = `${sorter.field}_${sorter.order}`;
-    }
-
-    dispatch({
-      type: 'rule/fetch',
-      payload: params,
-    });
-  };
-
-  handleFormReset = () => {
-    const { form, dispatch } = this.props;
-    form.resetFields();
-    this.setState({
-      formValues: {},
-    });
-    dispatch({
-      type: 'rule/fetch',
-      payload: {},
-    });
-  };
-
-  toggleForm = () => {
-    const { expandForm } = this.state;
-    this.setState({
-      expandForm: !expandForm,
-    });
-  };
-
-  handleMenuClick = e => {
-    const { dispatch } = this.props;
-    const { selectedRows } = this.state;
-
-    if (!selectedRows) return;
-    switch (e.key) {
-      case 'remove':
-        dispatch({
-          type: 'rule/remove',
-          payload: {
-            key: selectedRows.map(row => row.key),
-          },
-          callback: () => {
-            this.setState({
-              selectedRows: [],
-            });
-          },
-        });
-        break;
-      default:
-        break;
-    }
-  };
-
-  handleSelectRows = rows => {
-    this.setState({
-      selectedRows: rows,
-    });
-  };
-
-  handleSearch = e => {
-    e.preventDefault();
-
-    const { dispatch, form } = this.props;
-
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-
-      const values = {
-        ...fieldsValue,
-        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
-      };
-
-      this.setState({
-        formValues: values,
-      });
-
-      dispatch({
-        type: 'rule/fetch',
-        payload: values,
-      });
-    });
-  };
-
-  handleModalVisible = flag => {
-    this.setState({
-      modalVisible: !!flag,
-    });
-  };
-
-  handleUpdateModalVisible = (flag, record) => {
-    this.setState({
-      updateModalVisible: !!flag,
-      stepFormValues: record || {},
-    });
-  };
-
-  handleAdd = fields => {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'rule/add',
-      payload: {
-        desc: fields.desc,
-      },
-    });
-
-    message.success('添加成功');
-    this.handleModalVisible();
-  };
-
-  handleUpdate = fields => {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'rule/update',
-      payload: {
-        name: fields.name,
-        desc: fields.desc,
-        key: fields.key,
-      },
-    });
-
-    message.success('配置成功');
-    this.handleUpdateModalVisible();
-  };
-
-  renderSimpleForm() {
-    const {
-      form: { getFieldDecorator },
-    } = this.props;
-    return (
-      <Form onSubmit={this.handleSearch} layout="inline">
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="规则名称">
-              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="使用状态">
-              {getFieldDecorator('status')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <span className={styles.submitButtons}>
-              <Button type="primary" htmlType="submit">
-                查询
-              </Button>
-              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
-                重置
-              </Button>
-              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
-                展开 <Icon type="down" />
-              </a>
-            </span>
-          </Col>
-        </Row>
-      </Form>
-    );
-  }
-
-  renderAdvancedForm() {
-    const {
-      form: { getFieldDecorator },
-    } = this.props;
-    return (
-      <Form onSubmit={this.handleSearch} layout="inline">
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="规则名称">
-              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="使用状态">
-              {getFieldDecorator('status')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="调用次数">
-              {getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
-            </FormItem>
-          </Col>
-        </Row>
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="更新日期">
-              {getFieldDecorator('date')(
-                <DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="使用状态">
-              {getFieldDecorator('status3')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="使用状态">
-              {getFieldDecorator('status4')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-        </Row>
-        <div style={{ overflow: 'hidden' }}>
-          <div style={{ float: 'right', marginBottom: 24 }}>
-            <Button type="primary" htmlType="submit">
-              查询
-            </Button>
-            <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
-              重置
-            </Button>
-            <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
-              收起 <Icon type="up" />
-            </a>
-          </div>
-        </div>
-      </Form>
-    );
-  }
-
-  renderForm() {
-    const { expandForm } = this.state;
-    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
-  }
-
-  render() {
-    const {
-      rule: { data },
-      loading,
-    } = this.props;
-    const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
-    const menu = (
-      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
-        <Menu.Item key="remove">删除</Menu.Item>
-        <Menu.Item key="approval">批量审批</Menu.Item>
-      </Menu>
-    );
-
-    const parentMethods = {
-      handleAdd: this.handleAdd,
-      handleModalVisible: this.handleModalVisible,
-    };
-    const updateMethods = {
-      handleUpdateModalVisible: this.handleUpdateModalVisible,
-      handleUpdate: this.handleUpdate,
-    };
-    return (
-      <PageHeaderWrapper title="分词管理">
-        <Card bordered={false}>
-          <div className={styles.tableList}>
-            <div className={styles.tableListForm}>{this.renderForm()}</div>
-            <div className={styles.tableListOperator}>
-              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
-                新建
-              </Button>
-              {selectedRows.length > 0 && (
-                <span>
-                  <Button>批量操作</Button>
-                  <Dropdown overlay={menu}>
-                    <Button>
-                      更多操作 <Icon type="down" />
-                    </Button>
-                  </Dropdown>
-                </span>
-              )}
-            </div>
-            <StandardTable
-              selectedRows={selectedRows}
-              loading={loading}
-              data={data}
-              columns={this.columns}
-              onSelectRow={this.handleSelectRows}
-              onChange={this.handleStandardTableChange}
-            />
-          </div>
-        </Card>
-        <CreateForm {...parentMethods} modalVisible={modalVisible} />
-        {stepFormValues && Object.keys(stepFormValues).length ? (
-          <UpdateForm
-            {...updateMethods}
-            updateModalVisible={updateModalVisible}
-            values={stepFormValues}
-          />
-        ) : null}
-      </PageHeaderWrapper>
-    );
-  }
-}
-
-export default AnalyzerManage;
diff --git a/web/src/pages/SearchManage/AnalyzerManage.less b/web/src/pages/SearchManage/AnalyzerManage.less
deleted file mode 100644
index 792757df..00000000
--- a/web/src/pages/SearchManage/AnalyzerManage.less
+++ /dev/null
@@ -1,49 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-@import '~@/utils/utils.less';
-
-.tableList {
-  .tableListOperator {
-    margin-bottom: 16px;
-    button {
-      margin-right: 8px;
-    }
-  }
-}
-
-.tableListForm {
-  :global {
-    .ant-form-item {
-      margin-bottom: 24px;
-      margin-right: 0;
-      display: flex;
-      > .ant-form-item-label {
-        width: auto;
-        line-height: 32px;
-        padding-right: 8px;
-      }
-      .ant-form-item-control {
-        line-height: 32px;
-      }
-    }
-    .ant-form-item-control-wrapper {
-      flex: 1;
-    }
-  }
-  .submitButtons {
-    display: block;
-    white-space: nowrap;
-    margin-bottom: 24px;
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .tableListForm :global(.ant-form-item) {
-    margin-right: 24px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .tableListForm :global(.ant-form-item) {
-    margin-right: 8px;
-  }
-}
diff --git a/web/src/pages/SearchManage/DictManage.js b/web/src/pages/SearchManage/DictManage.js
deleted file mode 100644
index 1f0fe0d8..00000000
--- a/web/src/pages/SearchManage/DictManage.js
+++ /dev/null
@@ -1,675 +0,0 @@
-import React, { PureComponent, Fragment } from 'react';
-import { connect } from 'dva';
-import moment from 'moment';
-import {
-  Row,
-  Col,
-  Card,
-  Form,
-  Input,
-  Select,
-  Icon,
-  Button,
-  Dropdown,
-  Menu,
-  InputNumber,
-  DatePicker,
-  Modal,
-  message,
-  Badge,
-  Divider,
-  Steps,
-  Radio,
-} from 'antd';
-import StandardTable from '@/components/StandardTable';
-import PageHeaderWrapper from '@/components/PageHeaderWrapper';
-
-import styles from './DictManage.less';
-
-const FormItem = Form.Item;
-const { Step } = Steps;
-const { TextArea } = Input;
-const { Option } = Select;
-const RadioGroup = Radio.Group;
-const getValue = obj =>
-  Object.keys(obj)
-    .map(key => obj[key])
-    .join(',');
-const statusMap = ['default', 'processing', 'success', 'error'];
-const status = ['关闭', '运行中', '已上线', '异常'];
-
-const CreateForm = Form.create()(props => {
-  const { modalVisible, form, handleAdd, handleModalVisible } = props;
-  const okHandle = () => {
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-      form.resetFields();
-      handleAdd(fieldsValue);
-    });
-  };
-  return (
-    <Modal
-      destroyOnClose
-      title="新建规则"
-      visible={modalVisible}
-      onOk={okHandle}
-      onCancel={() => handleModalVisible()}
-    >
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
-        {form.getFieldDecorator('desc', {
-          rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
-        })(<Input placeholder="请输入" />)}
-      </FormItem>
-    </Modal>
-  );
-});
-
-@Form.create()
-class UpdateForm extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      formVals: {
-        name: props.values.name,
-        desc: props.values.desc,
-        key: props.values.key,
-        target: '0',
-        template: '0',
-        type: '1',
-        time: '',
-        frequency: 'month',
-      },
-      currentStep: 0,
-    };
-
-    this.formLayout = {
-      labelCol: { span: 7 },
-      wrapperCol: { span: 13 },
-    };
-  }
-
-  handleNext = currentStep => {
-    const { form, handleUpdate } = this.props;
-    const { formVals: oldValue } = this.state;
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-      const formVals = { ...oldValue, ...fieldsValue };
-      this.setState(
-        {
-          formVals,
-        },
-        () => {
-          if (currentStep < 2) {
-            this.forward();
-          } else {
-            handleUpdate(formVals);
-          }
-        }
-      );
-    });
-  };
-
-  backward = () => {
-    const { currentStep } = this.state;
-    this.setState({
-      currentStep: currentStep - 1,
-    });
-  };
-
-  forward = () => {
-    const { currentStep } = this.state;
-    this.setState({
-      currentStep: currentStep + 1,
-    });
-  };
-
-  renderContent = (currentStep, formVals) => {
-    const { form } = this.props;
-    if (currentStep === 1) {
-      return [
-        <FormItem key="target" {...this.formLayout} label="监控对象">
-          {form.getFieldDecorator('target', {
-            initialValue: formVals.target,
-          })(
-            <Select style={{ width: '100%' }}>
-              <Option value="0">表一</Option>
-              <Option value="1">表二</Option>
-            </Select>
-          )}
-        </FormItem>,
-        <FormItem key="template" {...this.formLayout} label="规则模板">
-          {form.getFieldDecorator('template', {
-            initialValue: formVals.template,
-          })(
-            <Select style={{ width: '100%' }}>
-              <Option value="0">规则模板一</Option>
-              <Option value="1">规则模板二</Option>
-            </Select>
-          )}
-        </FormItem>,
-        <FormItem key="type" {...this.formLayout} label="规则类型">
-          {form.getFieldDecorator('type', {
-            initialValue: formVals.type,
-          })(
-            <RadioGroup>
-              <Radio value="0">强</Radio>
-              <Radio value="1">弱</Radio>
-            </RadioGroup>
-          )}
-        </FormItem>,
-      ];
-    }
-    if (currentStep === 2) {
-      return [
-        <FormItem key="time" {...this.formLayout} label="开始时间">
-          {form.getFieldDecorator('time', {
-            rules: [{ required: true, message: '请选择开始时间！' }],
-          })(
-            <DatePicker
-              style={{ width: '100%' }}
-              showTime
-              format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间"
-            />
-          )}
-        </FormItem>,
-        <FormItem key="frequency" {...this.formLayout} label="调度周期">
-          {form.getFieldDecorator('frequency', {
-            initialValue: formVals.frequency,
-          })(
-            <Select style={{ width: '100%' }}>
-              <Option value="month">月</Option>
-              <Option value="week">周</Option>
-            </Select>
-          )}
-        </FormItem>,
-      ];
-    }
-    return [
-      <FormItem key="name" {...this.formLayout} label="规则名称">
-        {form.getFieldDecorator('name', {
-          rules: [{ required: true, message: '请输入规则名称！' }],
-          initialValue: formVals.name,
-        })(<Input placeholder="请输入" />)}
-      </FormItem>,
-      <FormItem key="desc" {...this.formLayout} label="规则描述">
-        {form.getFieldDecorator('desc', {
-          rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
-          initialValue: formVals.desc,
-        })(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
-      </FormItem>,
-    ];
-  };
-
-  renderFooter = currentStep => {
-    const { handleUpdateModalVisible } = this.props;
-    if (currentStep === 1) {
-      return [
-        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
-          上一步
-        </Button>,
-        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
-          取消
-        </Button>,
-        <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
-          下一步
-        </Button>,
-      ];
-    }
-    if (currentStep === 2) {
-      return [
-        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
-          上一步
-        </Button>,
-        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
-          取消
-        </Button>,
-        <Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
-          完成
-        </Button>,
-      ];
-    }
-    return [
-      <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
-        取消
-      </Button>,
-      <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
-        下一步
-      </Button>,
-    ];
-  };
-
-  render() {
-    const { updateModalVisible, handleUpdateModalVisible } = this.props;
-    const { currentStep, formVals } = this.state;
-
-    return (
-      <Modal
-        width={640}
-        bodyStyle={{ padding: '32px 40px 48px' }}
-        destroyOnClose
-        title="规则配置"
-        visible={updateModalVisible}
-        footer={this.renderFooter(currentStep)}
-        onCancel={() => handleUpdateModalVisible()}
-      >
-        <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
-          <Step title="基本信息" />
-          <Step title="配置规则属性" />
-          <Step title="设定调度周期" />
-        </Steps>
-        {this.renderContent(currentStep, formVals)}
-      </Modal>
-    );
-  }
-}
-
-/* eslint react/no-multi-comp:0 */
-@connect(({ rule, loading }) => ({
-  rule,
-  loading: loading.models.rule,
-}))
-@Form.create()
-class DictManage extends PureComponent {
-  state = {
-    modalVisible: false,
-    updateModalVisible: false,
-    expandForm: false,
-    selectedRows: [],
-    formValues: {},
-    stepFormValues: {},
-  };
-
-  columns = [
-    {
-      title: '规则名称',
-      dataIndex: 'name',
-    },
-    {
-      title: '描述',
-      dataIndex: 'desc',
-    },
-    {
-      title: '服务调用次数',
-      dataIndex: 'callNo',
-      sorter: true,
-      align: 'right',
-      render: val => `${val} 万`,
-      // mark to display a total number
-      needTotal: true,
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      filters: [
-        {
-          text: status[0],
-          value: 0,
-        },
-        {
-          text: status[1],
-          value: 1,
-        },
-        {
-          text: status[2],
-          value: 2,
-        },
-        {
-          text: status[3],
-          value: 3,
-        },
-      ],
-      render(val) {
-        return <Badge status={statusMap[val]} text={status[val]} />;
-      },
-    },
-    {
-      title: '上次调度时间',
-      dataIndex: 'updatedAt',
-      sorter: true,
-      render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
-    },
-    {
-      title: '操作',
-      render: (text, record) => (
-        <Fragment>
-          <a onClick={() => this.handleUpdateModalVisible(true, record)}>配置</a>
-          <Divider type="vertical" />
-          <a href="">订阅警报</a>
-        </Fragment>
-      ),
-    },
-  ];
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'rule/fetch',
-    });
-  }
-
-  handleStandardTableChange = (pagination, filtersArg, sorter) => {
-    const { dispatch } = this.props;
-    const { formValues } = this.state;
-
-    const filters = Object.keys(filtersArg).reduce((obj, key) => {
-      const newObj = { ...obj };
-      newObj[key] = getValue(filtersArg[key]);
-      return newObj;
-    }, {});
-
-    const params = {
-      currentPage: pagination.current,
-      pageSize: pagination.pageSize,
-      ...formValues,
-      ...filters,
-    };
-    if (sorter.field) {
-      params.sorter = `${sorter.field}_${sorter.order}`;
-    }
-
-    dispatch({
-      type: 'rule/fetch',
-      payload: params,
-    });
-  };
-
-  handleFormReset = () => {
-    const { form, dispatch } = this.props;
-    form.resetFields();
-    this.setState({
-      formValues: {},
-    });
-    dispatch({
-      type: 'rule/fetch',
-      payload: {},
-    });
-  };
-
-  toggleForm = () => {
-    const { expandForm } = this.state;
-    this.setState({
-      expandForm: !expandForm,
-    });
-  };
-
-  handleMenuClick = e => {
-    const { dispatch } = this.props;
-    const { selectedRows } = this.state;
-
-    if (!selectedRows) return;
-    switch (e.key) {
-      case 'remove':
-        dispatch({
-          type: 'rule/remove',
-          payload: {
-            key: selectedRows.map(row => row.key),
-          },
-          callback: () => {
-            this.setState({
-              selectedRows: [],
-            });
-          },
-        });
-        break;
-      default:
-        break;
-    }
-  };
-
-  handleSelectRows = rows => {
-    this.setState({
-      selectedRows: rows,
-    });
-  };
-
-  handleSearch = e => {
-    e.preventDefault();
-
-    const { dispatch, form } = this.props;
-
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-
-      const values = {
-        ...fieldsValue,
-        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
-      };
-
-      this.setState({
-        formValues: values,
-      });
-
-      dispatch({
-        type: 'rule/fetch',
-        payload: values,
-      });
-    });
-  };
-
-  handleModalVisible = flag => {
-    this.setState({
-      modalVisible: !!flag,
-    });
-  };
-
-  handleUpdateModalVisible = (flag, record) => {
-    this.setState({
-      updateModalVisible: !!flag,
-      stepFormValues: record || {},
-    });
-  };
-
-  handleAdd = fields => {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'rule/add',
-      payload: {
-        desc: fields.desc,
-      },
-    });
-
-    message.success('添加成功');
-    this.handleModalVisible();
-  };
-
-  handleUpdate = fields => {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'rule/update',
-      payload: {
-        name: fields.name,
-        desc: fields.desc,
-        key: fields.key,
-      },
-    });
-
-    message.success('配置成功');
-    this.handleUpdateModalVisible();
-  };
-
-  renderSimpleForm() {
-    const {
-      form: { getFieldDecorator },
-    } = this.props;
-    return (
-      <Form onSubmit={this.handleSearch} layout="inline">
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="规则名称">
-              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="使用状态">
-              {getFieldDecorator('status')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <span className={styles.submitButtons}>
-              <Button type="primary" htmlType="submit">
-                查询
-              </Button>
-              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
-                重置
-              </Button>
-              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
-                展开 <Icon type="down" />
-              </a>
-            </span>
-          </Col>
-        </Row>
-      </Form>
-    );
-  }
-
-  renderAdvancedForm() {
-    const {
-      form: { getFieldDecorator },
-    } = this.props;
-    return (
-      <Form onSubmit={this.handleSearch} layout="inline">
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="规则名称">
-              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="使用状态">
-              {getFieldDecorator('status')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="调用次数">
-              {getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
-            </FormItem>
-          </Col>
-        </Row>
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="更新日期">
-              {getFieldDecorator('date')(
-                <DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="使用状态">
-              {getFieldDecorator('status3')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="使用状态">
-              {getFieldDecorator('status4')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-        </Row>
-        <div style={{ overflow: 'hidden' }}>
-          <div style={{ float: 'right', marginBottom: 24 }}>
-            <Button type="primary" htmlType="submit">
-              查询
-            </Button>
-            <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
-              重置
-            </Button>
-            <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
-              收起 <Icon type="up" />
-            </a>
-          </div>
-        </div>
-      </Form>
-    );
-  }
-
-  renderForm() {
-    const { expandForm } = this.state;
-    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
-  }
-
-  render() {
-    const {
-      rule: { data },
-      loading,
-    } = this.props;
-    const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
-    const menu = (
-      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
-        <Menu.Item key="remove">删除</Menu.Item>
-        <Menu.Item key="approval">批量审批</Menu.Item>
-      </Menu>
-    );
-
-    const parentMethods = {
-      handleAdd: this.handleAdd,
-      handleModalVisible: this.handleModalVisible,
-    };
-    const updateMethods = {
-      handleUpdateModalVisible: this.handleUpdateModalVisible,
-      handleUpdate: this.handleUpdate,
-    };
-    return (
-      <PageHeaderWrapper title="词库管理">
-        <Card bordered={false}>
-          <div className={styles.tableList}>
-            <div className={styles.tableListForm}>{this.renderForm()}</div>
-            <div className={styles.tableListOperator}>
-              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
-                新建
-              </Button>
-              {selectedRows.length > 0 && (
-                <span>
-                  <Button>批量操作</Button>
-                  <Dropdown overlay={menu}>
-                    <Button>
-                      更多操作 <Icon type="down" />
-                    </Button>
-                  </Dropdown>
-                </span>
-              )}
-            </div>
-            <StandardTable
-              selectedRows={selectedRows}
-              loading={loading}
-              data={data}
-              columns={this.columns}
-              onSelectRow={this.handleSelectRows}
-              onChange={this.handleStandardTableChange}
-            />
-          </div>
-        </Card>
-        <CreateForm {...parentMethods} modalVisible={modalVisible} />
-        {stepFormValues && Object.keys(stepFormValues).length ? (
-          <UpdateForm
-            {...updateMethods}
-            updateModalVisible={updateModalVisible}
-            values={stepFormValues}
-          />
-        ) : null}
-      </PageHeaderWrapper>
-    );
-  }
-}
-
-export default DictManage;
diff --git a/web/src/pages/SearchManage/DictManage.less b/web/src/pages/SearchManage/DictManage.less
deleted file mode 100644
index 792757df..00000000
--- a/web/src/pages/SearchManage/DictManage.less
+++ /dev/null
@@ -1,49 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-@import '~@/utils/utils.less';
-
-.tableList {
-  .tableListOperator {
-    margin-bottom: 16px;
-    button {
-      margin-right: 8px;
-    }
-  }
-}
-
-.tableListForm {
-  :global {
-    .ant-form-item {
-      margin-bottom: 24px;
-      margin-right: 0;
-      display: flex;
-      > .ant-form-item-label {
-        width: auto;
-        line-height: 32px;
-        padding-right: 8px;
-      }
-      .ant-form-item-control {
-        line-height: 32px;
-      }
-    }
-    .ant-form-item-control-wrapper {
-      flex: 1;
-    }
-  }
-  .submitButtons {
-    display: block;
-    white-space: nowrap;
-    margin-bottom: 24px;
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .tableListForm :global(.ant-form-item) {
-    margin-right: 24px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .tableListForm :global(.ant-form-item) {
-    margin-right: 8px;
-  }
-}
diff --git a/web/src/pages/SearchManage/NLPManage.js b/web/src/pages/SearchManage/NLPManage.js
deleted file mode 100644
index 84dfd1c8..00000000
--- a/web/src/pages/SearchManage/NLPManage.js
+++ /dev/null
@@ -1,675 +0,0 @@
-import React, { PureComponent, Fragment } from 'react';
-import { connect } from 'dva';
-import moment from 'moment';
-import {
-  Row,
-  Col,
-  Card,
-  Form,
-  Input,
-  Select,
-  Icon,
-  Button,
-  Dropdown,
-  Menu,
-  InputNumber,
-  DatePicker,
-  Modal,
-  message,
-  Badge,
-  Divider,
-  Steps,
-  Radio,
-} from 'antd';
-import StandardTable from '@/components/StandardTable';
-import PageHeaderWrapper from '@/components/PageHeaderWrapper';
-
-import styles from './NLPManage.less';
-
-const FormItem = Form.Item;
-const { Step } = Steps;
-const { TextArea } = Input;
-const { Option } = Select;
-const RadioGroup = Radio.Group;
-const getValue = obj =>
-  Object.keys(obj)
-    .map(key => obj[key])
-    .join(',');
-const statusMap = ['default', 'processing', 'success', 'error'];
-const status = ['关闭', '运行中', '已上线', '异常'];
-
-const CreateForm = Form.create()(props => {
-  const { modalVisible, form, handleAdd, handleModalVisible } = props;
-  const okHandle = () => {
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-      form.resetFields();
-      handleAdd(fieldsValue);
-    });
-  };
-  return (
-    <Modal
-      destroyOnClose
-      title="新建规则"
-      visible={modalVisible}
-      onOk={okHandle}
-      onCancel={() => handleModalVisible()}
-    >
-      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
-        {form.getFieldDecorator('desc', {
-          rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
-        })(<Input placeholder="请输入" />)}
-      </FormItem>
-    </Modal>
-  );
-});
-
-@Form.create()
-class UpdateForm extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      formVals: {
-        name: props.values.name,
-        desc: props.values.desc,
-        key: props.values.key,
-        target: '0',
-        template: '0',
-        type: '1',
-        time: '',
-        frequency: 'month',
-      },
-      currentStep: 0,
-    };
-
-    this.formLayout = {
-      labelCol: { span: 7 },
-      wrapperCol: { span: 13 },
-    };
-  }
-
-  handleNext = currentStep => {
-    const { form, handleUpdate } = this.props;
-    const { formVals: oldValue } = this.state;
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-      const formVals = { ...oldValue, ...fieldsValue };
-      this.setState(
-        {
-          formVals,
-        },
-        () => {
-          if (currentStep < 2) {
-            this.forward();
-          } else {
-            handleUpdate(formVals);
-          }
-        }
-      );
-    });
-  };
-
-  backward = () => {
-    const { currentStep } = this.state;
-    this.setState({
-      currentStep: currentStep - 1,
-    });
-  };
-
-  forward = () => {
-    const { currentStep } = this.state;
-    this.setState({
-      currentStep: currentStep + 1,
-    });
-  };
-
-  renderContent = (currentStep, formVals) => {
-    const { form } = this.props;
-    if (currentStep === 1) {
-      return [
-        <FormItem key="target" {...this.formLayout} label="监控对象">
-          {form.getFieldDecorator('target', {
-            initialValue: formVals.target,
-          })(
-            <Select style={{ width: '100%' }}>
-              <Option value="0">表一</Option>
-              <Option value="1">表二</Option>
-            </Select>
-          )}
-        </FormItem>,
-        <FormItem key="template" {...this.formLayout} label="规则模板">
-          {form.getFieldDecorator('template', {
-            initialValue: formVals.template,
-          })(
-            <Select style={{ width: '100%' }}>
-              <Option value="0">规则模板一</Option>
-              <Option value="1">规则模板二</Option>
-            </Select>
-          )}
-        </FormItem>,
-        <FormItem key="type" {...this.formLayout} label="规则类型">
-          {form.getFieldDecorator('type', {
-            initialValue: formVals.type,
-          })(
-            <RadioGroup>
-              <Radio value="0">强</Radio>
-              <Radio value="1">弱</Radio>
-            </RadioGroup>
-          )}
-        </FormItem>,
-      ];
-    }
-    if (currentStep === 2) {
-      return [
-        <FormItem key="time" {...this.formLayout} label="开始时间">
-          {form.getFieldDecorator('time', {
-            rules: [{ required: true, message: '请选择开始时间！' }],
-          })(
-            <DatePicker
-              style={{ width: '100%' }}
-              showTime
-              format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间"
-            />
-          )}
-        </FormItem>,
-        <FormItem key="frequency" {...this.formLayout} label="调度周期">
-          {form.getFieldDecorator('frequency', {
-            initialValue: formVals.frequency,
-          })(
-            <Select style={{ width: '100%' }}>
-              <Option value="month">月</Option>
-              <Option value="week">周</Option>
-            </Select>
-          )}
-        </FormItem>,
-      ];
-    }
-    return [
-      <FormItem key="name" {...this.formLayout} label="规则名称">
-        {form.getFieldDecorator('name', {
-          rules: [{ required: true, message: '请输入规则名称！' }],
-          initialValue: formVals.name,
-        })(<Input placeholder="请输入" />)}
-      </FormItem>,
-      <FormItem key="desc" {...this.formLayout} label="规则描述">
-        {form.getFieldDecorator('desc', {
-          rules: [{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 }],
-          initialValue: formVals.desc,
-        })(<TextArea rows={4} placeholder="请输入至少五个字符" />)}
-      </FormItem>,
-    ];
-  };
-
-  renderFooter = currentStep => {
-    const { handleUpdateModalVisible } = this.props;
-    if (currentStep === 1) {
-      return [
-        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
-          上一步
-        </Button>,
-        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
-          取消
-        </Button>,
-        <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
-          下一步
-        </Button>,
-      ];
-    }
-    if (currentStep === 2) {
-      return [
-        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
-          上一步
-        </Button>,
-        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
-          取消
-        </Button>,
-        <Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
-          完成
-        </Button>,
-      ];
-    }
-    return [
-      <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
-        取消
-      </Button>,
-      <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
-        下一步
-      </Button>,
-    ];
-  };
-
-  render() {
-    const { updateModalVisible, handleUpdateModalVisible } = this.props;
-    const { currentStep, formVals } = this.state;
-
-    return (
-      <Modal
-        width={640}
-        bodyStyle={{ padding: '32px 40px 48px' }}
-        destroyOnClose
-        title="规则配置"
-        visible={updateModalVisible}
-        footer={this.renderFooter(currentStep)}
-        onCancel={() => handleUpdateModalVisible()}
-      >
-        <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
-          <Step title="基本信息" />
-          <Step title="配置规则属性" />
-          <Step title="设定调度周期" />
-        </Steps>
-        {this.renderContent(currentStep, formVals)}
-      </Modal>
-    );
-  }
-}
-
-/* eslint react/no-multi-comp:0 */
-@connect(({ rule, loading }) => ({
-  rule,
-  loading: loading.models.rule,
-}))
-@Form.create()
-class NLPManage extends PureComponent {
-  state = {
-    modalVisible: false,
-    updateModalVisible: false,
-    expandForm: false,
-    selectedRows: [],
-    formValues: {},
-    stepFormValues: {},
-  };
-
-  columns = [
-    {
-      title: '规则名称',
-      dataIndex: 'name',
-    },
-    {
-      title: '描述',
-      dataIndex: 'desc',
-    },
-    {
-      title: '服务调用次数',
-      dataIndex: 'callNo',
-      sorter: true,
-      align: 'right',
-      render: val => `${val} 万`,
-      // mark to display a total number
-      needTotal: true,
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      filters: [
-        {
-          text: status[0],
-          value: 0,
-        },
-        {
-          text: status[1],
-          value: 1,
-        },
-        {
-          text: status[2],
-          value: 2,
-        },
-        {
-          text: status[3],
-          value: 3,
-        },
-      ],
-      render(val) {
-        return <Badge status={statusMap[val]} text={status[val]} />;
-      },
-    },
-    {
-      title: '上次调度时间',
-      dataIndex: 'updatedAt',
-      sorter: true,
-      render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
-    },
-    {
-      title: '操作',
-      render: (text, record) => (
-        <Fragment>
-          <a onClick={() => this.handleUpdateModalVisible(true, record)}>配置</a>
-          <Divider type="vertical" />
-          <a href="">订阅警报</a>
-        </Fragment>
-      ),
-    },
-  ];
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'rule/fetch',
-    });
-  }
-
-  handleStandardTableChange = (pagination, filtersArg, sorter) => {
-    const { dispatch } = this.props;
-    const { formValues } = this.state;
-
-    const filters = Object.keys(filtersArg).reduce((obj, key) => {
-      const newObj = { ...obj };
-      newObj[key] = getValue(filtersArg[key]);
-      return newObj;
-    }, {});
-
-    const params = {
-      currentPage: pagination.current,
-      pageSize: pagination.pageSize,
-      ...formValues,
-      ...filters,
-    };
-    if (sorter.field) {
-      params.sorter = `${sorter.field}_${sorter.order}`;
-    }
-
-    dispatch({
-      type: 'rule/fetch',
-      payload: params,
-    });
-  };
-
-  handleFormReset = () => {
-    const { form, dispatch } = this.props;
-    form.resetFields();
-    this.setState({
-      formValues: {},
-    });
-    dispatch({
-      type: 'rule/fetch',
-      payload: {},
-    });
-  };
-
-  toggleForm = () => {
-    const { expandForm } = this.state;
-    this.setState({
-      expandForm: !expandForm,
-    });
-  };
-
-  handleMenuClick = e => {
-    const { dispatch } = this.props;
-    const { selectedRows } = this.state;
-
-    if (!selectedRows) return;
-    switch (e.key) {
-      case 'remove':
-        dispatch({
-          type: 'rule/remove',
-          payload: {
-            key: selectedRows.map(row => row.key),
-          },
-          callback: () => {
-            this.setState({
-              selectedRows: [],
-            });
-          },
-        });
-        break;
-      default:
-        break;
-    }
-  };
-
-  handleSelectRows = rows => {
-    this.setState({
-      selectedRows: rows,
-    });
-  };
-
-  handleSearch = e => {
-    e.preventDefault();
-
-    const { dispatch, form } = this.props;
-
-    form.validateFields((err, fieldsValue) => {
-      if (err) return;
-
-      const values = {
-        ...fieldsValue,
-        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
-      };
-
-      this.setState({
-        formValues: values,
-      });
-
-      dispatch({
-        type: 'rule/fetch',
-        payload: values,
-      });
-    });
-  };
-
-  handleModalVisible = flag => {
-    this.setState({
-      modalVisible: !!flag,
-    });
-  };
-
-  handleUpdateModalVisible = (flag, record) => {
-    this.setState({
-      updateModalVisible: !!flag,
-      stepFormValues: record || {},
-    });
-  };
-
-  handleAdd = fields => {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'rule/add',
-      payload: {
-        desc: fields.desc,
-      },
-    });
-
-    message.success('添加成功');
-    this.handleModalVisible();
-  };
-
-  handleUpdate = fields => {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'rule/update',
-      payload: {
-        name: fields.name,
-        desc: fields.desc,
-        key: fields.key,
-      },
-    });
-
-    message.success('配置成功');
-    this.handleUpdateModalVisible();
-  };
-
-  renderSimpleForm() {
-    const {
-      form: { getFieldDecorator },
-    } = this.props;
-    return (
-      <Form onSubmit={this.handleSearch} layout="inline">
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="规则名称">
-              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="使用状态">
-              {getFieldDecorator('status')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <span className={styles.submitButtons}>
-              <Button type="primary" htmlType="submit">
-                查询
-              </Button>
-              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
-                重置
-              </Button>
-              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
-                展开 <Icon type="down" />
-              </a>
-            </span>
-          </Col>
-        </Row>
-      </Form>
-    );
-  }
-
-  renderAdvancedForm() {
-    const {
-      form: { getFieldDecorator },
-    } = this.props;
-    return (
-      <Form onSubmit={this.handleSearch} layout="inline">
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="规则名称">
-              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="使用状态">
-              {getFieldDecorator('status')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="调用次数">
-              {getFieldDecorator('number')(<InputNumber style={{ width: '100%' }} />)}
-            </FormItem>
-          </Col>
-        </Row>
-        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
-          <Col md={8} sm={24}>
-            <FormItem label="更新日期">
-              {getFieldDecorator('date')(
-                <DatePicker style={{ width: '100%' }} placeholder="请输入更新日期" />
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="使用状态">
-              {getFieldDecorator('status3')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-          <Col md={8} sm={24}>
-            <FormItem label="使用状态">
-              {getFieldDecorator('status4')(
-                <Select placeholder="请选择" style={{ width: '100%' }}>
-                  <Option value="0">关闭</Option>
-                  <Option value="1">运行中</Option>
-                </Select>
-              )}
-            </FormItem>
-          </Col>
-        </Row>
-        <div style={{ overflow: 'hidden' }}>
-          <div style={{ float: 'right', marginBottom: 24 }}>
-            <Button type="primary" htmlType="submit">
-              查询
-            </Button>
-            <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
-              重置
-            </Button>
-            <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
-              收起 <Icon type="up" />
-            </a>
-          </div>
-        </div>
-      </Form>
-    );
-  }
-
-  renderForm() {
-    const { expandForm } = this.state;
-    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
-  }
-
-  render() {
-    const {
-      rule: { data },
-      loading,
-    } = this.props;
-    const { selectedRows, modalVisible, updateModalVisible, stepFormValues } = this.state;
-    const menu = (
-      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
-        <Menu.Item key="remove">删除</Menu.Item>
-        <Menu.Item key="approval">批量审批</Menu.Item>
-      </Menu>
-    );
-
-    const parentMethods = {
-      handleAdd: this.handleAdd,
-      handleModalVisible: this.handleModalVisible,
-    };
-    const updateMethods = {
-      handleUpdateModalVisible: this.handleUpdateModalVisible,
-      handleUpdate: this.handleUpdate,
-    };
-    return (
-      <PageHeaderWrapper title="自然语言处理">
-        <Card bordered={false}>
-          <div className={styles.tableList}>
-            <div className={styles.tableListForm}>{this.renderForm()}</div>
-            <div className={styles.tableListOperator}>
-              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
-                新建
-              </Button>
-              {selectedRows.length > 0 && (
-                <span>
-                  <Button>批量操作</Button>
-                  <Dropdown overlay={menu}>
-                    <Button>
-                      更多操作 <Icon type="down" />
-                    </Button>
-                  </Dropdown>
-                </span>
-              )}
-            </div>
-            <StandardTable
-              selectedRows={selectedRows}
-              loading={loading}
-              data={data}
-              columns={this.columns}
-              onSelectRow={this.handleSelectRows}
-              onChange={this.handleStandardTableChange}
-            />
-          </div>
-        </Card>
-        <CreateForm {...parentMethods} modalVisible={modalVisible} />
-        {stepFormValues && Object.keys(stepFormValues).length ? (
-          <UpdateForm
-            {...updateMethods}
-            updateModalVisible={updateModalVisible}
-            values={stepFormValues}
-          />
-        ) : null}
-      </PageHeaderWrapper>
-    );
-  }
-}
-
-export default NLPManage;
diff --git a/web/src/pages/SearchManage/NLPManage.less b/web/src/pages/SearchManage/NLPManage.less
deleted file mode 100644
index 792757df..00000000
--- a/web/src/pages/SearchManage/NLPManage.less
+++ /dev/null
@@ -1,49 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-@import '~@/utils/utils.less';
-
-.tableList {
-  .tableListOperator {
-    margin-bottom: 16px;
-    button {
-      margin-right: 8px;
-    }
-  }
-}
-
-.tableListForm {
-  :global {
-    .ant-form-item {
-      margin-bottom: 24px;
-      margin-right: 0;
-      display: flex;
-      > .ant-form-item-label {
-        width: auto;
-        line-height: 32px;
-        padding-right: 8px;
-      }
-      .ant-form-item-control {
-        line-height: 32px;
-      }
-    }
-    .ant-form-item-control-wrapper {
-      flex: 1;
-    }
-  }
-  .submitButtons {
-    display: block;
-    white-space: nowrap;
-    margin-bottom: 24px;
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .tableListForm :global(.ant-form-item) {
-    margin-right: 24px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .tableListForm :global(.ant-form-item) {
-    margin-right: 8px;
-  }
-}
diff --git a/web/src/pages/SearchManage/AliasManage.js b/web/src/pages/SearchManage/alias/AliasManage.js
similarity index 99%
rename from web/src/pages/SearchManage/AliasManage.js
rename to web/src/pages/SearchManage/alias/AliasManage.js
index 609e37fc..ebf7a29b 100644
--- a/web/src/pages/SearchManage/AliasManage.js
+++ b/web/src/pages/SearchManage/alias/AliasManage.js
@@ -609,7 +609,7 @@ class AliasManage extends PureComponent {
       handleUpdate: this.handleUpdate,
     };
     return (
-      <PageHeaderWrapper title="别名管理">
+      <Fragment>
         <Card bordered={false}>
           <div className={styles.tableList}>
             <div className={styles.tableListForm}>{this.renderForm()}</div>
@@ -643,7 +643,7 @@ class AliasManage extends PureComponent {
             values={stepFormValues}
           />
         ) : null}
-      </PageHeaderWrapper>
+        </Fragment>
     );
   }
 }
diff --git a/web/src/pages/SearchManage/AliasManage.less b/web/src/pages/SearchManage/alias/AliasManage.less
similarity index 100%
rename from web/src/pages/SearchManage/AliasManage.less
rename to web/src/pages/SearchManage/alias/AliasManage.less
diff --git a/web/src/pages/SearchManage/alias/alias.js b/web/src/pages/SearchManage/alias/alias.js
new file mode 100644
index 00000000..2a76fc34
--- /dev/null
+++ b/web/src/pages/SearchManage/alias/alias.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import router from 'umi/router';
+import { connect } from 'dva';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+@connect()
+class Indices extends Component {
+  handleTabChange = key => {
+    const { match } = this.props;
+    switch (key) {
+      case 'index':
+        router.push(`${match.url}/index`);
+        break;
+      case 'param':
+            router.push(`${match.url}/param`);
+            break;
+      case 'rule':
+        router.push(`${match.url}/rule`);
+        break;
+      default:
+        break;
+    }
+  }
+  render() {
+    const tabList = [
+      {
+        key: 'index',
+        tab: '索引别名管理',
+      },
+      {
+        key: 'param',
+        tab: '字段别名管理',
+      },
+      {
+        key: 'rule',
+        tab: 'index pattern 对应规则',
+      }
+    ];
+
+    const { match, children, location } = this.props;
+
+    return (
+      <PageHeaderWrapper
+        tabList={tabList}
+        tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
+        onTabChange={this.handleTabChange}
+      >
+        {children}
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default Indices;
diff --git a/web/src/pages/SearchManage/alias/param.js b/web/src/pages/SearchManage/alias/param.js
new file mode 100644
index 00000000..dba75aa0
--- /dev/null
+++ b/web/src/pages/SearchManage/alias/param.js
@@ -0,0 +1,430 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'dva';
+import {
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Button,
+  Modal,
+  message,
+  Divider,
+} from 'antd';
+import StandardTable from '@/components/StandardTable';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import styles from '../../List/TableList.less';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd(fieldsValue);
+    });
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建模板"
+      visible={modalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+const UpdateForm = Form.create()(props => {
+  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleUpdate(fieldsValue);
+    });
+  };
+  
+  return (
+    <Modal
+      destroyOnClose
+      title="模板设置"
+      visible={updateModalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          initialValue: values.name,
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          initialValue: values.processors,
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ pipeline, loading }) => ({
+  pipeline,
+  loading: loading.models.pipeline,
+}))
+@Form.create()
+class param extends PureComponent {
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    updateFormValues: {},
+  };
+  //index template detail example
+  // {
+  //   ".ml-state" : {
+  //     "order" : 0,
+  //     "version" : 7090199,
+  //     "index_patterns" : [
+  //       ".ml-state*"
+  //     ],
+  //     "settings" : {
+  //       "index" : {
+  //         "hidden" : "true",
+  //         "lifecycle" : {
+  //           "name" : "ml-size-based-ilm-policy",
+  //           "rollover_alias" : ".ml-state-write"
+  //         },
+  //         "auto_expand_replicas" : "0-1"
+  //       }
+  //     },
+  //     "mappings" : {
+  //       "_meta" : {
+  //         "version" : "7090199"
+  //       },
+  //       "enabled" : false
+  //     },
+  //     "aliases" : { }
+  //   }
+  // }
+  datasource = `
+  [
+    {
+      "name" : "filebeat-7.9.1",
+      "index_patterns" : "[filebeat-7.9.1-*]",
+      "order" : "1",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : "apm-7.9.1-span",
+      "index_patterns" : "[apm-7.9.1-span*]",
+      "order" : "2",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".lists-default",
+      "index_patterns" : "[.lists-default-*]",
+      "order" : "0",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-es",
+      "index_patterns" : "[.monitoring-es-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-beats",
+      "index_patterns" : "[.monitoring-beats-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    }]`;
+
+  columns = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '模式',
+      dataIndex: 'index_patterns',
+    },
+    {
+      title: 'order',
+      dataIndex: 'order'
+    },
+    {
+      title: '版本',
+      dataIndex: 'version'
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <Divider type="vertical" />
+          <a onClick={() => {
+            this.state.selectedRows.push(record);
+            this.handleDeleteClick();
+          }}>删除</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: params,
+    });
+  };
+
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: {},
+    });
+  };
+
+  handleDeleteClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+        dispatch({
+          type: 'pipeline/delete',
+          payload: {
+            key: selectedRows.map(row => row.name),
+          },
+          callback: () => {
+            this.setState({
+              selectedRows: [],
+            });
+          },
+        });
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      updateFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/add',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('修改成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    const data = {
+      list: JSON.parse(this.datasource),
+      pagination: {
+        pageSize: 5,
+      },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {updateFormValues && Object.keys(updateFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={updateFormValues}
+          />
+        ) : null}
+      </Fragment>
+    );
+  }
+}
+
+export default param;
diff --git a/web/src/pages/SearchManage/alias/rule.js b/web/src/pages/SearchManage/alias/rule.js
new file mode 100644
index 00000000..71aa8544
--- /dev/null
+++ b/web/src/pages/SearchManage/alias/rule.js
@@ -0,0 +1,430 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'dva';
+import {
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Button,
+  Modal,
+  message,
+  Divider,
+} from 'antd';
+import StandardTable from '@/components/StandardTable';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import styles from '../../List/TableList.less';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd(fieldsValue);
+    });
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建模板"
+      visible={modalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+const UpdateForm = Form.create()(props => {
+  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleUpdate(fieldsValue);
+    });
+  };
+  
+  return (
+    <Modal
+      destroyOnClose
+      title="模板设置"
+      visible={updateModalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          initialValue: values.name,
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          initialValue: values.processors,
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ pipeline, loading }) => ({
+  pipeline,
+  loading: loading.models.pipeline,
+}))
+@Form.create()
+class rule extends PureComponent {
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    updateFormValues: {},
+  };
+  //index template detail example
+  // {
+  //   ".ml-state" : {
+  //     "order" : 0,
+  //     "version" : 7090199,
+  //     "index_patterns" : [
+  //       ".ml-state*"
+  //     ],
+  //     "settings" : {
+  //       "index" : {
+  //         "hidden" : "true",
+  //         "lifecycle" : {
+  //           "name" : "ml-size-based-ilm-policy",
+  //           "rollover_alias" : ".ml-state-write"
+  //         },
+  //         "auto_expand_replicas" : "0-1"
+  //       }
+  //     },
+  //     "mappings" : {
+  //       "_meta" : {
+  //         "version" : "7090199"
+  //       },
+  //       "enabled" : false
+  //     },
+  //     "aliases" : { }
+  //   }
+  // }
+  datasource = `
+  [
+    {
+      "name" : "filebeat-7.9.1",
+      "index_patterns" : "[filebeat-7.9.1-*]",
+      "order" : "1",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : "apm-7.9.1-span",
+      "index_patterns" : "[apm-7.9.1-span*]",
+      "order" : "2",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".lists-default",
+      "index_patterns" : "[.lists-default-*]",
+      "order" : "0",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-es",
+      "index_patterns" : "[.monitoring-es-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-beats",
+      "index_patterns" : "[.monitoring-beats-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    }]`;
+
+  columns = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '模式',
+      dataIndex: 'index_patterns',
+    },
+    {
+      title: 'order',
+      dataIndex: 'order'
+    },
+    {
+      title: '版本',
+      dataIndex: 'version'
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <Divider type="vertical" />
+          <a onClick={() => {
+            this.state.selectedRows.push(record);
+            this.handleDeleteClick();
+          }}>删除</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: params,
+    });
+  };
+
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: {},
+    });
+  };
+
+  handleDeleteClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+        dispatch({
+          type: 'pipeline/delete',
+          payload: {
+            key: selectedRows.map(row => row.name),
+          },
+          callback: () => {
+            this.setState({
+              selectedRows: [],
+            });
+          },
+        });
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      updateFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/add',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('修改成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    const data = {
+      list: JSON.parse(this.datasource),
+      pagination: {
+        pageSize: 5,
+      },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {updateFormValues && Object.keys(updateFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={updateFormValues}
+          />
+        ) : null}
+      </Fragment>
+    );
+  }
+}
+
+export default rule;
diff --git a/web/src/pages/SearchManage/analyzer/Analyzer.js b/web/src/pages/SearchManage/analyzer/Analyzer.js
new file mode 100644
index 00000000..91908f89
--- /dev/null
+++ b/web/src/pages/SearchManage/analyzer/Analyzer.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import router from 'umi/router';
+import { connect } from 'dva';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+@connect()
+class Analyzer extends Component {
+  handleTabChange = key => {
+    const { match } = this.props;
+    switch (key) {
+      case 'manage':
+        router.push(`${match.url}/manage`);
+        break;
+      case 'test':
+            router.push(`${match.url}/test`);
+            break;
+      default:
+        break;
+    }
+  }
+  render() {
+    const tabList = [
+      {
+        key: 'manage',
+        tab: '分词器管理',
+      },
+      {
+        key: 'test',
+        tab: '分词器测试',
+      }
+    ];
+
+    const { match, children, location } = this.props;
+
+    return (
+      <PageHeaderWrapper
+        tabList={tabList}
+        tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
+        onTabChange={this.handleTabChange}
+      >
+        {children}
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default Analyzer;
diff --git a/web/src/pages/SearchManage/analyzer/AnalyzerTest.js b/web/src/pages/SearchManage/analyzer/AnalyzerTest.js
new file mode 100644
index 00000000..3752d293
--- /dev/null
+++ b/web/src/pages/SearchManage/analyzer/AnalyzerTest.js
@@ -0,0 +1,430 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'dva';
+import {
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Button,
+  Modal,
+  message,
+  Divider,
+} from 'antd';
+import StandardTable from '@/components/StandardTable';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import styles from '../../List/TableList.less';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd(fieldsValue);
+    });
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建模板"
+      visible={modalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+const UpdateForm = Form.create()(props => {
+  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleUpdate(fieldsValue);
+    });
+  };
+  
+  return (
+    <Modal
+      destroyOnClose
+      title="模板设置"
+      visible={updateModalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          initialValue: values.name,
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          initialValue: values.processors,
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ pipeline, loading }) => ({
+  pipeline,
+  loading: loading.models.pipeline,
+}))
+@Form.create()
+class AnalyzerTest extends PureComponent {
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    updateFormValues: {},
+  };
+  //index template detail example
+  // {
+  //   ".ml-state" : {
+  //     "order" : 0,
+  //     "version" : 7090199,
+  //     "index_patterns" : [
+  //       ".ml-state*"
+  //     ],
+  //     "settings" : {
+  //       "index" : {
+  //         "hidden" : "true",
+  //         "lifecycle" : {
+  //           "name" : "ml-size-based-ilm-policy",
+  //           "rollover_alias" : ".ml-state-write"
+  //         },
+  //         "auto_expand_replicas" : "0-1"
+  //       }
+  //     },
+  //     "mappings" : {
+  //       "_meta" : {
+  //         "version" : "7090199"
+  //       },
+  //       "enabled" : false
+  //     },
+  //     "aliases" : { }
+  //   }
+  // }
+  datasource = `
+  [
+    {
+      "name" : "filebeat-7.9.1",
+      "index_patterns" : "[filebeat-7.9.1-*]",
+      "order" : "1",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : "apm-7.9.1-span",
+      "index_patterns" : "[apm-7.9.1-span*]",
+      "order" : "2",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".lists-default",
+      "index_patterns" : "[.lists-default-*]",
+      "order" : "0",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-es",
+      "index_patterns" : "[.monitoring-es-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-beats",
+      "index_patterns" : "[.monitoring-beats-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    }]`;
+
+  columns = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '模式',
+      dataIndex: 'index_patterns',
+    },
+    {
+      title: 'order',
+      dataIndex: 'order'
+    },
+    {
+      title: '版本',
+      dataIndex: 'version'
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <Divider type="vertical" />
+          <a onClick={() => {
+            this.state.selectedRows.push(record);
+            this.handleDeleteClick();
+          }}>删除</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: params,
+    });
+  };
+
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: {},
+    });
+  };
+
+  handleDeleteClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+        dispatch({
+          type: 'pipeline/delete',
+          payload: {
+            key: selectedRows.map(row => row.name),
+          },
+          callback: () => {
+            this.setState({
+              selectedRows: [],
+            });
+          },
+        });
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      updateFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/add',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('修改成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    const data = {
+      list: JSON.parse(this.datasource),
+      pagination: {
+        pageSize: 5,
+      },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {updateFormValues && Object.keys(updateFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={updateFormValues}
+          />
+        ) : null}
+      </Fragment>
+    );
+  }
+}
+
+export default AnalyzerTest;
diff --git a/web/src/pages/SearchManage/analyzer/Manage.js b/web/src/pages/SearchManage/analyzer/Manage.js
new file mode 100644
index 00000000..83b69fc3
--- /dev/null
+++ b/web/src/pages/SearchManage/analyzer/Manage.js
@@ -0,0 +1,430 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'dva';
+import {
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Button,
+  Modal,
+  message,
+  Divider,
+} from 'antd';
+import StandardTable from '@/components/StandardTable';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import styles from '../../List/TableList.less';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd(fieldsValue);
+    });
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建模板"
+      visible={modalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+const UpdateForm = Form.create()(props => {
+  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleUpdate(fieldsValue);
+    });
+  };
+  
+  return (
+    <Modal
+      destroyOnClose
+      title="模板设置"
+      visible={updateModalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          initialValue: values.name,
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          initialValue: values.processors,
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ pipeline, loading }) => ({
+  pipeline,
+  loading: loading.models.pipeline,
+}))
+@Form.create()
+class Manage extends PureComponent {
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    updateFormValues: {},
+  };
+  //index template detail example
+  // {
+  //   ".ml-state" : {
+  //     "order" : 0,
+  //     "version" : 7090199,
+  //     "index_patterns" : [
+  //       ".ml-state*"
+  //     ],
+  //     "settings" : {
+  //       "index" : {
+  //         "hidden" : "true",
+  //         "lifecycle" : {
+  //           "name" : "ml-size-based-ilm-policy",
+  //           "rollover_alias" : ".ml-state-write"
+  //         },
+  //         "auto_expand_replicas" : "0-1"
+  //       }
+  //     },
+  //     "mappings" : {
+  //       "_meta" : {
+  //         "version" : "7090199"
+  //       },
+  //       "enabled" : false
+  //     },
+  //     "aliases" : { }
+  //   }
+  // }
+  datasource = `
+  [
+    {
+      "name" : "filebeat-7.9.1",
+      "index_patterns" : "[filebeat-7.9.1-*]",
+      "order" : "1",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : "apm-7.9.1-span",
+      "index_patterns" : "[apm-7.9.1-span*]",
+      "order" : "2",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".lists-default",
+      "index_patterns" : "[.lists-default-*]",
+      "order" : "0",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-es",
+      "index_patterns" : "[.monitoring-es-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-beats",
+      "index_patterns" : "[.monitoring-beats-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    }]`;
+
+  columns = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '模式',
+      dataIndex: 'index_patterns',
+    },
+    {
+      title: 'order',
+      dataIndex: 'order'
+    },
+    {
+      title: '版本',
+      dataIndex: 'version'
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <Divider type="vertical" />
+          <a onClick={() => {
+            this.state.selectedRows.push(record);
+            this.handleDeleteClick();
+          }}>删除</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: params,
+    });
+  };
+
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: {},
+    });
+  };
+
+  handleDeleteClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+        dispatch({
+          type: 'pipeline/delete',
+          payload: {
+            key: selectedRows.map(row => row.name),
+          },
+          callback: () => {
+            this.setState({
+              selectedRows: [],
+            });
+          },
+        });
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      updateFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/add',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('修改成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    const data = {
+      list: JSON.parse(this.datasource),
+      pagination: {
+        pageSize: 5,
+      },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {updateFormValues && Object.keys(updateFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={updateFormValues}
+          />
+        ) : null}
+      </Fragment>
+    );
+  }
+}
+
+export default Manage;
diff --git a/web/src/pages/SearchManage/dict/Common.js b/web/src/pages/SearchManage/dict/Common.js
new file mode 100644
index 00000000..530ea6b5
--- /dev/null
+++ b/web/src/pages/SearchManage/dict/Common.js
@@ -0,0 +1,430 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'dva';
+import {
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Button,
+  Modal,
+  message,
+  Divider,
+} from 'antd';
+import StandardTable from '@/components/StandardTable';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import styles from '../../List/TableList.less';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd(fieldsValue);
+    });
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建模板"
+      visible={modalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+const UpdateForm = Form.create()(props => {
+  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleUpdate(fieldsValue);
+    });
+  };
+  
+  return (
+    <Modal
+      destroyOnClose
+      title="模板设置"
+      visible={updateModalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          initialValue: values.name,
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          initialValue: values.processors,
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ pipeline, loading }) => ({
+  pipeline,
+  loading: loading.models.pipeline,
+}))
+@Form.create()
+class Common extends PureComponent {
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    updateFormValues: {},
+  };
+  //index template detail example
+  // {
+  //   ".ml-state" : {
+  //     "order" : 0,
+  //     "version" : 7090199,
+  //     "index_patterns" : [
+  //       ".ml-state*"
+  //     ],
+  //     "settings" : {
+  //       "index" : {
+  //         "hidden" : "true",
+  //         "lifecycle" : {
+  //           "name" : "ml-size-based-ilm-policy",
+  //           "rollover_alias" : ".ml-state-write"
+  //         },
+  //         "auto_expand_replicas" : "0-1"
+  //       }
+  //     },
+  //     "mappings" : {
+  //       "_meta" : {
+  //         "version" : "7090199"
+  //       },
+  //       "enabled" : false
+  //     },
+  //     "aliases" : { }
+  //   }
+  // }
+  datasource = `
+  [
+    {
+      "name" : "filebeat-7.9.1",
+      "index_patterns" : "[filebeat-7.9.1-*]",
+      "order" : "1",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : "apm-7.9.1-span",
+      "index_patterns" : "[apm-7.9.1-span*]",
+      "order" : "2",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".lists-default",
+      "index_patterns" : "[.lists-default-*]",
+      "order" : "0",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-es",
+      "index_patterns" : "[.monitoring-es-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-beats",
+      "index_patterns" : "[.monitoring-beats-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    }]`;
+
+  columns = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '模式',
+      dataIndex: 'index_patterns',
+    },
+    {
+      title: 'order',
+      dataIndex: 'order'
+    },
+    {
+      title: '版本',
+      dataIndex: 'version'
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <Divider type="vertical" />
+          <a onClick={() => {
+            this.state.selectedRows.push(record);
+            this.handleDeleteClick();
+          }}>删除</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: params,
+    });
+  };
+
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: {},
+    });
+  };
+
+  handleDeleteClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+        dispatch({
+          type: 'pipeline/delete',
+          payload: {
+            key: selectedRows.map(row => row.name),
+          },
+          callback: () => {
+            this.setState({
+              selectedRows: [],
+            });
+          },
+        });
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      updateFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/add',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('修改成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    const data = {
+      list: JSON.parse(this.datasource),
+      pagination: {
+        pageSize: 5,
+      },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {updateFormValues && Object.keys(updateFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={updateFormValues}
+          />
+        ) : null}
+      </Fragment>
+    );
+  }
+}
+
+export default Common;
diff --git a/web/src/pages/SearchManage/dict/Dict.js b/web/src/pages/SearchManage/dict/Dict.js
new file mode 100644
index 00000000..9784e604
--- /dev/null
+++ b/web/src/pages/SearchManage/dict/Dict.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import router from 'umi/router';
+import { connect } from 'dva';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+@connect()
+class Dict extends Component {
+  handleTabChange = key => {
+    const { match } = this.props;
+    switch (key) {
+      case 'professional':
+        router.push(`${match.url}/professional`);
+        break;
+      case 'common':
+            router.push(`${match.url}/common`);
+            break;
+      default:
+        break;
+    }
+  }
+  render() {
+    const tabList = [
+      {
+        key: 'professional',
+        tab: '专业词典管理',
+      },
+      {
+        key: 'common',
+        tab: '常用词管理',
+      }
+    ];
+
+    const { match, children, location } = this.props;
+
+    return (
+      <PageHeaderWrapper
+        tabList={tabList}
+        tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
+        onTabChange={this.handleTabChange}
+      >
+        {children}
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default Dict;
diff --git a/web/src/pages/SearchManage/dict/Professional.js b/web/src/pages/SearchManage/dict/Professional.js
new file mode 100644
index 00000000..8be3b880
--- /dev/null
+++ b/web/src/pages/SearchManage/dict/Professional.js
@@ -0,0 +1,430 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'dva';
+import {
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Button,
+  Modal,
+  message,
+  Divider,
+} from 'antd';
+import StandardTable from '@/components/StandardTable';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import styles from '../../List/TableList.less';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd(fieldsValue);
+    });
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建模板"
+      visible={modalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+const UpdateForm = Form.create()(props => {
+  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleUpdate(fieldsValue);
+    });
+  };
+  
+  return (
+    <Modal
+      destroyOnClose
+      title="模板设置"
+      visible={updateModalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          initialValue: values.name,
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          initialValue: values.processors,
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ pipeline, loading }) => ({
+  pipeline,
+  loading: loading.models.pipeline,
+}))
+@Form.create()
+class Professional extends PureComponent {
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    updateFormValues: {},
+  };
+  //index template detail example
+  // {
+  //   ".ml-state" : {
+  //     "order" : 0,
+  //     "version" : 7090199,
+  //     "index_patterns" : [
+  //       ".ml-state*"
+  //     ],
+  //     "settings" : {
+  //       "index" : {
+  //         "hidden" : "true",
+  //         "lifecycle" : {
+  //           "name" : "ml-size-based-ilm-policy",
+  //           "rollover_alias" : ".ml-state-write"
+  //         },
+  //         "auto_expand_replicas" : "0-1"
+  //       }
+  //     },
+  //     "mappings" : {
+  //       "_meta" : {
+  //         "version" : "7090199"
+  //       },
+  //       "enabled" : false
+  //     },
+  //     "aliases" : { }
+  //   }
+  // }
+  datasource = `
+  [
+    {
+      "name" : "filebeat-7.9.1",
+      "index_patterns" : "[filebeat-7.9.1-*]",
+      "order" : "1",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : "apm-7.9.1-span",
+      "index_patterns" : "[apm-7.9.1-span*]",
+      "order" : "2",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".lists-default",
+      "index_patterns" : "[.lists-default-*]",
+      "order" : "0",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-es",
+      "index_patterns" : "[.monitoring-es-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-beats",
+      "index_patterns" : "[.monitoring-beats-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    }]`;
+
+  columns = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '模式',
+      dataIndex: 'index_patterns',
+    },
+    {
+      title: 'order',
+      dataIndex: 'order'
+    },
+    {
+      title: '版本',
+      dataIndex: 'version'
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <Divider type="vertical" />
+          <a onClick={() => {
+            this.state.selectedRows.push(record);
+            this.handleDeleteClick();
+          }}>删除</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: params,
+    });
+  };
+
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: {},
+    });
+  };
+
+  handleDeleteClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+        dispatch({
+          type: 'pipeline/delete',
+          payload: {
+            key: selectedRows.map(row => row.name),
+          },
+          callback: () => {
+            this.setState({
+              selectedRows: [],
+            });
+          },
+        });
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      updateFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/add',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('修改成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    const data = {
+      list: JSON.parse(this.datasource),
+      pagination: {
+        pageSize: 5,
+      },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {updateFormValues && Object.keys(updateFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={updateFormValues}
+          />
+        ) : null}
+      </Fragment>
+    );
+  }
+}
+
+export default Professional;
diff --git a/web/src/pages/SearchManage/nlp/Intention.js b/web/src/pages/SearchManage/nlp/Intention.js
new file mode 100644
index 00000000..e23d663f
--- /dev/null
+++ b/web/src/pages/SearchManage/nlp/Intention.js
@@ -0,0 +1,430 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'dva';
+import {
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Button,
+  Modal,
+  message,
+  Divider,
+} from 'antd';
+import StandardTable from '@/components/StandardTable';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import styles from '../../List/TableList.less';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd(fieldsValue);
+    });
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建模板"
+      visible={modalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+const UpdateForm = Form.create()(props => {
+  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleUpdate(fieldsValue);
+    });
+  };
+  
+  return (
+    <Modal
+      destroyOnClose
+      title="模板设置"
+      visible={updateModalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          initialValue: values.name,
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          initialValue: values.processors,
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ pipeline, loading }) => ({
+  pipeline,
+  loading: loading.models.pipeline,
+}))
+@Form.create()
+class Intention extends PureComponent {
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    updateFormValues: {},
+  };
+  //index template detail example
+  // {
+  //   ".ml-state" : {
+  //     "order" : 0,
+  //     "version" : 7090199,
+  //     "index_patterns" : [
+  //       ".ml-state*"
+  //     ],
+  //     "settings" : {
+  //       "index" : {
+  //         "hidden" : "true",
+  //         "lifecycle" : {
+  //           "name" : "ml-size-based-ilm-policy",
+  //           "rollover_alias" : ".ml-state-write"
+  //         },
+  //         "auto_expand_replicas" : "0-1"
+  //       }
+  //     },
+  //     "mappings" : {
+  //       "_meta" : {
+  //         "version" : "7090199"
+  //       },
+  //       "enabled" : false
+  //     },
+  //     "aliases" : { }
+  //   }
+  // }
+  datasource = `
+  [
+    {
+      "name" : "filebeat-7.9.1",
+      "index_patterns" : "[filebeat-7.9.1-*]",
+      "order" : "1",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : "apm-7.9.1-span",
+      "index_patterns" : "[apm-7.9.1-span*]",
+      "order" : "2",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".lists-default",
+      "index_patterns" : "[.lists-default-*]",
+      "order" : "0",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-es",
+      "index_patterns" : "[.monitoring-es-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-beats",
+      "index_patterns" : "[.monitoring-beats-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    }]`;
+
+  columns = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '模式',
+      dataIndex: 'index_patterns',
+    },
+    {
+      title: 'order',
+      dataIndex: 'order'
+    },
+    {
+      title: '版本',
+      dataIndex: 'version'
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <Divider type="vertical" />
+          <a onClick={() => {
+            this.state.selectedRows.push(record);
+            this.handleDeleteClick();
+          }}>删除</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: params,
+    });
+  };
+
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: {},
+    });
+  };
+
+  handleDeleteClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+        dispatch({
+          type: 'pipeline/delete',
+          payload: {
+            key: selectedRows.map(row => row.name),
+          },
+          callback: () => {
+            this.setState({
+              selectedRows: [],
+            });
+          },
+        });
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      updateFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/add',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('修改成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    const data = {
+      list: JSON.parse(this.datasource),
+      pagination: {
+        pageSize: 5,
+      },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {updateFormValues && Object.keys(updateFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={updateFormValues}
+          />
+        ) : null}
+      </Fragment>
+    );
+  }
+}
+
+export default Intention;
diff --git a/web/src/pages/SearchManage/nlp/Knowledge.js b/web/src/pages/SearchManage/nlp/Knowledge.js
new file mode 100644
index 00000000..eb43312e
--- /dev/null
+++ b/web/src/pages/SearchManage/nlp/Knowledge.js
@@ -0,0 +1,430 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'dva';
+import {
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Button,
+  Modal,
+  message,
+  Divider,
+} from 'antd';
+import StandardTable from '@/components/StandardTable';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import styles from '../../List/TableList.less';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd(fieldsValue);
+    });
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建模板"
+      visible={modalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+const UpdateForm = Form.create()(props => {
+  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleUpdate(fieldsValue);
+    });
+  };
+  
+  return (
+    <Modal
+      destroyOnClose
+      title="模板设置"
+      visible={updateModalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          initialValue: values.name,
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          initialValue: values.processors,
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ pipeline, loading }) => ({
+  pipeline,
+  loading: loading.models.pipeline,
+}))
+@Form.create()
+class Knowledge extends PureComponent {
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    updateFormValues: {},
+  };
+  //index template detail example
+  // {
+  //   ".ml-state" : {
+  //     "order" : 0,
+  //     "version" : 7090199,
+  //     "index_patterns" : [
+  //       ".ml-state*"
+  //     ],
+  //     "settings" : {
+  //       "index" : {
+  //         "hidden" : "true",
+  //         "lifecycle" : {
+  //           "name" : "ml-size-based-ilm-policy",
+  //           "rollover_alias" : ".ml-state-write"
+  //         },
+  //         "auto_expand_replicas" : "0-1"
+  //       }
+  //     },
+  //     "mappings" : {
+  //       "_meta" : {
+  //         "version" : "7090199"
+  //       },
+  //       "enabled" : false
+  //     },
+  //     "aliases" : { }
+  //   }
+  // }
+  datasource = `
+  [
+    {
+      "name" : "filebeat-7.9.1",
+      "index_patterns" : "[filebeat-7.9.1-*]",
+      "order" : "1",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : "apm-7.9.1-span",
+      "index_patterns" : "[apm-7.9.1-span*]",
+      "order" : "2",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".lists-default",
+      "index_patterns" : "[.lists-default-*]",
+      "order" : "0",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-es",
+      "index_patterns" : "[.monitoring-es-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-beats",
+      "index_patterns" : "[.monitoring-beats-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    }]`;
+
+  columns = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '模式',
+      dataIndex: 'index_patterns',
+    },
+    {
+      title: 'order',
+      dataIndex: 'order'
+    },
+    {
+      title: '版本',
+      dataIndex: 'version'
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <Divider type="vertical" />
+          <a onClick={() => {
+            this.state.selectedRows.push(record);
+            this.handleDeleteClick();
+          }}>删除</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: params,
+    });
+  };
+
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: {},
+    });
+  };
+
+  handleDeleteClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+        dispatch({
+          type: 'pipeline/delete',
+          payload: {
+            key: selectedRows.map(row => row.name),
+          },
+          callback: () => {
+            this.setState({
+              selectedRows: [],
+            });
+          },
+        });
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      updateFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/add',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('修改成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    const data = {
+      list: JSON.parse(this.datasource),
+      pagination: {
+        pageSize: 5,
+      },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {updateFormValues && Object.keys(updateFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={updateFormValues}
+          />
+        ) : null}
+      </Fragment>
+    );
+  }
+}
+
+export default Knowledge;
diff --git a/web/src/pages/SearchManage/nlp/NLP.js b/web/src/pages/SearchManage/nlp/NLP.js
new file mode 100644
index 00000000..864d4f1f
--- /dev/null
+++ b/web/src/pages/SearchManage/nlp/NLP.js
@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import router from 'umi/router';
+import { connect } from 'dva';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+@connect()
+class NLP extends Component {
+  handleTabChange = key => {
+    const { match } = this.props;
+    switch (key) {
+        case 'query':
+        router.push(`${match.url}/query`);
+        break;
+        case 'intention':
+            router.push(`${match.url}/intention`);
+            break;
+        case 'knowledge':
+            router.push(`${match.url}/knowledge`);
+            break;
+        case 'text':
+            router.push(`${match.url}/text`);
+            break;
+      default:
+        break;
+    }
+  }
+  render() {
+    const tabList = [
+      {
+        key: 'query',
+        tab: '查询语义识别',
+      },
+      {
+        key: 'intention',
+        tab: '意图识别设置',
+      },
+      {
+        key: 'knowledge',
+        tab: '知识图谱管理',
+      },
+      {
+        key: 'text',
+        tab: '文本聚类管理',
+      }
+    ];
+
+    const { match, children, location } = this.props;
+
+    return (
+      <PageHeaderWrapper
+        tabList={tabList}
+        tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
+        onTabChange={this.handleTabChange}
+      >
+        {children}
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default NLP;
diff --git a/web/src/pages/SearchManage/nlp/Query.js b/web/src/pages/SearchManage/nlp/Query.js
new file mode 100644
index 00000000..a881d5a9
--- /dev/null
+++ b/web/src/pages/SearchManage/nlp/Query.js
@@ -0,0 +1,430 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'dva';
+import {
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Button,
+  Modal,
+  message,
+  Divider,
+} from 'antd';
+import StandardTable from '@/components/StandardTable';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import styles from '../../List/TableList.less';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd(fieldsValue);
+    });
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建模板"
+      visible={modalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+const UpdateForm = Form.create()(props => {
+  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleUpdate(fieldsValue);
+    });
+  };
+  
+  return (
+    <Modal
+      destroyOnClose
+      title="模板设置"
+      visible={updateModalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          initialValue: values.name,
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          initialValue: values.processors,
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ pipeline, loading }) => ({
+  pipeline,
+  loading: loading.models.pipeline,
+}))
+@Form.create()
+class Query extends PureComponent {
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    updateFormValues: {},
+  };
+  //index template detail example
+  // {
+  //   ".ml-state" : {
+  //     "order" : 0,
+  //     "version" : 7090199,
+  //     "index_patterns" : [
+  //       ".ml-state*"
+  //     ],
+  //     "settings" : {
+  //       "index" : {
+  //         "hidden" : "true",
+  //         "lifecycle" : {
+  //           "name" : "ml-size-based-ilm-policy",
+  //           "rollover_alias" : ".ml-state-write"
+  //         },
+  //         "auto_expand_replicas" : "0-1"
+  //       }
+  //     },
+  //     "mappings" : {
+  //       "_meta" : {
+  //         "version" : "7090199"
+  //       },
+  //       "enabled" : false
+  //     },
+  //     "aliases" : { }
+  //   }
+  // }
+  datasource = `
+  [
+    {
+      "name" : "filebeat-7.9.1",
+      "index_patterns" : "[filebeat-7.9.1-*]",
+      "order" : "1",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : "apm-7.9.1-span",
+      "index_patterns" : "[apm-7.9.1-span*]",
+      "order" : "2",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".lists-default",
+      "index_patterns" : "[.lists-default-*]",
+      "order" : "0",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-es",
+      "index_patterns" : "[.monitoring-es-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-beats",
+      "index_patterns" : "[.monitoring-beats-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    }]`;
+
+  columns = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '模式',
+      dataIndex: 'index_patterns',
+    },
+    {
+      title: 'order',
+      dataIndex: 'order'
+    },
+    {
+      title: '版本',
+      dataIndex: 'version'
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <Divider type="vertical" />
+          <a onClick={() => {
+            this.state.selectedRows.push(record);
+            this.handleDeleteClick();
+          }}>删除</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: params,
+    });
+  };
+
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: {},
+    });
+  };
+
+  handleDeleteClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+        dispatch({
+          type: 'pipeline/delete',
+          payload: {
+            key: selectedRows.map(row => row.name),
+          },
+          callback: () => {
+            this.setState({
+              selectedRows: [],
+            });
+          },
+        });
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      updateFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/add',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('修改成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    const data = {
+      list: JSON.parse(this.datasource),
+      pagination: {
+        pageSize: 5,
+      },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {updateFormValues && Object.keys(updateFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={updateFormValues}
+          />
+        ) : null}
+      </Fragment>
+    );
+  }
+}
+
+export default Query;
diff --git a/web/src/pages/SearchManage/nlp/Text.js b/web/src/pages/SearchManage/nlp/Text.js
new file mode 100644
index 00000000..ca9e0897
--- /dev/null
+++ b/web/src/pages/SearchManage/nlp/Text.js
@@ -0,0 +1,430 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'dva';
+import {
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Button,
+  Modal,
+  message,
+  Divider,
+} from 'antd';
+import StandardTable from '@/components/StandardTable';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import styles from '../../List/TableList.less';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd(fieldsValue);
+    });
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建模板"
+      visible={modalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+const UpdateForm = Form.create()(props => {
+  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleUpdate(fieldsValue);
+    });
+  };
+  
+  return (
+    <Modal
+      destroyOnClose
+      title="模板设置"
+      visible={updateModalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          initialValue: values.name,
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          initialValue: values.processors,
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ pipeline, loading }) => ({
+  pipeline,
+  loading: loading.models.pipeline,
+}))
+@Form.create()
+class Text extends PureComponent {
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    updateFormValues: {},
+  };
+  //index template detail example
+  // {
+  //   ".ml-state" : {
+  //     "order" : 0,
+  //     "version" : 7090199,
+  //     "index_patterns" : [
+  //       ".ml-state*"
+  //     ],
+  //     "settings" : {
+  //       "index" : {
+  //         "hidden" : "true",
+  //         "lifecycle" : {
+  //           "name" : "ml-size-based-ilm-policy",
+  //           "rollover_alias" : ".ml-state-write"
+  //         },
+  //         "auto_expand_replicas" : "0-1"
+  //       }
+  //     },
+  //     "mappings" : {
+  //       "_meta" : {
+  //         "version" : "7090199"
+  //       },
+  //       "enabled" : false
+  //     },
+  //     "aliases" : { }
+  //   }
+  // }
+  datasource = `
+  [
+    {
+      "name" : "filebeat-7.9.1",
+      "index_patterns" : "[filebeat-7.9.1-*]",
+      "order" : "1",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : "apm-7.9.1-span",
+      "index_patterns" : "[apm-7.9.1-span*]",
+      "order" : "2",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".lists-default",
+      "index_patterns" : "[.lists-default-*]",
+      "order" : "0",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-es",
+      "index_patterns" : "[.monitoring-es-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-beats",
+      "index_patterns" : "[.monitoring-beats-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    }]`;
+
+  columns = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '模式',
+      dataIndex: 'index_patterns',
+    },
+    {
+      title: 'order',
+      dataIndex: 'order'
+    },
+    {
+      title: '版本',
+      dataIndex: 'version'
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <Divider type="vertical" />
+          <a onClick={() => {
+            this.state.selectedRows.push(record);
+            this.handleDeleteClick();
+          }}>删除</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: params,
+    });
+  };
+
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: {},
+    });
+  };
+
+  handleDeleteClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+        dispatch({
+          type: 'pipeline/delete',
+          payload: {
+            key: selectedRows.map(row => row.name),
+          },
+          callback: () => {
+            this.setState({
+              selectedRows: [],
+            });
+          },
+        });
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      updateFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/add',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('修改成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    const data = {
+      list: JSON.parse(this.datasource),
+      pagination: {
+        pageSize: 5,
+      },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {updateFormValues && Object.keys(updateFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={updateFormValues}
+          />
+        ) : null}
+      </Fragment>
+    );
+  }
+}
+
+export default Text;
diff --git a/web/src/pages/SearchManage/template/History.js b/web/src/pages/SearchManage/template/History.js
new file mode 100644
index 00000000..8f17eadd
--- /dev/null
+++ b/web/src/pages/SearchManage/template/History.js
@@ -0,0 +1,285 @@
+import React, { PureComponent } from 'react';
+import { findDOMNode } from 'react-dom';
+import moment from 'moment';
+import { connect } from 'dva';
+import {
+    List,
+    Card,
+    Row,
+    Col,
+    Radio,
+    Input,
+    Progress,
+    Button,
+    Icon,
+    Dropdown,
+    Menu,
+    Avatar,
+    Modal,
+    Form,
+    DatePicker,
+    Select,
+} from 'antd';
+
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+import Result from '@/components/Result';
+
+import styles from './History.less';
+
+const FormItem = Form.Item;
+const RadioButton = Radio.Button;
+const RadioGroup = Radio.Group;
+const SelectOption = Select.Option;
+const { Search, TextArea } = Input;
+
+@connect(({ list, loading }) => ({
+    list,
+    loading: loading.models.list,
+}))
+@Form.create()
+class History extends PureComponent {
+    state = { visible: false, done: false };
+
+    formLayout = {
+        labelCol: { span: 7 },
+        wrapperCol: { span: 13 },
+    };
+
+    componentDidMount() {
+        const { dispatch } = this.props;
+        dispatch({
+            type: 'list/fetch',
+            payload: {
+                count: 5,
+            },
+        });
+    }
+
+    showModal = () => {
+        this.setState({
+            visible: true,
+            current: undefined,
+        });
+    };
+
+    showEditModal = item => {
+        this.setState({
+            visible: true,
+            current: item,
+        });
+    };
+
+    handleDone = () => {
+        setTimeout(() => this.addBtn.blur(), 0);
+        this.setState({
+            done: false,
+            visible: false,
+        });
+    };
+
+    handleCancel = () => {
+        setTimeout(() => this.addBtn.blur(), 0);
+        this.setState({
+            visible: false,
+        });
+    };
+
+    handleSubmit = e => {
+        e.preventDefault();
+        const { dispatch, form } = this.props;
+        const { current } = this.state;
+        const id = current ? current.id : '';
+
+        setTimeout(() => this.addBtn.blur(), 0);
+        form.validateFields((err, fieldsValue) => {
+            if (err) return;
+            this.setState({
+                done: true,
+            });
+            dispatch({
+                type: 'list/submit',
+                payload: { id, ...fieldsValue },
+            });
+        });
+    };
+
+    deleteItem = id => {
+        const { dispatch } = this.props;
+        dispatch({
+            type: 'list/submit',
+            payload: { id },
+        });
+    };
+
+    render() {
+        const {
+            list: { list },
+            loading,
+        } = this.props;
+        const {
+            form: { getFieldDecorator },
+        } = this.props;
+        const { visible, done, current = {} } = this.state;
+
+        const editAndDelete = (key, currentItem) => {
+            if (key === 'edit') this.showEditModal(currentItem);
+            else if (key === 'delete') {
+                Modal.confirm({
+                    title: '删除模板',
+                    content: '确定删除该模板吗？',
+                    okText: '确认',
+                    cancelText: '取消',
+                    onOk: () => this.deleteItem(currentItem.id),
+                });
+            }
+        };
+
+        const modalFooter = done
+            ? { footer: null, onCancel: this.handleDone }
+            : { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel };
+
+        const Info = ({ title, value, bordered }) => (
+            <div className={styles.headerInfo}>
+    <span>{title}</span>
+        <p>{value}</p>
+        {bordered && <em />}
+    </div>
+    );
+
+        const extraContent = (
+            <div className={styles.extraContent}>
+            <Search className={styles.extraContentSearch} placeholder="请输入模板内容" onSearch={() => ({})} />
+        </div>
+    );
+
+        const paginationProps = {
+            showSizeChanger: true,
+            showQuickJumper: true,
+            pageSize: 5,
+            total: 50,
+        };
+
+        const ListContent = ({ data: { owner, createdAt, percent, status } }) => (
+            <div className={styles.listContent}>
+    <div className={styles.listContentItem}>
+    <span>模板名称</span>
+        <p>{owner}</p>
+        </div>
+        <div className={styles.listContentItem}>
+    <span>创建时间</span>
+        <p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
+        </div>
+        <div className={styles.listContentItem}>
+    <Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
+        </div>
+        </div>
+    );
+
+        const MoreBtn = props => (
+            <Dropdown
+        overlay={
+            <Menu onClick={({ key }) => editAndDelete(key, props.current)}>
+    <Menu.Item key="edit">编辑</Menu.Item>
+            <Menu.Item key="delete">删除</Menu.Item>
+            </Menu>
+    }
+    >
+    <a>
+        更多 <Icon type="down" />
+            </a>
+            </Dropdown>
+    );
+
+        const getModalContent = () => {
+            if (done) {
+                return (
+                    <Result
+                type="success"
+                title="操作成功"
+                description="一系列的信息描述，很短同样也可以带标点。"
+                actions={
+                    <Button type="primary" onClick={this.handleDone}>
+                知道了
+                </Button>
+            }
+                className={styles.formResult}
+                />
+            );
+            }
+            return (
+                <Form onSubmit={this.handleSubmit}>
+        <FormItem label="模板名称" {...this.formLayout}>
+            {getFieldDecorator('title', {
+                rules: [{ required: true, message: '请输入模板名称' }],
+                initialValue: current.title,
+            })(<Input placeholder="请输入" />)}
+        </FormItem>
+            <FormItem {...this.formLayout} label="模板内容">
+                {getFieldDecorator('subDescription', {
+                rules: [{ message: '请输入模板内容', min: 5 }],
+                    initialValue: current.subDescription,
+            })(<TextArea rows={4} placeholder="请输入模内容" />)}
+        </FormItem>
+            </Form>
+        );
+        };
+        return (
+            <div className={styles.standardList}>
+        <Card
+        className={styles.listCard}
+        bordered={false}
+        title="搜索模板"
+        style={{ marginTop: 24 }}
+        bodyStyle={{ padding: '0 32px 40px 32px' }}
+        extra={extraContent}
+            >
+            <Button
+        type="dashed"
+        style={{ width: '100%', marginBottom: 8 }}
+        icon="plus"
+        onClick={this.showModal}
+        ref={component => {
+            /* eslint-disable */
+            this.addBtn = findDOMNode(component);
+            /* eslint-enable */
+        }}
+    >
+        添加
+        </Button>
+        <List
+        size="large"
+        rowKey="id"
+        loading={loading}
+        pagination={paginationProps}
+        dataSource={list}
+        renderItem={item => (
+        <List.Item
+        actions={[
+            <a
+        onClick={e => {
+            e.preventDefault();
+            this.showEditModal(item);
+        }}
+    >
+        编辑
+        </a>,
+        <MoreBtn current={item} />,
+    ]}
+    >
+    <List.Item.Meta
+        avatar={<Avatar src={item.logo} shape="square" size="large" />}
+        title={<a href={item.href}>{item.title}</a>}
+        description={item.subDescription}
+        />
+        <ListContent data={item} />
+        </List.Item>
+    )}
+        />
+        </Card>
+        </div>
+
+    );
+    }
+}
+
+export default History;
diff --git a/web/src/pages/SearchManage/SearchTemplate.less b/web/src/pages/SearchManage/template/History.less
similarity index 100%
rename from web/src/pages/SearchManage/SearchTemplate.less
rename to web/src/pages/SearchManage/template/History.less
diff --git a/web/src/pages/SearchManage/template/Param.js b/web/src/pages/SearchManage/template/Param.js
new file mode 100644
index 00000000..c8323dd2
--- /dev/null
+++ b/web/src/pages/SearchManage/template/Param.js
@@ -0,0 +1,284 @@
+import React, { PureComponent } from 'react';
+import { findDOMNode } from 'react-dom';
+import moment from 'moment';
+import { connect } from 'dva';
+import {
+    List,
+    Card,
+    Row,
+    Col,
+    Radio,
+    Input,
+    Progress,
+    Button,
+    Icon,
+    Dropdown,
+    Menu,
+    Avatar,
+    Modal,
+    Form,
+    DatePicker,
+    Select,
+} from 'antd';
+
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+import Result from '@/components/Result';
+
+import styles from './Param.less';
+
+const FormItem = Form.Item;
+const RadioButton = Radio.Button;
+const RadioGroup = Radio.Group;
+const SelectOption = Select.Option;
+const { Search, TextArea } = Input;
+
+@connect(({ list, loading }) => ({
+    list,
+    loading: loading.models.list,
+}))
+@Form.create()
+class Param extends PureComponent {
+    state = { visible: false, done: false };
+
+    formLayout = {
+        labelCol: { span: 7 },
+        wrapperCol: { span: 13 },
+    };
+
+    componentDidMount() {
+        const { dispatch } = this.props;
+        dispatch({
+            type: 'list/fetch',
+            payload: {
+                count: 5,
+            },
+        });
+    }
+
+    showModal = () => {
+        this.setState({
+            visible: true,
+            current: undefined,
+        });
+    };
+
+    showEditModal = item => {
+        this.setState({
+            visible: true,
+            current: item,
+        });
+    };
+
+    handleDone = () => {
+        setTimeout(() => this.addBtn.blur(), 0);
+        this.setState({
+            done: false,
+            visible: false,
+        });
+    };
+
+    handleCancel = () => {
+        setTimeout(() => this.addBtn.blur(), 0);
+        this.setState({
+            visible: false,
+        });
+    };
+
+    handleSubmit = e => {
+        e.preventDefault();
+        const { dispatch, form } = this.props;
+        const { current } = this.state;
+        const id = current ? current.id : '';
+
+        setTimeout(() => this.addBtn.blur(), 0);
+        form.validateFields((err, fieldsValue) => {
+            if (err) return;
+            this.setState({
+                done: true,
+            });
+            dispatch({
+                type: 'list/submit',
+                payload: { id, ...fieldsValue },
+            });
+        });
+    };
+
+    deleteItem = id => {
+        const { dispatch } = this.props;
+        dispatch({
+            type: 'list/submit',
+            payload: { id },
+        });
+    };
+
+    render() {
+        const {
+            list: { list },
+            loading,
+        } = this.props;
+        const {
+            form: { getFieldDecorator },
+        } = this.props;
+        const { visible, done, current = {} } = this.state;
+
+        const editAndDelete = (key, currentItem) => {
+            if (key === 'edit') this.showEditModal(currentItem);
+            else if (key === 'delete') {
+                Modal.confirm({
+                    title: '删除模板',
+                    content: '确定删除该模板吗？',
+                    okText: '确认',
+                    cancelText: '取消',
+                    onOk: () => this.deleteItem(currentItem.id),
+                });
+            }
+        };
+
+        const modalFooter = done
+            ? { footer: null, onCancel: this.handleDone }
+            : { okText: '保存', onOk: this.handleSubmit, onCancel: this.handleCancel };
+
+        const Info = ({ title, value, bordered }) => (
+            <div className={styles.headerInfo}>
+    <span>{title}</span>
+        <p>{value}</p>
+        {bordered && <em />}
+    </div>
+    );
+
+        const extraContent = (
+            <div className={styles.extraContent}>
+            <Search className={styles.extraContentSearch} placeholder="请输入模板内容" onSearch={() => ({})} />
+        </div>
+    );
+
+        const paginationProps = {
+            showSizeChanger: true,
+            showQuickJumper: true,
+            pageSize: 5,
+            total: 50,
+        };
+
+        const ListContent = ({ data: { owner, createdAt, percent, status } }) => (
+            <div className={styles.listContent}>
+    <div className={styles.listContentItem}>
+    <span>模板名称</span>
+        <p>{owner}</p>
+        </div>
+        <div className={styles.listContentItem}>
+    <span>创建时间</span>
+        <p>{moment(createdAt).format('YYYY-MM-DD HH:mm')}</p>
+        </div>
+        <div className={styles.listContentItem}>
+    <Progress percent={percent} status={status} strokeWidth={6} style={{ width: 180 }} />
+        </div>
+        </div>
+    );
+
+        const MoreBtn = props => (
+            <Dropdown
+        overlay={
+            <Menu onClick={({ key }) => editAndDelete(key, props.current)}>
+    <Menu.Item key="edit">编辑</Menu.Item>
+            <Menu.Item key="delete">删除</Menu.Item>
+            </Menu>
+    }
+    >
+    <a>
+        更多 <Icon type="down" />
+            </a>
+            </Dropdown>
+    );
+
+        const getModalContent = () => {
+            if (done) {
+                return (
+                    <Result
+                type="success"
+                title="操作成功"
+                description="一系列的信息描述，很短同样也可以带标点。"
+                actions={
+                    <Button type="primary" onClick={this.handleDone}>
+                知道了
+                </Button>
+            }
+                className={styles.formResult}
+                />
+            );
+            }
+            return (
+                <Form onSubmit={this.handleSubmit}>
+        <FormItem label="模板名称" {...this.formLayout}>
+            {getFieldDecorator('title', {
+                rules: [{ required: true, message: '请输入模板名称' }],
+                initialValue: current.title,
+            })(<Input placeholder="请输入" />)}
+        </FormItem>
+            <FormItem {...this.formLayout} label="模板内容">
+                {getFieldDecorator('subDescription', {
+                rules: [{ message: '请输入模板内容', min: 5 }],
+                    initialValue: current.subDescription,
+            })(<TextArea rows={4} placeholder="请输入模内容" />)}
+        </FormItem>
+            </Form>
+        );
+        };
+        return (
+            <div className={styles.standardList}>
+            <Card
+        className={styles.listCard}
+        bordered={false}
+        title="搜索模板"
+        style={{ marginTop: 24 }}
+        bodyStyle={{ padding: '0 32px 40px 32px' }}
+        extra={extraContent}
+            >
+            <Button
+        type="dashed"
+        style={{ width: '100%', marginBottom: 8 }}
+        icon="plus"
+        onClick={this.showModal}
+        ref={component => {
+            /* eslint-disable */
+            this.addBtn = findDOMNode(component);
+            /* eslint-enable */
+        }}
+    >
+        添加
+        </Button>
+        <List
+        size="large"
+        rowKey="id"
+        loading={loading}
+        pagination={paginationProps}
+        dataSource={list}
+        renderItem={item => (
+        <List.Item
+        actions={[
+            <a
+        onClick={e => {
+            e.preventDefault();
+            this.showEditModal(item);
+        }}
+    >
+        编辑
+        </a>,
+        <MoreBtn current={item} />,
+    ]}
+    >
+    <List.Item.Meta
+        avatar={<Avatar src={item.logo} shape="square" size="large" />}
+        title={<a href={item.href}>{item.title}</a>}
+        description={item.subDescription}
+        />
+        <ListContent data={item} />
+        </List.Item>
+    )}
+        />
+        </Card>
+        </div>
+    );
+    }
+}
+
+export default Param;
diff --git a/web/src/pages/SearchManage/template/Param.less b/web/src/pages/SearchManage/template/Param.less
new file mode 100644
index 00000000..f086c501
--- /dev/null
+++ b/web/src/pages/SearchManage/template/Param.less
@@ -0,0 +1,195 @@
+@import '~antd/lib/style/themes/default.less';
+@import '~@/utils/utils.less';
+
+.standardList {
+  :global {
+    .ant-card-head {
+      border-bottom: none;
+    }
+    .ant-card-head-title {
+      line-height: 32px;
+      padding: 24px 0;
+    }
+    .ant-card-extra {
+      padding: 24px 0;
+    }
+    .ant-list-pagination {
+      text-align: right;
+      margin-top: 24px;
+    }
+    .ant-avatar-lg {
+      width: 48px;
+      height: 48px;
+      line-height: 48px;
+    }
+  }
+  .headerInfo {
+    position: relative;
+    text-align: center;
+    & > span {
+      color: @text-color-secondary;
+      display: inline-block;
+      font-size: @font-size-base;
+      line-height: 22px;
+      margin-bottom: 4px;
+    }
+    & > p {
+      color: @heading-color;
+      font-size: 24px;
+      line-height: 32px;
+      margin: 0;
+    }
+    & > em {
+      background-color: @border-color-split;
+      position: absolute;
+      height: 56px;
+      width: 1px;
+      top: 0;
+      right: 0;
+    }
+  }
+  .listContent {
+    font-size: 0;
+    .listContentItem {
+      color: @text-color-secondary;
+      display: inline-block;
+      vertical-align: middle;
+      font-size: @font-size-base;
+      margin-left: 40px;
+      > span {
+        line-height: 20px;
+      }
+      > p {
+        margin-top: 4px;
+        margin-bottom: 0;
+        line-height: 22px;
+      }
+    }
+  }
+  .extraContentSearch {
+    margin-left: 16px;
+    width: 272px;
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .standardList {
+    :global {
+      .ant-list-item-content {
+        display: block;
+        flex: none;
+        width: 100%;
+      }
+      .ant-list-item-action {
+        margin-left: 0;
+      }
+    }
+    .listContent {
+      margin-left: 0;
+      & > div {
+        margin-left: 0;
+      }
+    }
+    .listCard {
+      :global {
+        .ant-card-head-title {
+          overflow: visible;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .standardList {
+    .extraContentSearch {
+      margin-left: 0;
+      width: 100%;
+    }
+    .headerInfo {
+      margin-bottom: 16px;
+      & > em {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .standardList {
+    .listContent {
+      & > div {
+        display: block;
+      }
+      & > div:last-child {
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+  .listCard {
+    :global {
+      .ant-radio-group {
+        display: block;
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
+  .standardList {
+    .listContent {
+      & > div {
+        display: block;
+      }
+      & > div:last-child {
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .standardList {
+    .listContent {
+      & > div {
+        margin-left: 24px;
+      }
+      & > div:last-child {
+        top: 0;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1400px) {
+  .standardList {
+    .listContent {
+      text-align: right;
+      & > div:last-child {
+        top: 0;
+      }
+    }
+  }
+}
+
+.standardListForm {
+  :global {
+    .ant-form-item {
+      margin-bottom: 12px;
+      &:last-child {
+        padding-top: 4px;
+        margin-bottom: 32px;
+      }
+    }
+  }
+}
+
+.formResult {
+  width: 100%;
+  [class^='title'] {
+    margin-bottom: 8px;
+  }
+}
diff --git a/web/src/pages/SearchManage/template/SearchTemplate.js b/web/src/pages/SearchManage/template/SearchTemplate.js
new file mode 100644
index 00000000..8b81d1b4
--- /dev/null
+++ b/web/src/pages/SearchManage/template/SearchTemplate.js
@@ -0,0 +1,430 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'dva';
+import {
+  Row,
+  Col,
+  Card,
+  Form,
+  Input,
+  Button,
+  Modal,
+  message,
+  Divider,
+} from 'antd';
+import StandardTable from '@/components/StandardTable';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+import styles from '../../List/TableList.less';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+const CreateForm = Form.create()(props => {
+  const { modalVisible, form, handleAdd, handleModalVisible } = props;
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleAdd(fieldsValue);
+    });
+  };
+  return (
+    <Modal
+      destroyOnClose
+      title="新建模板"
+      visible={modalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+const UpdateForm = Form.create()(props => {
+  const { updateModalVisible, handleUpdateModalVisible, handleUpdate,values,form } = props;
+
+  const okHandle = () => {
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+      form.resetFields();
+      handleUpdate(fieldsValue);
+    });
+  };
+  
+  return (
+    <Modal
+      destroyOnClose
+      title="模板设置"
+      visible={updateModalVisible}
+      width={640}
+      onOk={okHandle}
+      onCancel={() => handleUpdateModalVisible()}
+    >
+       <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板名称">
+        {form.getFieldDecorator('name', {
+          initialValue: values.name,
+          rules: [{ required: true, message: '请输入至少五个字符的名称！', min: 5 }],
+        })(<Input placeholder="请输入名称" />)}
+      </FormItem>
+      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="模板设置">
+        {form.getFieldDecorator('settings', {
+          initialValue: values.processors,
+          rules: [{ required: true }],
+        })(<TextArea
+          style={{ minHeight: 24 }}
+          placeholder="请输入"
+          rows={9}
+      />)}
+      </FormItem>
+    </Modal>
+  );
+});
+
+/* eslint react/no-multi-comp:0 */
+@connect(({ pipeline, loading }) => ({
+  pipeline,
+  loading: loading.models.pipeline,
+}))
+@Form.create()
+class SearchTemplate extends PureComponent {
+  state = {
+    modalVisible: false,
+    updateModalVisible: false,
+    expandForm: false,
+    selectedRows: [],
+    formValues: {},
+    updateFormValues: {},
+  };
+  //index template detail example
+  // {
+  //   ".ml-state" : {
+  //     "order" : 0,
+  //     "version" : 7090199,
+  //     "index_patterns" : [
+  //       ".ml-state*"
+  //     ],
+  //     "settings" : {
+  //       "index" : {
+  //         "hidden" : "true",
+  //         "lifecycle" : {
+  //           "name" : "ml-size-based-ilm-policy",
+  //           "rollover_alias" : ".ml-state-write"
+  //         },
+  //         "auto_expand_replicas" : "0-1"
+  //       }
+  //     },
+  //     "mappings" : {
+  //       "_meta" : {
+  //         "version" : "7090199"
+  //       },
+  //       "enabled" : false
+  //     },
+  //     "aliases" : { }
+  //   }
+  // }
+  datasource = `
+  [
+    {
+      "name" : "filebeat-7.9.1",
+      "index_patterns" : "[filebeat-7.9.1-*]",
+      "order" : "1",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : "apm-7.9.1-span",
+      "index_patterns" : "[apm-7.9.1-span*]",
+      "order" : "2",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".lists-default",
+      "index_patterns" : "[.lists-default-*]",
+      "order" : "0",
+      "version" : null,
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-es",
+      "index_patterns" : "[.monitoring-es-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    },
+    {
+      "name" : ".monitoring-beats",
+      "index_patterns" : "[.monitoring-beats-7-*]",
+      "order" : "0",
+      "version" : "7000199",
+      "composed_of" : ""
+    }]`;
+
+  columns = [
+    {
+      title: '模板名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '模式',
+      dataIndex: 'index_patterns',
+    },
+    {
+      title: 'order',
+      dataIndex: 'order'
+    },
+    {
+      title: '版本',
+      dataIndex: 'version'
+    },
+    {
+      title: '操作',
+      render: (text, record) => (
+        <Fragment>
+          <a onClick={() => this.handleUpdateModalVisible(true, record)}>设置</a>
+          <Divider type="vertical" />
+          <a onClick={() => {
+            this.state.selectedRows.push(record);
+            this.handleDeleteClick();
+          }}>删除</a>
+        </Fragment>
+      ),
+    },
+  ];
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    // dispatch({
+    //   type: 'pipeline/fetch',
+    // });
+  }
+
+  handleStandardTableChange = (pagination, filtersArg, sorter) => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formValues,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: params,
+    });
+  };
+
+  handleFormReset = () => {
+    const { form, dispatch } = this.props;
+    form.resetFields();
+    this.setState({
+      formValues: {},
+    });
+    dispatch({
+      type: 'pipeline/fetch',
+      payload: {},
+    });
+  };
+
+  handleDeleteClick = e => {
+    const { dispatch } = this.props;
+    const { selectedRows } = this.state;
+
+    if (!selectedRows) return;
+        dispatch({
+          type: 'pipeline/delete',
+          payload: {
+            key: selectedRows.map(row => row.name),
+          },
+          callback: () => {
+            this.setState({
+              selectedRows: [],
+            });
+          },
+        });
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  handleSearch = e => {
+    e.preventDefault();
+
+    const { dispatch, form } = this.props;
+
+    form.validateFields((err, fieldsValue) => {
+      if (err) return;
+
+      const values = {
+        ...fieldsValue,
+        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
+      };
+
+      this.setState({
+        formValues: values,
+      });
+
+      dispatch({
+        type: 'rule/fetch',
+        payload: values,
+      });
+    });
+  };
+
+  handleModalVisible = flag => {
+    this.setState({
+      modalVisible: !!flag,
+    });
+  };
+
+  handleUpdateModalVisible = (flag, record) => {
+    this.setState({
+      updateModalVisible: !!flag,
+      updateFormValues: record || {},
+    });
+  };
+
+  handleAdd = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/add',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('添加成功');
+    this.handleModalVisible();
+  };
+
+  handleUpdate = fields => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pipeline/update',
+      payload: {
+        name: fields.name,
+        desc: fields.desc,
+        processors: fields.processors,
+      },
+    });
+
+    message.success('修改成功');
+    this.handleUpdateModalVisible();
+  };
+
+  renderSimpleForm() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+    return (
+      <Form onSubmit={this.handleSearch} layout="inline">
+        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
+          <Col md={8} sm={24}>
+            <FormItem label="模板名称">
+              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+            </FormItem>
+          </Col>
+          <Col md={8} sm={24}>
+            <span className={styles.submitButtons}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
+                重置
+              </Button>
+            </span>
+          </Col>
+        </Row>
+      </Form>
+    );
+  }
+
+  renderForm() {
+    return this.renderSimpleForm();
+  }
+
+  render() {
+    const data = {
+      list: JSON.parse(this.datasource),
+      pagination: {
+        pageSize: 5,
+      },
+    };
+    const { selectedRows, modalVisible, updateModalVisible, updateFormValues } = this.state;
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+    };
+    const updateMethods = {
+      handleUpdateModalVisible: this.handleUpdateModalVisible,
+      handleUpdate: this.handleUpdate,
+    };
+    return (
+      <Fragment>
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListForm}>{this.renderForm()}</div>
+            <div className={styles.tableListOperator}>
+              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
+                新建
+              </Button>
+              {selectedRows.length > 0 && (
+                <span>
+                  <Button onClick={() => this.handleDeleteClick()}>删除</Button>
+                </span>
+              )}
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              data={data}
+              columns={this.columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleStandardTableChange}
+            />
+          </div>
+        </Card>
+        <CreateForm {...parentMethods} modalVisible={modalVisible} />
+        {updateFormValues && Object.keys(updateFormValues).length ? (
+          <UpdateForm
+            {...updateMethods}
+            updateModalVisible={updateModalVisible}
+            values={updateFormValues}
+          />
+        ) : null}
+      </Fragment>
+    );
+  }
+}
+
+export default SearchTemplate;
diff --git a/web/src/pages/SearchManage/SearchTemplate.js b/web/src/pages/SearchManage/template/Summary.js
similarity index 91%
rename from web/src/pages/SearchManage/SearchTemplate.js
rename to web/src/pages/SearchManage/template/Summary.js
index 4a6ab304..920c3039 100644
--- a/web/src/pages/SearchManage/SearchTemplate.js
+++ b/web/src/pages/SearchManage/template/Summary.js
@@ -24,7 +24,7 @@ import {
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 import Result from '@/components/Result';
 
-import styles from './SearchTemplate.less';
+import styles from './Summary.less';
 
 const FormItem = Form.Item;
 const RadioButton = Radio.Button;
@@ -37,7 +37,7 @@ const { Search, TextArea } = Input;
     loading: loading.models.list,
 }))
 @Form.create()
-class SearchTemplate extends PureComponent {
+class Summary extends PureComponent {
     state = { visible: false, done: false };
 
     formLayout = {
@@ -224,18 +224,17 @@ class SearchTemplate extends PureComponent {
         );
         };
         return (
-            <PageHeaderWrapper>
             <div className={styles.standardList}>
     <Card bordered={false}>
             <Row>
             <Col sm={8} xs={24}>
-            <Info title="模板" value="8个模板" bordered />
+            <Info title="搜索次数" value="80000次" bordered />
         </Col>
         <Col sm={8} xs={24}>
-            <Info title="本周新增模板" value="2个模板" bordered />
+            <Info title="来源统计" value="100个" bordered />
         </Col>
         <Col sm={8} xs={24}>
-            <Info title="本周通过模板创建的索引" value="24个索引" />
+            <Info title="新词、热词 " value="100个" />
             </Col>
             </Row>
             </Card>
@@ -292,20 +291,8 @@ class SearchTemplate extends PureComponent {
         />
         </Card>
         </div>
-        <Modal
-        title={done ? null : `模板${current ? '编辑' : '添加'}`}
-        className={styles.standardListForm}
-        width={640}
-        bodyStyle={done ? { padding: '72px 0' } : { padding: '28px 0 0' }}
-        destroyOnClose
-        visible={visible}
-        {...modalFooter}
-    >
-        {getModalContent()}
-    </Modal>
-        </PageHeaderWrapper>
     );
     }
 }
 
-export default SearchTemplate;
+export default Summary;
diff --git a/web/src/pages/SearchManage/template/Summary.less b/web/src/pages/SearchManage/template/Summary.less
new file mode 100644
index 00000000..f086c501
--- /dev/null
+++ b/web/src/pages/SearchManage/template/Summary.less
@@ -0,0 +1,195 @@
+@import '~antd/lib/style/themes/default.less';
+@import '~@/utils/utils.less';
+
+.standardList {
+  :global {
+    .ant-card-head {
+      border-bottom: none;
+    }
+    .ant-card-head-title {
+      line-height: 32px;
+      padding: 24px 0;
+    }
+    .ant-card-extra {
+      padding: 24px 0;
+    }
+    .ant-list-pagination {
+      text-align: right;
+      margin-top: 24px;
+    }
+    .ant-avatar-lg {
+      width: 48px;
+      height: 48px;
+      line-height: 48px;
+    }
+  }
+  .headerInfo {
+    position: relative;
+    text-align: center;
+    & > span {
+      color: @text-color-secondary;
+      display: inline-block;
+      font-size: @font-size-base;
+      line-height: 22px;
+      margin-bottom: 4px;
+    }
+    & > p {
+      color: @heading-color;
+      font-size: 24px;
+      line-height: 32px;
+      margin: 0;
+    }
+    & > em {
+      background-color: @border-color-split;
+      position: absolute;
+      height: 56px;
+      width: 1px;
+      top: 0;
+      right: 0;
+    }
+  }
+  .listContent {
+    font-size: 0;
+    .listContentItem {
+      color: @text-color-secondary;
+      display: inline-block;
+      vertical-align: middle;
+      font-size: @font-size-base;
+      margin-left: 40px;
+      > span {
+        line-height: 20px;
+      }
+      > p {
+        margin-top: 4px;
+        margin-bottom: 0;
+        line-height: 22px;
+      }
+    }
+  }
+  .extraContentSearch {
+    margin-left: 16px;
+    width: 272px;
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .standardList {
+    :global {
+      .ant-list-item-content {
+        display: block;
+        flex: none;
+        width: 100%;
+      }
+      .ant-list-item-action {
+        margin-left: 0;
+      }
+    }
+    .listContent {
+      margin-left: 0;
+      & > div {
+        margin-left: 0;
+      }
+    }
+    .listCard {
+      :global {
+        .ant-card-head-title {
+          overflow: visible;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .standardList {
+    .extraContentSearch {
+      margin-left: 0;
+      width: 100%;
+    }
+    .headerInfo {
+      margin-bottom: 16px;
+      & > em {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .standardList {
+    .listContent {
+      & > div {
+        display: block;
+      }
+      & > div:last-child {
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+  .listCard {
+    :global {
+      .ant-radio-group {
+        display: block;
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
+  .standardList {
+    .listContent {
+      & > div {
+        display: block;
+      }
+      & > div:last-child {
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .standardList {
+    .listContent {
+      & > div {
+        margin-left: 24px;
+      }
+      & > div:last-child {
+        top: 0;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1400px) {
+  .standardList {
+    .listContent {
+      text-align: right;
+      & > div:last-child {
+        top: 0;
+      }
+    }
+  }
+}
+
+.standardListForm {
+  :global {
+    .ant-form-item {
+      margin-bottom: 12px;
+      &:last-child {
+        padding-top: 4px;
+        margin-bottom: 32px;
+      }
+    }
+  }
+}
+
+.formResult {
+  width: 100%;
+  [class^='title'] {
+    margin-bottom: 8px;
+  }
+}
diff --git a/web/src/pages/SearchManage/template/Template.js b/web/src/pages/SearchManage/template/Template.js
new file mode 100644
index 00000000..51cd458c
--- /dev/null
+++ b/web/src/pages/SearchManage/template/Template.js
@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import router from 'umi/router';
+import { connect } from 'dva';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+
+@connect()
+class Teamplate extends Component {
+  handleTabChange = key => {
+    const { match } = this.props;
+    switch (key) {
+      case 'summary':
+        router.push(`${match.url}/summary`);
+        break;
+      case 'template':
+        router.push(`${match.url}/template`);
+        break;
+      case 'param':
+            router.push(`${match.url}/param`);
+            break;
+      case 'history':
+        router.push(`${match.url}/history`);
+        break;
+      default:
+        break;
+    }
+  }
+  render() {
+    const tabList = [
+      {
+        key: 'summary',
+        tab: '搜索概览',
+      },
+      {
+        key: 'template',
+        tab: '模板设置',
+      },
+      {
+        key: 'param',
+        tab: '参数管理',
+      },
+      {
+        key: 'history',
+        tab: '历史管理',
+      }
+    ];
+
+    const { match, children, location } = this.props;
+
+    return (
+      <PageHeaderWrapper
+        tabList={tabList}
+        tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
+        onTabChange={this.handleTabChange}
+      >
+        {children}
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default Teamplate;