feat: search

projects/translate-h5/src/view/home/index.tsx

@@ -22,7 +22,13 @@ function Index() {
         <div className="home-header">
           <h3>宠物翻译</h3>
           <Space style={{ fontSize: "20px", "--gap": "16px" }}>
-            <Filter theme="outline" fill="#333" strokeWidth={3} strokeLinecap="butt" />
+            <Filter
+              theme="outline"
+              fill={visible ? "#118fff" : "#333"}
+              strokeWidth={3}
+              strokeLinecap="butt"
+              onClick={() => setVisible(!visible)}
+            />
             <Divider direction="vertical" />
             <Electrocardiogram
               theme="outline"

projects/translate-h5/src/view/home/translate/component/search/index.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, type DropdownRef, Radio, SearchBar, Space } from "antd-mobile";
+import { Calendar, Dropdown, type DropdownRef, Radio, SearchBar, Space } from "antd-mobile";
 import { RadioValue } from "antd-mobile/es/components/radio";
 import { useRef, useState } from "react";
 
@@ -27,7 +27,7 @@ function SearchCom(props: PropsConfig) {
         }}
         defaultValue={value}
       />
-      <Dropdown className="all" ref={animenuRef}>
+      <Dropdown key="ani" className="all" ref={animenuRef}>
         <Dropdown.Item key="ani" title={aniName}>
           <div style={{ padding: 12 }}>
             <Radio.Group defaultValue="default" onChange={handleAniSelect}>
@@ -48,32 +48,51 @@ function SearchCom(props: PropsConfig) {
             </Radio.Group>
           </div>
         </Dropdown.Item>
+        <Dropdown.Item key="time" title="时间 ">
+          <div style={{ padding: 12 }}>
+            <Calendar
+              prevMonthButton={<span>上一月</span>}
+              nextMonthButton={<span>下一月</span>}
+              prevYearButton={<span>上一年</span>}
+              nextYearButton={<span>下一年</span>}
+            />
+          </div>
+        </Dropdown.Item>
+        <Dropdown.Item key="device" title="设备 ">
+          <div style={{ padding: 12 }}>
+            <Radio.Group defaultValue="default">
+              <Space direction="vertical" block>
+                <Radio block value="0">
+                  AXR智能语音项圈
+                </Radio>
+                <Radio block value="1">
+                  XSWL宠物手机
+                </Radio>
+              </Space>
+            </Radio.Group>
+          </div>
+        </Dropdown.Item>
+        <Dropdown.Item key="mood" title="情绪">
+          <div style={{ padding: 12 }}>
+            <Radio.Group defaultValue="default">
+              <Space direction="vertical" block>
+                <Radio block value="0">
+                  兴奋/玩耍
+                </Radio>
+                <Radio block value="1">
+                  愉快/满足
+                </Radio>
+                <Radio block value="2">
+                  问候/好奇
+                </Radio>
+                <Radio block value="3">
+                  平静/放松
+                </Radio>
+              </Space>
+            </Radio.Group>
+          </div>
+        </Dropdown.Item>
       </Dropdown>
-      {/* <div className="all" onClick={handleAllAni}>
-        <span>全部宠物</span>
-        <DownOne
-          theme="filled"
-          size="16"
-          strokeWidth={3}
-          strokeLinecap="butt"
-        />
-      </div>
-      <ActionSheet
-        visible={visible}
-        actions={actions}
-        onClose={() => setVisible(false)}
-      /> */}
-      {/* <Popup
-        visible={visible}
-        onClose={() => {
-          setVisible(false);
-        }}
-      >
-        <div className="popup-head">
-          <span>宠物</span>
-        </div>
-        11111
-      </Popup> */}
     </div>
   );
 }