assistant-todo/src/app/task/four/layout.tsx

'use client'
import SideNav from '@/app/ui/dashboard/sidenav';
import TreeTable from "@/app/ui/task/project/TreeTable";
import '@/app/ui/task/four/index.modules.css'
import {useEffect} from "react";

export default function Layout({children}: { children: React.ReactNode }) {
    // useEffect(() => {
    //     // @ts-ignore
    //     const divWidth = document.getElementById('myDiv').offsetWidth;
    //     // @ts-ignore
    //     document.getElementById('mySpan').style.fontSize = divWidth + 'px';
    // }, []); // 这里的空数组表示只在组件挂载时执行一次
    //
    // return (
    //     <>
    //         <div id="myDiv" style={{width: '200px'}}>
    //             Content
    //         </div>
    //         <span id="mySpan">Content</span>
    //     </>
    // )

    useEffect(() => {
        // @ts-ignore
        const divWidth = document.getElementById('tenUp').offsetWidth;
        // @ts-ignore
        document.getElementById('upUp').style.fontSize = divWidth + 'px';
        // @ts-ignore
        document.getElementById('upDown').style.fontSize = divWidth + 'px';
        // @ts-ignore
        const divHeight = document.getElementById('left').offsetHeight;
        // @ts-ignore
        document.getElementById('tenLeft').style.fontSize = divHeight/6*4 + 'px';
    }, []);

    return (
        <div>
            <div className='firstRow' style={{display: 'flex'}}>
                <div className='leftUp'>
                    <TreeTable  search={{name:"priority",value:"3",operateType:"="}}/>
                </div>

                <div id='tenUp' className='up'>
                    <span id='upUp'>向上重要</span>
                </div>

                <div className='rightUp' >
                    <TreeTable  search={{name:"priority",value:"2",operateType:"="}}/>
                </div>
            </div>
            <div id='left' className='left'>
                <span  id='tenLeft' style={{fontSize:'1vh'}}>←向左紧急←向左紧急←向左←向左紧急←向左紧急←向左紧急</span>
            </div>
            <div className='secondRow' style={{display: 'flex'}}>
                <div className='leftDown'>
                    <TreeTable  search={{name:"priority",value:"1",operateType:"="}}/>
                </div>
                <div className='up'>
                    <span id='upDown'>向上重要</span>
                </div>
                {/*<div style={{float:'left',width:'48%',height: '48vh',background:"gray"}}>{children}</div>*/}
                <div className='rightDown'>
                    <TreeTable  search={{name:"priority",value:"0",operateType:"="}}/>
                </div>
            </div>
        </div>
    );
}