huayu-web
/
assistant-todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:tree高度设置

This commit is contained in:
1708-huayu 2025-06-23 18:49:52 +08:00
parent 42e399fc91
commit 47aeb7c228
7 changed files with 42 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@ -22,7 +22,7 @@ export default function RootLayout({
<link rel="icon" href="/favicon.ico"/> <link rel="icon" href="/favicon.ico"/>
<script src="/static/iconfont.js"></script> <script src="/static/iconfont.js"></script>
</head> </head>
<body style={{margin: 0}}>{children}</body> <body style={{margin: 0,padding:0,maxHeight:"100vh",overflow:"hidden"}}>{children}</body>
</html> </html>
); );
} }

4
src/app/page.module.css
View File

@ -3,8 +3,10 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-sizing: border-box;
height: 100vh;
padding: 6rem; padding: 6rem;
min-height: 100vh;
} }
.description { .description {
display: inherit; display: inherit;

14
src/app/task/drag/layout.tsx
View File

@ -44,14 +44,14 @@ export default function Layout({children}: { children: React.ReactNode }) {
return ( return (
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<div style={{display: 'flex',flexWrap: 'wrap',boxSizing: 'border-box',width:'100vw'}}> <div style={{display: 'flex',flexWrap: 'wrap',boxSizing: 'border-box',width:'100vw'}}>
{/* 不紧急不重要 */}
<DroppableTable tableCode='1' taskList={allTaskList.filter(task => task.priority == '1')}/>
{/* 紧急不重要 */}
<DroppableTable tableCode="2" taskList={allTaskList.filter(task => task.priority == '2')}/>
{/* 不紧急重要 */}
<DroppableTable tableCode='3' taskList={allTaskList.filter(task => task.priority == '3')}/>
{/* 紧急重要 */} {/* 紧急重要 */}
<DroppableTable tableCode='4' taskList={allTaskList.filter(task => task.priority == '4')}/> <DroppableTable tableCode='3' taskList={allTaskList.filter(task => task.priority == '3')}/>
{/* 不紧急重要 */}
<DroppableTable tableCode='2' taskList={allTaskList.filter(task => task.priority == '2')}/>
{/* 紧急不重要 */}
<DroppableTable tableCode="1" taskList={allTaskList.filter(task => task.priority == '1')}/>
{/* 不紧急不重要 */}
<DroppableTable tableCode='0' taskList={allTaskList.filter(task => task.priority == '0')}/>
</div> </div>
</DragDropContext> </DragDropContext>
); );

4
src/app/task/layout.tsx
View File

@ -37,7 +37,9 @@ export default function Layout({children}: { children: React.ReactNode }) {
}}> }}>
<TitleOperation setTaskState={setTaskState} setExpectedStartTime={setExpectedStartTime} <TitleOperation setTaskState={setTaskState} setExpectedStartTime={setExpectedStartTime}
refreshData={refreshData}/> refreshData={refreshData}/>
{children} <div style={{height:"calc(100vh - 42px)",overflow:"auto"}}>
{children}
</div>
</LocalContext.Provider> </LocalContext.Provider>
</ConfigProvider> </ConfigProvider>
</Fragment> </Fragment>

4
src/lib/definitions.ts
View File

@ -42,8 +42,8 @@ export type DataType = TaskMessage&{
key: React.ReactNode; key: React.ReactNode;
type:number; type:number;
action?:React.ReactNode; action?:React.ReactNode;
expectedStartTime?:string; expectedStartTime?:string|Dayjs;
expectedEndTime?:string; expectedEndTime?:string|Dayjs;
expectedTimeRange?:(string|Dayjs|undefined)[]; expectedTimeRange?:(string|Dayjs|undefined)[];
actualStartTime?:Date; actualStartTime?:Date;
actualEndTime?:Date; actualEndTime?:Date;

33
src/ui/task/drag/DroppableTable.tsx
View File

@ -2,9 +2,11 @@
import React, {CSSProperties, useEffect} from "react"; import React, {CSSProperties, useEffect} from "react";
import {Draggable, Droppable} from "react-beautiful-dnd"; import {Draggable, Droppable} from "react-beautiful-dnd";
import {Table, TableProps, Tooltip} from "antd"; import {ConfigProvider, Table, TableProps, Tooltip} from "antd";
import {DataType} from "@/lib/definitions"; import {DataType} from "@/lib/definitions";
import './index.modules.css' import './index.modules.css'
import dayjs, {Dayjs} from "dayjs";
import {taskPriorityList} from "@/lib/task/project/data";
interface DroppableTableProps // extends DragDropContextProps interface DroppableTableProps // extends DragDropContextProps
{ {
@ -16,13 +18,13 @@ export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
const [stateName, setStateName] = React.useState(""); const [stateName, setStateName] = React.useState("");
useEffect(() => { useEffect(() => {
if(props.tableCode=='1'){ if(props.tableCode=='0'){
setStateName('不紧急不重要'); setStateName('不紧急不重要');
}else if (props.tableCode=='2'){ }else if (props.tableCode=='1'){
setStateName('紧急不重要'); setStateName('紧急不重要');
}else if (props.tableCode=='3'){ }else if (props.tableCode=='2'){
setStateName('不紧急重要'); setStateName('不紧急重要');
}else if (props.tableCode=='4'){ }else if (props.tableCode=='3'){
setStateName('紧急重要'); setStateName('紧急重要');
} }
}, [props]); }, [props]);
@ -40,8 +42,12 @@ export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
const getListStyle = (isDraggingOver:boolean) => ({ const getListStyle = (isDraggingOver:boolean) => ({
background: isDraggingOver ? "lightblue" : "lightgrey", background: isDraggingOver ? "lightblue" : "lightgrey",
overflow:'hidden'
}); });
function isDayjs(obj: unknown): obj is Dayjs {
return obj != null && typeof (obj as Dayjs).format === 'function';
}
// 渲染表格行 // 渲染表格行
// @ts-ignore // @ts-ignore
@ -71,8 +77,8 @@ export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
<td>{record.name}</td> <td>{record.name}</td>
<td>{record?.description}</td> <td>{record?.description}</td>
<td>{record.state}</td> <td>{record.state}</td>
<td>起:{record.expectedStartTime}<br/> <td>起:{record.expectedStartTime? dayjs(record.expectedStartTime).format("YYYY-MM-DD HH:mm") :""}<br/>
止:{record.expectedEndTime}</td> 止:{record.expectedStartTime? dayjs(record.expectedStartTime).format("YYYY-MM-DD HH:mm") : ""}</td>
</tr> </tr>
)} )}
</Draggable> </Draggable>
@ -85,13 +91,23 @@ export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
}; };
return ( return (
<Droppable droppableId={props.tableCode} key={props.tableCode}> <Droppable droppableId={props.tableCode} key={props.tableCode} >
{(provided,snapshot) => ( {(provided,snapshot) => (
<div ref={provided.innerRef} <div ref={provided.innerRef}
{...provided.droppableProps} {...provided.droppableProps}
style={getListStyle(snapshot.isDraggingOver)} style={getListStyle(snapshot.isDraggingOver)}
className="droppable-table" className="droppable-table"
> >
<ConfigProvider
theme={{
components: {
Table: {
headerBg: taskPriorityList.find((item) => item.code === props.tableCode)?.color
/* 这里是你的组件 token */
},
},
}}
>
<Table<DataType> <Table<DataType>
dataSource={props.taskList} dataSource={props.taskList}
scroll={calculateScrollHeight()} scroll={calculateScrollHeight()}
@ -151,6 +167,7 @@ export const DroppableTable: React.FC<DroppableTableProps> = (props) => {
}} }}
pagination={false} pagination={false}
/> />
</ConfigProvider>
{provided.placeholder} {provided.placeholder}
</div> </div>
)} )}

2
src/ui/task/project/TreeTablePro.tsx
View File

@ -289,7 +289,7 @@ const TreeTablePro: React.FC = () => {
} }
}} }}
dateFormatter="string" dateFormatter="string"
scroll={{y: 580}} // scroll={{y: 580}}
// headerTitle="任务管理" // headerTitle="任务管理"
toolBarRender={() => toolBarRenderList}> toolBarRender={() => toolBarRenderList}>
</ProTable> </ProTable>