refactor: gantt block (#4059)

* refactor: gantt block

* style: style improve

* fix: bug

* fix: bug

packages/plugins/@nocobase/plugin-gantt/src/client/GanttBlockProvider.tsx

@@ -77,12 +77,13 @@ const InternalGanttBlockProvider = (props) => {
 };
 
 export const GanttBlockProvider = (props) => {
-  const params = { filter: props.params.filter, paginate: false, sort: props.fieldNames.start };
+  const params = { filter: props.params.filter, paginate: false, sort: ['id'] };
   const collection = useCollection_deprecated();
 
   if (collection?.tree) {
     params['tree'] = true;
   }
+
   return (
     <div aria-label="block-item-gantt" role="button">
       <BlockProvider name="gantt" {...props} params={params}>
@@ -143,7 +144,6 @@ export const useGanttBlockProps = () => {
       }
     }
   }, [ctx?.service?.loading]);
-  console.log(tasks);
   return {
     fieldNames: ctx.fieldNames,
     timeRange: ctx.timeRange,

packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/gantt.tsx

@@ -13,6 +13,7 @@ import {
   useTableBlockContext,
   useToken,
   withDynamicSchemaProps,
+  useDesignable,
 } from '@nocobase/client';
 import { message } from 'antd';
 import { debounce } from 'lodash';
@@ -99,12 +100,9 @@ export const Gantt: any = withDynamicSchemaProps((props: any) => {
   const { styles } = useStyles();
   const { token } = useToken();
   const api = useAPIClient();
-  const currentTheme = api.auth.getOption('theme');
+  const currentTheme = JSON.parse(api.auth.getOption('theme'))?.uid;
-  const tableRowHeight = currentTheme === 'compact' ? 45 : 55.56;
   const {
-    headerHeight = document.querySelector('.ant-table-thead')?.clientHeight || 0, // 与 antd 表格头部高度一致
     listCellWidth = '155px',
-    rowHeight = tableRowHeight,
     ganttHeight = 0,
     preStepsCount = 1,
     barFill = 60,
@@ -137,6 +135,9 @@ export const Gantt: any = withDynamicSchemaProps((props: any) => {
     expandAndCollapseAll,
     fieldNames,
   } = useProps(props); // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
+  const { designable } = useDesignable();
+  const headerHeight = currentTheme.includes('compact') ? 45 : designable ? 65 : 55;
+  const rowHeight = currentTheme.includes('compact') ? 45 : 65;
   const ctx = useGanttBlockContext();
   const appInfo = useCurrentAppInfo();
   const { t } = useTranslation();
@@ -520,7 +521,10 @@ export const Gantt: any = withDynamicSchemaProps((props: any) => {
           box-shadow: none !important;
         }
         .ant-table-row {
-          height: ${tableRowHeight}px;
+          height: ${rowHeight}px;
+        }
+        .ant-table-thead {
+          height: ${headerHeight}px;
         }
       `)}
     >

packages/plugins/@nocobase/plugin-gantt/src/client/components/gantt/task-gantt-content.tsx

@@ -221,7 +221,10 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
     } else if (action === 'dblclick') {
       !!onDoubleClick && onDoubleClick(task);
     } else if (action === 'click') {
-      !!onClick && onClick(task);
+      const targetElement = event.target as HTMLElement; // 将 event.target 转换为 HTMLElement 类型
+      if (targetElement.tagName === 'rect') {
+        !!onClick && onClick(task);
+      }
     }
     // Change task event start
     else if (action === 'move') {

packages/plugins/@nocobase/plugin-gantt/src/client/components/other/style.tsx

@@ -5,7 +5,7 @@ const useStyles = createStyles(({ token, css }) => {
     scrollWrapper: css`
       overflow: auto;
       position: absolute;
-      bottom: -4px;
+      bottom: -8px;
       max-width: 100%;
       scrollbarWidth: thin;
       height: 1.2rem;

packages/plugins/@nocobase/plugin-gantt/src/client/components/task-item/task-item.tsx

@@ -100,7 +100,7 @@ export const TaskItem: React.FC<TaskItemProps> = (props) => {
       {taskItem}
       <text
         x={isProjectBar ? task.x1 : getX()}
-        y={isProjectBar ? task.y - 8 : isTextInside ? task.y + taskHeight * 0.5 : task.y + taskHeight * 0.65}
+        y={isProjectBar ? task.y - 8 : isTextInside ? task.y + taskHeight * 0.65 : task.y + taskHeight * 0.65}
         className={isProjectBar ? cx('projectLabel') : isTextInside ? cx('barLabel') : cx('barLabelOutside')}
         ref={textRef}
       >