feat(search): update demo for search

src/search/_example/base.jsx

@@ -1,18 +1,19 @@
 import React, { useState } from 'react';
 import { SearchIcon } from 'tdesign-icons-react';
-import { Search } from 'tdesign-mobile-react';
+import { Search, CellGroup } from 'tdesign-mobile-react';
 
 export default function Base() {
   const [value, setValue] = useState('');
 
   return (
-    <Search
-      focus={false}
-      placeholder="搜索预设文案"
-      value={value}
-      onChange={(value) => setValue(value)}
-      action="取消"
-      leftIcon={<SearchIcon />}
-    ></Search>
+    <CellGroup title="基础搜索框">
+      <Search
+        placeholder="搜索预设文案"
+        value={value}
+        onChange={(value) => setValue(value)}
+        action="取消"
+        leftIcon={<SearchIcon />}
+      ></Search>
+    </CellGroup>
   );
 }

src/search/_example/index.jsx

@@ -1,26 +1,19 @@
 import React from 'react';
 import BaseDemo from './base';
-import DefaultDemo from './default';
-import ClickDemo from './click';
-import StateDemo from './state';
+import StatusDemo from './status';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import './style/index.less';
 
 export default function RadioDemo() {
   return (
     <div className="tdesign-mobile-demo">
       <TDemoHeader title="Search 搜索框" summary="用于用户输入搜索信息，并进行页面内容搜索" />
-      <TDemoBlock title="01 类型" summary="基础搜索框">
+      <TDemoBlock title="01 类型">
         <BaseDemo />
       </TDemoBlock>
-      <TDemoBlock title="02 状态" summary="默认状态">
-        <DefaultDemo />
-      </TDemoBlock>
-      <TDemoBlock title="" summary="点击状态">
-        <ClickDemo />
-      </TDemoBlock>
-      <TDemoBlock title="" summary="输入状态">
-        <StateDemo />
+      <TDemoBlock title="02 状态">
+        <StatusDemo />
       </TDemoBlock>
     </div>
   );

src/search/_example/status.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { SearchIcon } from 'tdesign-icons-react';
+import { Search, CellGroup } from 'tdesign-mobile-react';
+
+export default function Base() {
+  const [value1, setValue1] = useState('搜索预设文案');
+  const [value2, setValue2] = useState('搜索预设文案');
+  const [value3, setValue3] = useState('搜索预设文案');
+
+  return (
+    <>
+      <CellGroup title="默认状态">
+        <Search
+          placeholder="搜索预设文案"
+          value={value1}
+          onChange={(value) => setValue1(value)}
+          action="取消"
+          leftIcon={<SearchIcon />}
+        ></Search>
+      </CellGroup>
+      <CellGroup title="点击状态">
+        <Search
+          focus={true}
+          placeholder="搜索预设文案"
+          value={value2}
+          onChange={(value) => setValue2(value)}
+          action="取消"
+          leftIcon={<SearchIcon />}
+        ></Search>
+      </CellGroup>
+      <CellGroup title="输入状态">
+        <Search
+          focus={true}
+          placeholder="搜索预设文案"
+          value={value3}
+          onChange={(value) => setValue3(value)}
+          action="取消"
+          leftIcon={<SearchIcon />}
+        ></Search>
+      </CellGroup>
+    </>
+  );
+}

src/search/_example/style/index.less

@@ -0,0 +1,5 @@
+.t-cell-group__title {
+  font-size: 12px;
+  line-height: 20px;
+  padding: 16px;
+}

src/search/search.md

@@ -1,17 +1,5 @@
 :: BASE_DOC ::
 
-### 默认状态
-
-{{ default }}
-
-### 点击状态
-
-{{ click }}
-
-### 输入状态
-
-{{ state }}
-
 ## API
 ### Search Props