feat:搜索框设置

.idea/workspace.xml

@@ -4,28 +4,19 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="c22c6a78-950d-4bff-ac7a-ed800fcbb7de" name="Changes" comment="">
+    <list default="true" id="c22c6a78-950d-4bff-ac7a-ed800fcbb7de" name="Changes" comment="feat:flex,左右对齐">
-      <change afterPath="$PROJECT_DIR$/src/components/DataPickerItem/index.jsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/DetailSearchBar/index.css" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/DetailForm/index.css" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/DetailSearchBar/index.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/DetailForm/index.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/DetailSearchContext/index.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/DetailNavBar/index.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/ToDoTree/index.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/ParentTask/index.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/ToDoList/index.css" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/ToDoList/index.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/utils/requestUtil.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/Bottom/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Bottom/index.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/DataPickerItem/index.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DataPickerItem/index.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/DetailForm/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DetailForm/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/DetailNavBar/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DetailNavBar/index.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/Bottom/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Bottom/index.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/Home/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Home/index.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/Home/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Home/index.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/Map/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Map/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/ToDoList/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/ToDoList/index.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/WidthUseNavigate/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/WidthUseNavigate/index.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/utils/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils/index.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -100,8 +91,44 @@
       <option name="presentableId" value="Default" />
       <updated>1674086393783</updated>
       <workItem from="1735199009773" duration="4532000" />
-      <workItem from="1735203621890" duration="33395000" />
+      <workItem from="1735203621890" duration="34598000" />
+      <workItem from="1735389721633" duration="18791000" />
+      <workItem from="1735474579369" duration="4701000" />
+      <workItem from="1735522393453" duration="23975000" />
     </task>
+    <task id="LOCAL-00001" summary="feat:backup">
+      <option name="closed" value="true" />
+      <created>1735297580874</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1735297580874</updated>
+    </task>
+    <task id="LOCAL-00002" summary="feat:添加任务">
+      <option name="closed" value="true" />
+      <created>1735462441515</created>
+      <option name="number" value="00002" />
+      <option name="presentableId" value="LOCAL-00002" />
+      <option name="project" value="LOCAL" />
+      <updated>1735462441515</updated>
+    </task>
+    <task id="LOCAL-00003" summary="feat:上滑更多下拉更新">
+      <option name="closed" value="true" />
+      <created>1735465716214</created>
+      <option name="number" value="00003" />
+      <option name="presentableId" value="LOCAL-00003" />
+      <option name="project" value="LOCAL" />
+      <updated>1735465716214</updated>
+    </task>
+    <task id="LOCAL-00004" summary="feat:flex,左右对齐">
+      <option name="closed" value="true" />
+      <created>1735478048560</created>
+      <option name="number" value="00004" />
+      <option name="presentableId" value="LOCAL-00004" />
+      <option name="project" value="LOCAL" />
+      <updated>1735478048560</updated>
+    </task>
+    <option name="localTasksCounter" value="5" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -118,4 +145,22 @@
       </map>
     </option>
   </component>
+  <component name="VcsManagerConfiguration">
+    <MESSAGE value="feat:backup" />
+    <MESSAGE value="feat:添加任务" />
+    <MESSAGE value="feat:上滑更多下拉更新" />
+    <MESSAGE value="feat:flex,左右对齐" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat:flex,左右对齐" />
+  </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager>
+      <breakpoints>
+        <line-breakpoint enabled="true" type="javascript">
+          <url>file://$PROJECT_DIR$/src/components/ParentTask/index.js</url>
+          <line>84</line>
+          <option name="timeStamp" value="1" />
+        </line-breakpoint>
+      </breakpoints>
+    </breakpoint-manager>
+  </component>
 </project>

src/App.js

@@ -4,11 +4,12 @@ import Map from './pages/Map';
 import Index from './pages/Index'
 import './pages/Bottom/index.css'
 import CityList from './pages/CityList';
-import {Todo, Message, PersonalCenter} from './pages/Bottom'
+import { PersonalCenter} from './pages/Bottom'
 import ToDoList from "./pages/ToDoList";
 import DetailForm from "./components/DetailForm";
 import {NavBar} from "antd-mobile";
 import DetailNavBar from "./components/DetailNavBar";
+import DetailSearchContext from "./pages/DetailSearchContext";
 
 function App() {
     return (
@@ -24,11 +25,11 @@ function App() {
                     <Route path='/' element={<Home/>}>
                         <Route index path='/home' element={<Index/>}/>
                         <Route path='/home/todo' element={<ToDoList/>}></Route>
-                        <Route path='/home/message' element={<Message/>}></Route>
                         <Route path='/home/me' element={<PersonalCenter/>}></Route>
                     </Route>
                     <Route path='/detail' element={<DetailNavBar/>}>
                         <Route path='addTask' element={<DetailForm/>}></Route>
+                        <Route path='searchTask' element={<DetailSearchContext/>}></Route>
                     </Route>
 
                     {/* <Route path='/home' element={<Home />}>

src/components/DataPickerItem/index.jsx

@@ -49,11 +49,7 @@ const DatePickerItem = (props) => {
                                 onClick={e => {
                                     e.stopPropagation()
                                     setFieldsValue({fieldName: null})
-                                }}
+                                }}/>) : true
-                            />
-                        ) : (
-                            true
-                        )
                     }
                     onClick={() => {
                         setPickerVisible(true)

src/components/DetailForm/index.js

@@ -12,7 +12,10 @@ import ParentTask from "../ParentTask";
 import DatePickerItem from "../DataPickerItem"
 import "./index.css"
 import {addTask} from "../../utils";
+import {useNavigate, useOutletContext} from "react-router-dom";
 export default () => {
+    const {setTitle} = useOutletContext();
+    setTitle("添加任务")
     const [form] = Form.useForm();
     const onFinish = (values) => {
         // Dialog.alert({
@@ -51,7 +54,7 @@ export default () => {
                 >
                     <Input onChange={console.log} placeholder='任务名称'/>
                 </Form.Item>
-                <Form.Item name='address' label='任务描述' help='详情地址'>
+                <Form.Item name='address' label='任务描述'>
                     <TextArea
                         placeholder='请输入地址'
                         maxLength={100}
@@ -65,7 +68,8 @@ export default () => {
                             <Radio value='8'><Tag color='danger'>未开始</Tag></Radio>
                             <Radio value='9'><Tag color='warning'>进行中</Tag></Radio>
                             <Radio value='7'><Tag color='success'>已完成</Tag></Radio>
-                            <Radio value='4'><Tag>已关闭</Tag></Radio>
+                            <Radio value='10'><Tag color='success'>未完成</Tag></Radio>
+                            <Radio value='6'><Tag>已关闭</Tag></Radio>
                         </Space>
                     </Radio.Group>
                 </Form.Item>

src/components/DetailNavBar/index.js

@@ -10,10 +10,13 @@ const DetailNavBar = () => {
         console.log("click",navigate.length);
         navigate(-1)
     }
-
+    const [title,setTitle] = React.useState("");
+    const updateTitle=(value)=>{
+        setTitle(value)
+    }
     return (
         <div className='detail'>
-            <NavBar back='返回' onBack={handleClick}>标题</NavBar><Outlet/>
+            <NavBar back='返回' onBack={handleClick}>{title}</NavBar><Outlet context={{"setTitle":updateTitle}}/>
         </div>
     )
 

src/components/DetailSearchBar/index.css

@@ -0,0 +1,39 @@
+.detailSearchBar {
+    /*头部固定剧中*/
+    position: fixed;
+    top: 0;
+    left: 0;
+    /*高度，宽度，层级*/
+    height: 40px;
+    width: 100%;
+    z-index: 100;
+    /*边框处理*/
+    border: solid 1px #eeeeee;
+    background: white;
+    border-radius: 20px;
+    /* 左右两边对齐*/
+    display: flex;
+    align-items: center;
+    justify-content: space-between
+}
+
+.onSearchItem .adm-tag {
+    margin-right: 10px;
+}
+
+.onSearchItem .antd-mobile-icon {
+    margin: 0 10px;;
+}
+
+.CloseOutline-CloseOutline {
+    width: 40px;
+    margin-right: 20px;
+}
+
+.onSearchItemOnlyWidth {
+    width: 100vh
+}
+
+.onSearchItemWidth {
+    width: calc(100vh - 60px)
+}

src/components/DetailSearchBar/index.js

@@ -0,0 +1,37 @@
+import {Tag,} from "antd-mobile";
+import React from "react";
+import {useLocation, useNavigate} from 'react-router-dom';
+import {CloseOutline, SearchOutline} from "antd-mobile-icons";
+import "./index.css"
+
+const DetailSearchBar = () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const search = location.state?.search;
+    console.log("DetailSearchBar.search", search)
+    return (
+        <div className="detailSearchBar">
+            <div className={"onSearchItem " + (search ? "onSearchItemWidth" : "onSearchItemOnlyWidth")} onClick={() => {
+                navigate("/detail/searchTask")
+            }}>
+                <SearchOutline/><Tag color={"danger"}>紧急重要</Tag>
+            </div>
+            {search && <div className="CloseOutline-CloseOutline" onClick={() => {
+                console.log("CloseOutline-Close");
+            }}>
+                <CloseOutline style={{float: "right"}}/>
+            </div>
+            }
+
+
+            {/*<SearchBar placeholder='请输入内容' onFocus={() => {*/}
+            {/*    navigate("/detail/searchTask")*/}
+            {/*}}*/}
+
+            {/*>*/}
+            {/*    */}
+            {/*</SearchBar>*/}
+        </div>
+    )
+}
+export default DetailSearchBar;

src/pages/Bottom/index.js

@@ -91,15 +91,6 @@ class BottomInner extends React.Component {
     }
 }
 
-
-export function Todo() {
-    return <div>待办</div>
-}
-
-export function Message() {
-    return <div>消息</div>
-}
-
 export function PersonalCenter() {
     return <div>pc端可访问:http://www.hauruyu.com</div>
 }

src/pages/DetailSearchContext/index.js

@@ -0,0 +1,110 @@
+import {Button, Checkbox, DatePicker, Form, Input, Space, Switch, Tag} from "antd-mobile";
+import ParentTask from "../../components/ParentTask";
+import React from "react";
+import dayjs from "dayjs";
+import {CloseCircleFill} from "antd-mobile-icons";
+import {useLocation, useNavigate, useOutletContext} from "react-router-dom";
+const now = new Date()
+const DetailSearchContext = () => {
+    const {setTitle} = useOutletContext();
+    setTitle("搜索查询")
+    const navigate = useNavigate();
+    const [form] = Form.useForm();
+    const [visible, setVisible] = React.useState(false);
+    const location = useLocation();
+    const search = location.state?.search;
+    console.log("DetailSearchContext.search",search)
+    return (
+        <Form
+            form={form}
+            layout='horizontal'
+            onFinish={(values)=>{
+                navigate("/home/todo", { state: { search: values } })
+            }}
+            footer={
+                <Button block type='submit' color='primary' size='large'>
+                    搜索
+                </Button>
+            }
+        >
+            <ParentTask form={form}/>
+            <Form.Item
+                name='name'
+                label='任务信息'
+            >
+                <Input onChange={console.log} placeholder='任务信息'/>
+            </Form.Item>
+
+            <Form.Item name='state' label='任务状态' required>
+                <Checkbox.Group>
+                    <Space direction='vertical'>
+                        <Checkbox value='8'><Tag color='danger'>未开始</Tag></Checkbox>
+                        <Checkbox value='9'><Tag color='warning'>进行中</Tag></Checkbox>
+                        <Checkbox value='7'><Tag color='success'>已完成</Tag></Checkbox>
+                        <Checkbox value='10'><Tag color='success'>未完成</Tag></Checkbox>
+                        <Checkbox value='6'><Tag>已关闭</Tag></Checkbox>
+                    </Space>
+                </Checkbox.Group>
+            </Form.Item>
+            <Form.Item name='priority' label='任务优先级'>
+                <Checkbox.Group>
+                    <Space direction='vertical'>
+                        <Checkbox value='3'><Tag color='danger'>紧急重要</Tag></Checkbox>
+                        <Checkbox value='2'><Tag color='warning'>不紧急重要</Tag></Checkbox>
+                        <Checkbox value='1'><Tag>紧急不重要</Tag></Checkbox>
+                        <Checkbox value='0'><Tag color='success'>不紧急不重要</Tag></Checkbox>
+                    </Space>
+                </Checkbox.Group>
+            </Form.Item>
+            <Form.Item noStyle
+                       shouldUpdate={(prevValues, curValues) =>
+                           prevValues.todoDay !== curValues.todoDay
+                       }
+            >
+                {({ getFieldValue, setFieldsValue }) => (
+                    <Form.Item
+                        name='todoDay'
+                        trigger='onConfirm'
+                        label='TODO日'
+                        help='期望开始时间和期望结束时间包含当日时间段'
+                        arrow={
+                            getFieldValue('todoDay') ? (
+                                <CloseCircleFill
+                                    style={{
+                                        color: 'var(--adm-color-light)',
+                                        fontSize: 14,
+                                    }}
+                                    onClick={e => {
+                                        e.stopPropagation()
+                                        setFieldsValue({ todoDay: null })
+                                    }}
+                                />) : true
+
+                        }
+                        onClick={() => {
+                            setVisible(true)
+                        }}
+                    >
+                        <DatePicker
+                            visible={visible}
+                            onClose={() => {
+                                setVisible(false)
+                            }}
+                        >
+                            {value =>
+                                value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
+                            }
+                        </DatePicker>
+                    </Form.Item>
+                )}
+            </Form.Item>
+            <Form.Item
+                name='delivery'
+                label='延期任务'
+                childElementPosition='right'
+            >
+                <Switch defaultChecked={true}/>
+            </Form.Item>
+        </Form>)
+}
+export default DetailSearchContext;

src/pages/Home/index.js

@@ -2,19 +2,28 @@ import React from 'react'
 import Bottom from './../Bottom/index'
 import './index.css'
 import {Outlet} from 'react-router-dom'
-import {SearchBar} from "antd-mobile";
+import DetailSearchBar from "../../components/DetailSearchBar";
 
 export default class Home extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            search:{
+                "pageSize":10,
+                "pageNumber":1,
+                "data":[
+                    {"name":"state","value":"8,9","operateType":"IN"},
+                    {"name":"expectedStartTime","value":"2024-12-29T16:00:00.000Z","operateType":">="},
+                    {"name":"expectedStartTime","value":"2024-12-29T16:00:00.000Z","operateType":"<="}]}
+        };
+    }
     render() {
         return (
             <div className='body'>
-                <div style={{"position": "fixed","top":"0","left":"0","width":"100%","zIndex":100}}>
+                <DetailSearchBar/>
-                    <SearchBar placeholder='请输入内容'/>
-                </div>
                 <div style={{marginTop:"40px",marginBottom:"49px",width:"100%"}}>
                     <Outlet/>
                 </div>
-
                 <Bottom/>
             </div>
         )

src/pages/ToDoList/index.js

@@ -8,6 +8,7 @@ import {
 } from 'react-beautiful-dnd'
 import {getTaskList} from "../../utils";
 import "./index.css"
+import {useLocation} from "react-router-dom";
 
 const reorder = (
     list,
@@ -25,7 +26,9 @@ const ToDoList = () => {
     const [taskList, setTaskList] = useState([])
     const [hasMore, setHasMore] = useState(true)
     const [pageNumber, setPageNumber] = useState(1)
-
+    const location = useLocation();
+    const search = location.state?.search;
+    console.log("ToDoList.search",search)
     async function loadMore() {
         getTaskList(pageNumber+1).then(result => {
             setTaskList(val => [...val, ...result.data.data.content])

src/pages/ToDoTree/index.js

@@ -0,0 +1 @@
+上面用文本下面用联动视图