{"_id":"@agions/gantt-flow","_rev":"2-46dccde0fd4d0fddaa5ab87bc0dcfdbf","name":"@agions/gantt-flow","dist-tags":{"latest":"1.1.4"},"versions":{"1.1.3":{"name":"@agions/gantt-flow","version":"1.1.3","keywords":["甘特图","gantt-chart","gantt","gantt-chart-react","gantt-chart-vue","gantt-flow","typescript","project-management","cross-framework"],"author":{"name":"agions"},"license":"MIT","_id":"@agions/gantt-flow@1.1.3","maintainers":[{"name":"agions","email":"1051736049@qq.com"}],"homepage":"https://agions.github.io/gantt-flow","bugs":{"url":"https://github.com/Agions/gantt-flow/issues"},"dist":{"shasum":"059acf885c132a2fbf3a23db0c819498619f1022","tarball":"https://registry.npmjs.org/@agions/gantt-flow/-/gantt-flow-1.1.3.tgz","fileCount":15,"integrity":"sha512-Vm4B7VCL39Fg5lBxItUtQmBR3Uie/r7VbZGv+9+UywRWH/d/vcUqXCoLGtC1UIawkp53I/aS0Ioxmn5JzSHYJg==","signatures":[{"sig":"MEQCIAzwc4xuIs3vGEU/MORph4BilXiR2lKH3/3NRsQVZjriAiAyW2tq1Jx1J5NN/Vgh2WayMmHFPX3S0pG+4G8kX3fW7Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5436709},"main":"dist/react/index.js","types":"dist/react/index.d.ts","module":"dist/react/index.esm.js","engines":{"node":">=14.0.0"},"exports":{".":{"types":"./dist/react/index.d.ts","import":"./dist/react/index.esm.js","require":"./dist/react/index.js"},"./vue":{"types":"./dist/vue/index.d.ts","import":"./dist/vue/index.esm.js","require":"./dist/vue/index.js"},"./react":{"types":"./dist/react/index.d.ts","import":"./dist/react/index.esm.js","require":"./dist/react/index.js"},"./style":"./dist/style.css"},"gitHead":"d7bffb7030d8e22f01d4cdf608cc2c416673fc3a","scripts":{"test":"react-scripts test","build":"npm run build:react && npm run build:styles","eject":"react-scripts eject","start":"react-scripts start","deploy":"gh-pages -d build","build:vue":"rollup -c rollup.config.vue.js --bundleConfigAsCjs","predeploy":"react-scripts build","build:react":"rollup -c rollup.config.react.js --bundleConfigAsCjs","build:styles":"rollup -c rollup.config.styles.js --bundleConfigAsCjs","check-compat":"npx browserslist","prepublishOnly":"npm run build"},"_npmUser":{"name":"agions","email":"1051736049@qq.com"},"repository":{"url":"git+https://github.com/Agions/gantt-flow.git","type":"git"},"_npmVersion":"11.7.0","description":"GanttFlow - 一个功能强大、流畅的甘特图组件，同时支持React和Vue，可用于项目管理和任务进度展示","directories":{},"_nodeVersion":"25.2.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"xlsx":"^0.18.5","jspdf":"^2.5.2","react":">=16.8.0","react-dom":">=16.8.0","html2canvas":"^1.4.1","html-to-image":"^1.11.11","react-scripts":"5.0.1","@babel/runtime":"^7.22.6","react-router-dom":"^7.3.0"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"ajv":"^8.17.1","jspdf":"^2.5.2","tslib":"^2.6.0","rollup":"^3.26.3","core-js":"^3.31.1","postcss":"^8.4.26","gh-pages":"^5.0.0","typescript":"^4.9.5","@babel/core":"^7.22.9","@types/jest":"^30.0.0","@types/xlsx":"^0.0.35","@types/react":"^18.2.15","ajv-keywords":"^5.1.0","autoprefixer":"^10.4.14","browserslist":"^4.21.9","@types/lodash":"^4.17.16","html-to-image":"^1.11.11","@types/react-dom":"^18.2.7","@babel/preset-env":"^7.22.9","@vue/compiler-sfc":"^3.3.4","rollup-plugin-dts":"^5.3.0","rollup-plugin-vue":"^6.0.0","@babel/compat-data":"^7.22.9","@babel/preset-react":"^7.22.5","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-terser":"^0.4.3","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^25.0.3","@babel/preset-typescript":"^7.22.5","@rollup/plugin-typescript":"^11.1.2","@rollup/plugin-node-resolve":"^15.1.0","@babel/plugin-transform-runtime":"^7.22.9"},"peerDependencies":{"vue":">=3.0.0","react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/gantt-flow_1.1.3_1766121720356_0.9153701318035852","host":"s3://npm-registry-packages-npm-production"}},"1.1.4":{"name":"@agions/gantt-flow","version":"1.1.4","description":"GanttFlow - 一个功能强大、流畅的甘特图组件，同时支持React和Vue，可用于项目管理和任务进度展示","main":"dist/react/index.js","module":"dist/react/index.esm.js","types":"dist/react/index.d.ts","exports":{".":{"types":"./dist/react/index.d.ts","import":"./dist/react/index.esm.js","require":"./dist/react/index.js"},"./react":{"types":"./dist/react/index.d.ts","import":"./dist/react/index.esm.js","require":"./dist/react/index.js"},"./vue":{"types":"./dist/vue/index.d.ts","import":"./dist/vue/index.esm.js","require":"./dist/vue/index.js"},"./style":"./dist/style.css"},"scripts":{"dev":"vite","start":"vite","build":"npm run build:react && npm run build:styles","build:react":"rollup -c rollup.config.react.js --bundleConfigAsCjs","build:vue":"rollup -c rollup.config.vue.js --bundleConfigAsCjs","build:styles":"rollup -c rollup.config.styles.js --bundleConfigAsCjs","build:demo":"vite build","preview":"vite preview","test":"vitest","test:run":"vitest run","test:coverage":"vitest run --coverage","lint":"eslint src --ext .ts,.tsx","prepublishOnly":"npm run build","predeploy":"vite build","deploy":"gh-pages -d build"},"keywords":["gantt","gantt-chart","gantt-flow","gantt-chart-react","gantt-chart-vue","project-management","typescript","react","vue","cross-framework","甘特图"],"author":{"name":"agions"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Agions/gantt-flow.git"},"bugs":{"url":"https://github.com/Agions/gantt-flow/issues"},"homepage":"https://agions.github.io/gantt-flow","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"engines":{"node":">=18.0.0"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0","vue":">=3.0.0"},"peerDependenciesMeta":{"vue":{"optional":true}},"dependencies":{"dompurify":"^3.2.4","exceljs":"^4.4.0","html-to-image":"^1.11.11","html2canvas":"^1.4.1","jspdf":"^4.0.0","lodash":"^4.17.21"},"devDependencies":{"@babel/core":"^7.26.0","@babel/plugin-transform-runtime":"^7.26.0","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.26.0","@babel/preset-typescript":"^7.26.0","@babel/runtime":"^7.26.0","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-node-resolve":"^15.3.1","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.6","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.1.0","@types/lodash":"^4.17.16","@types/node":"^22.15.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.4","@vue/compiler-sfc":"^3.5.26","autoprefixer":"^10.4.20","gh-pages":"^6.3.0","jsdom":"^25.0.1","postcss":"^8.5.0","react":"^18.3.1","react-dom":"^18.3.1","react-router-dom":"^7.11.0","rollup":"^3.29.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-vue":"^6.0.0","tslib":"^2.8.0","typescript":"^5.7.3","vite":"^6.0.7","vitest":"^3.0.4"},"gitHead":"f763461593269c81adb1c3e5ac83430727032cdd","_id":"@agions/gantt-flow@1.1.4","_nodeVersion":"25.2.1","_npmVersion":"11.7.0","dist":{"integrity":"sha512-c8NwTc8952TKZK4uljM911KtgeHEetK66O0LXavy8AFzmr1kmTXprZET82kPyByrGwb6Jr8GkihiT5h4fl1prg==","shasum":"c2ff6b0b5d40ec98f57ee77a0ad643a38c6506b6","tarball":"https://registry.npmjs.org/@agions/gantt-flow/-/gantt-flow-1.1.4.tgz","fileCount":46,"unpackedSize":5607192,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFtCE/EV0B9CEfLWWkQI/Wy2Faa4wHfuRKurmewancPsAiEAujMC4m/RXdvDERFKThR1ETQTLuSUAXt+awadcpy8ifg="}]},"_npmUser":{"name":"agions","email":"1051736049@qq.com"},"directories":{},"maintainers":[{"name":"agions","email":"1051736049@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gantt-flow_1.1.4_1767532642417_0.9209704562415162"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-19T05:22:00.210Z","modified":"2026-01-04T13:17:22.861Z","1.1.3":"2025-12-19T05:22:00.628Z","1.1.4":"2026-01-04T13:17:22.640Z"},"bugs":{"url":"https://github.com/Agions/gantt-flow/issues"},"author":{"name":"agions"},"license":"MIT","homepage":"https://agions.github.io/gantt-flow","keywords":["gantt","gantt-chart","gantt-flow","gantt-chart-react","gantt-chart-vue","project-management","typescript","react","vue","cross-framework","甘特图"],"repository":{"type":"git","url":"git+https://github.com/Agions/gantt-flow.git"},"description":"GanttFlow - 一个功能强大、流畅的甘特图组件，同时支持React和Vue，可用于项目管理和任务进度展示","maintainers":[{"name":"agions","email":"1051736049@qq.com"}],"readme":"# GanttFlow - 甘特图组件\n\nGanttFlow 是一个功能强大、高性能的甘特图组件，支持任务管理、依赖关系、多种视图模式和丰富的交互功能，同时支持 React 和 Vue。\n\n![版本](https://img.shields.io/npm/v/@agions/gantt-flow.svg)\n![下载量](https://img.shields.io/npm/dm/@agions/gantt-flow.svg)\n![许可证](https://img.shields.io/npm/l/@agions/gantt-flow.svg)\n\n## 特性\n\n- 🚀 **高性能渲染**：使用虚拟滚动和缓存优化，轻松处理数千条任务数据\n- 📊 **多视图模式**：支持日、周、月、季度和年视图\n- 🔄 **拖拽与调整**：拖动任务或调整任务时长，带有磁吸效果和辅助线\n- 🎯 **差异化任务卡片**：区分普通任务、里程碑和项目，提供丰富的微交互\n- 🔗 **依赖关系**：支持任务间的多种依赖关系\n- 🔙 **撤销/重做**：完整的操作历史记录\n- 💾 **导出功能**：支持导出为 PNG、PDF 或 Excel\n- 🎨 **自适应主题系统**：支持日/夜间模式自动切换，可完全自定义样式和主题\n- 📱 **响应式设计**：适配各种屏幕尺寸\n- 🧮 **自适应密度布局**：根据任务数量自动调整布局密度\n- 🌍 **国际化支持**：支持多语言和本地化\n- 🧩 **框架通用**：同时支持 React 和 Vue\n\n## 效果展示\n\n查看 [在线演示](https://agions.github.io/gantt-flow/)\n\n## 快速开始\n\n### 安装\n\n```bash\n# npm\nnpm install @agions/gantt-flow\n\n# yarn\nyarn add @agions/gantt-flow\n\n# pnpm\npnpm add @agions/gantt-flow\n```\n\n### React 使用\n\n```jsx\nimport React, { useRef } from \"react\"\nimport { EnhancedGanttChart } from \"@agions/gantt-flow\"\nimport \"@agions/gantt-flow/style\"\n\nfunction App() {\n  const ganttRef = useRef(null)\n\n  // 示例任务数据\n  const tasks = [\n    {\n      id: \"1\",\n      name: \"需求分析\",\n      start: \"2023-03-01\",\n      end: \"2023-03-05\",\n      progress: 100,\n      type: \"task\",\n    },\n    {\n      id: \"2\",\n      name: \"设计阶段\",\n      start: \"2023-03-06\",\n      end: \"2023-03-10\",\n      progress: 80,\n      type: \"task\",\n    },\n    {\n      id: \"3\",\n      name: \"发布里程碑\",\n      start: \"2023-03-15\",\n      end: \"2023-03-15\",\n      progress: 0,\n      type: \"milestone\",\n    },\n  ]\n\n  // 示例依赖关系\n  const dependencies = [\n    {\n      fromId: \"1\",\n      toId: \"2\",\n      type: \"finish_to_start\",\n    },\n    {\n      fromId: \"2\",\n      toId: \"3\",\n      type: \"finish_to_start\",\n    },\n  ]\n\n  return (\n    <div style={{ height: \"500px\" }}>\n      <EnhancedGanttChart\n        ref={ganttRef}\n        tasks={tasks}\n        dependencies={dependencies}\n        viewMode='week'\n        onTaskClick={(task) => console.log(\"任务点击:\", task)}\n        options={{\n          theme: \"light\", // 或 'dark', 或自定义主题对象\n          enableDragGuides: true,\n          adaptiveDensity: true,\n        }}\n      />\n\n      {/* 示例工具栏 */}\n      <div className='toolbar'>\n        <button onClick={() => ganttRef.current.undo()}>撤销</button>\n        <button onClick={() => ganttRef.current.redo()}>重做</button>\n        <button onClick={() => ganttRef.current.exportAsPNG()}>导出PNG</button>\n        <button onClick={() => ganttRef.current.toggleTheme()}>切换主题</button>\n      </div>\n    </div>\n  )\n}\n```\n\n### Vue 使用\n\n```vue\n<template>\n  <div style=\"height: 500px\">\n    <GanttChart\n      ref=\"ganttChart\"\n      :tasks=\"tasks\"\n      :dependencies=\"dependencies\"\n      view-mode=\"week\"\n      @task-click=\"onTaskClick\"\n      :options=\"options\"\n    />\n\n    <div class=\"toolbar\">\n      <button @click=\"undo\">撤销</button>\n      <button @click=\"redo\">重做</button>\n      <button @click=\"exportPNG\">导出PNG</button>\n      <button @click=\"toggleTheme\">切换主题</button>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from \"vue\"\nimport { GanttChart } from \"@agions/gantt-flow/vue\"\nimport \"@agions/gantt-flow/style\"\n\nconst ganttChart = ref(null)\n\nconst tasks = ref([\n  {\n    id: \"1\",\n    name: \"需求分析\",\n    start: \"2023-03-01\",\n    end: \"2023-03-05\",\n    progress: 100,\n    type: \"task\",\n  },\n  {\n    id: \"2\",\n    name: \"设计阶段\",\n    start: \"2023-03-06\",\n    end: \"2023-03-10\",\n    progress: 80,\n    type: \"task\",\n  },\n  {\n    id: \"3\",\n    name: \"发布里程碑\",\n    start: \"2023-03-15\",\n    end: \"2023-03-15\",\n    progress: 0,\n    type: \"milestone\",\n  },\n])\n\nconst dependencies = ref([\n  {\n    fromId: \"1\",\n    toId: \"2\",\n    type: \"finish_to_start\",\n  },\n  {\n    fromId: \"2\",\n    toId: \"3\",\n    type: \"finish_to_start\",\n  },\n])\n\nconst options = ref({\n  theme: \"light\", // 或 'dark', 或自定义主题对象\n  enableDragGuides: true,\n  adaptiveDensity: true,\n})\n\nconst onTaskClick = (task) => {\n  console.log(\"任务点击:\", task)\n}\n\nconst undo = () => ganttChart.value.undo()\nconst redo = () => ganttChart.value.redo()\nconst exportPNG = () => ganttChart.value.exportAsPNG()\nconst toggleTheme = () => ganttChart.value.toggleTheme()\n</script>\n```\n\n## 核心 API\n\n### `<EnhancedGanttChart>` 属性\n\n| 属性                   | 类型                                      | 默认值 | 描述                                   |\n| ---------------------- | ----------------------------------------- | ------ | -------------------------------------- |\n| `tasks`                | Task[]                                    | []     | 任务数据列表                           |\n| `dependencies`         | Dependency[]                              | []     | 依赖关系列表                           |\n| `resources`            | Resource[]                                | []     | 资源列表                               |\n| `viewMode`             | 'day'\\|'week'\\|'month'\\|'quarter'\\|'year' | 'day'  | 视图模式                               |\n| `sampleCount`          | number                                    | 10     | 如果不提供 tasks，则生成的示例任务数量 |\n| `options`              | GanttOptions                              | {}     | 详细配置选项                           |\n| `onTasksChange`        | (tasks: Task[]) => void                   | -      | 任务变更回调                           |\n| `onDependenciesChange` | (deps: Dependency[]) => void              | -      | 依赖变更回调                           |\n| `onTaskClick`          | (task: Task) => void                      | -      | 任务点击回调                           |\n| `onTaskDoubleClick`    | (task: Task) => void                      | -      | 任务双击回调                           |\n| `onDateRangeChange`    | (range: DateRange) => void                | -      | 日期范围变更回调                       |\n\n### `GanttOptions` 配置项\n\n```typescript\n{\n  // 主题设置\n  theme: 'light' | 'dark' | ThemeConfig, // 可以是预设主题或自定义主题配置\n\n  // 新增功能开关\n  enableDragGuides: true,   // 启用拖拽辅助线和磁吸效果\n  adaptiveDensity: true,    // 启用自适应密度布局\n  showTaskDetails: true,    // 显示任务详情\n\n  // 原有功能开关\n  allowTaskDrag: true,        // 允许任务拖拽\n  allowTaskResize: true,      // 允许任务调整大小\n  readOnly: false,            // 只读模式\n  enableDependencies: true,   // 启用依赖关系\n  showProgress: true,         // 显示进度条\n  showWeekends: true,         // 显示周末\n  showToday: true,            // 显示今天线\n\n  // 其他配置\n  dateFormat: 'YYYY-MM-DD',   // 日期格式\n  columnWidth: 40,            // 列宽(像素)\n  rowHeight: 40,              // 行高(像素)\n  workingDays: [1,2,3,4,5],   // 工作日(1-5表示周一至周五)\n}\n```\n\n### 主题系统\n\n新增的主题系统支持：\n\n```typescript\n// 预设主题\noptions: {\n  theme: 'light' | 'dark' // 使用预设主题\n}\n\n// 自定义主题\noptions: {\n  theme: {\n    colors: {\n      primary: '#1890ff',\n      secondary: '#13c2c2',\n      success: '#52c41a',\n      warning: '#faad14',\n      error: '#f5222d',\n      background: '#ffffff',\n      surface: '#f5f5f5',\n      text: '#000000',\n      border: '#e8e8e8',\n      // 更多颜色...\n    },\n    spacing: {\n      unit: 8, // 基础间距单位\n      // 更多间距配置...\n    },\n    typography: {\n      fontFamily: 'Roboto, sans-serif',\n      fontSize: {\n        small: 12,\n        medium: 14,\n        large: 16\n      },\n      fontWeight: {\n        regular: 400,\n        medium: 500,\n        bold: 700\n      }\n    },\n    animation: {\n      duration: 300, // ms\n      easing: 'cubic-bezier(0.4, 0, 0.2, 1)'\n    },\n    shadows: {\n      small: '0 2px 4px rgba(0,0,0,0.1)',\n      medium: '0 4px 8px rgba(0,0,0,0.1)',\n      large: '0 8px 16px rgba(0,0,0,0.1)'\n    }\n  }\n}\n```\n\n### 方法\n\n通过 `ref` 访问组件实例可以使用以下方法：\n\n- `addTask(task: Partial<Task>)`: 添加新任务\n- `updateTask(task: Task)`: 更新任务\n- `removeTask(taskId: string)`: 删除任务\n- `setViewMode(mode: ViewMode)`: 设置视图模式\n- `scrollToTask(taskId: string)`: 滚动到指定任务\n- `exportAsPNG(options?: ExportOptions)`: 导出为 PNG\n- `exportAsPDF(options?: ExportOptions)`: 导出为 PDF\n- `undo()`: 撤销操作\n- `redo()`: 重做操作\n- `toggleTheme()`: 切换主题（如果使用预设主题）\n- `setTheme(theme: 'light' | 'dark' | ThemeConfig)`: 设置特定主题\n\n## 数据结构\n\n### Task (任务)\n\n```typescript\ninterface Task {\n  id: string // 唯一标识符\n  name: string // 任务名称\n  start: string // 开始日期 (YYYY-MM-DD)\n  end: string // 结束日期 (YYYY-MM-DD)\n  progress?: number // 进度 (0-100)\n  type?: \"task\" | \"milestone\" | \"project\" // 任务类型，默认为 'task'\n  parentId?: string // 父任务ID (可选)\n  color?: string // 自定义颜色 (可选)\n  collapsed?: boolean // 是否折叠子任务 (可选)\n  metadata?: any // 自定义元数据 (可选)\n}\n```\n\n### Dependency (依赖关系)\n\n```typescript\ninterface Dependency {\n  fromId: string // 源任务ID\n  toId: string // 目标任务ID\n  type:\n    | \"finish_to_start\"\n    | \"start_to_start\"\n    | \"finish_to_finish\"\n    | \"start_to_finish\"\n  metadata?: any // 自定义元数据 (可选)\n}\n```\n\n### Resource (资源)\n\n```typescript\ninterface Resource {\n  id: string // 唯一标识符\n  name: string // 资源名称\n  color?: string // 自定义颜色 (可选)\n  capacity?: number // 资源容量 (可选, 0-100)\n  metadata?: any // 自定义元数据 (可选)\n}\n```\n\n## 新增功能详解\n\n### 1. 自适应主题系统\n\n自动适应用户系统的明暗模式偏好，或手动切换主题：\n\n```jsx\n// React 中切换主题\nconst toggleTheme = () => {\n  ganttRef.current.toggleTheme()\n}\n\n// 或直接设置特定主题\nconst setDarkTheme = () => {\n  ganttRef.current.setTheme(\"dark\")\n}\n\n// 设置自定义主题\nconst setCustomTheme = () => {\n  ganttRef.current.setTheme({\n    colors: {\n      primary: \"#6200ee\",\n      // 其他颜色...\n    },\n    // 其他主题配置...\n  })\n}\n```\n\n### 2. 任务卡片设计\n\n针对不同类型的任务提供差异化设计：\n\n- **普通任务**：完整显示进度条、名称和可拖动/调整大小\n- **里程碑**：特殊的菱形设计，突出显示重要时间点\n- **项目**：突出显示轮廓，包含子任务汇总信息\n\n任务卡片包含丰富的微交互效果，如悬停放大、拖拽时的动画和点击反馈。\n\n### 3. 拖拽优化\n\n拖拽体验升级：\n\n- **磁吸效果**：当任务接近其他任务边界或时间线时自动吸附\n- **动态辅助线**：拖拽时显示对齐辅助线\n- **视觉反馈**：拖拽和调整大小时的实时视觉反馈\n\n```jsx\n// 启用拖拽辅助功能\n<EnhancedGanttChart\n  // ...其他属性\n  options={{\n    enableDragGuides: true,\n    // ...其他选项\n  }}\n/>\n```\n\n### 4. 自适应密度布局\n\n根据任务数量自动调整布局密度，支持三种密度模式：\n\n- **紧凑模式**：适用于大量任务，行高更小，信息更精简\n- **正常模式**：平衡显示任务细节和整体视图\n- **舒适模式**：适用于任务较少时，提供更多细节和更大的交互区域\n\n```jsx\n// 启用自适应密度布局\n<EnhancedGanttChart\n  // ...其他属性\n  options={{\n    adaptiveDensity: true,\n    // 可选：自定义密度阈值\n    densityConfig: {\n      compactThreshold: 100, // 任务数量超过100启用紧凑模式\n      comfortableThreshold: 20, // 任务数量少于20启用舒适模式\n    },\n    // ...其他选项\n  }}\n/>\n```\n\n## 示例\n\n详细示例请查看 `src/examples/UsageExamples.md` 文件或访问[在线演示](https://agions.github.io/gantt-flow/)\n\n## 开发与发布指南\n\n### 开发流程\n\n1. 克隆仓库\n\n   ```bash\n   git clone https://github.com/Agions/gantt-flow.git\n   cd gantt-flow\n   ```\n\n2. 安装依赖\n\n   ```bash\n   npm install\n   ```\n\n3. 启动开发服务器\n\n   ```bash\n   npm start\n   ```\n\n4. 构建生产版本\n\n   ```bash\n   npm run build\n   ```\n\n5. 运行测试\n   ```bash\n   npm test\n   ```\n\n### 发布到 npm\n\n1. 确保已登录 npm\n\n   ```bash\n   npm login\n   ```\n\n2. 更新版本号（根据语义化版本规则）\n\n   ```bash\n   # 补丁版本（修复 bug）\n   npm version patch\n\n   # 小版本（新增功能）\n   npm version minor\n\n   # 大版本（不兼容的 API 变更）\n   npm version major\n   ```\n\n3. 更新 CHANGELOG.md\n\n   - 添加新功能、改进和修复的详细描述\n   - 按照 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.0.0/) 格式编写\n\n4. 提交更改\n\n   ```bash\n   git add CHANGELOG.md package.json\n   git commit -m \"更新版本号和日志\"\n   git push origin main\n   ```\n\n5. 发布到 npm\n   ```bash\n   npm publish\n   ```\n\n### 常见问题与解决方案\n\n#### npm 发布错误：403 Forbidden\n\n**问题描述**：\n\n```\nnpm error 403 In most cases, you or one of your dependencies are requesting\nnpm error 403 a package version that is forbidden by your security policy, or\nnpm error 403 on a server you do not have access to.\n```\n\n**解决方案**：\n\n1. **检查 .npmrc 配置**\n\n   - 确保只有一个有效的 registry 配置\n   - 移除无效的 GitHub Package Registry 配置\n   - 验证 npm token 是否有效\n\n   ```bash\n   # 查看当前配置\n   cat ~/.npmrc\n\n   # 修复配置（只保留必要的 npm 配置）\n   echo 'registry=https://registry.npmjs.org/\n   //registry.npmjs.org/:_authToken=YOUR_VALID_TOKEN' > ~/.npmrc\n   ```\n\n2. **检查包名权限**\n\n   - 确保您是该 npm 包的所有者或具有发布权限\n   - 检查包名是否已被其他用户占用\n\n   ```bash\n   # 检查包是否存在\n   npm view gantt-flow\n   ```\n\n3. **检查 npm 登录状态**\n\n   ```bash\n   npm whoami\n   ```\n\n4. **检查网络连接**\n   - 确保可以访问 npm registry\n   ```bash\n   ping registry.npmjs.org\n   ```\n\n#### 其他常见问题\n\n- **构建失败**：确保 Node.js 版本符合要求（>=14.0.0）\n- **测试失败**：运行单个测试文件以定位问题\n  ```bash\n  npm test src/components/gantt-chart/core/utils.test.ts\n  ```\n- **类型错误**：检查 TypeScript 版本和配置\n  ```bash\n  npx tsc --noEmit\n  ```\n\n## 浏览器兼容性\n\n- Chrome (最新版)\n- Firefox (最新版)\n- Safari (最新版)\n- Edge (最新版)\n- IE11 (需要 polyfills)\n\n## 许可证\n\nMIT\n\n## 支持与贡献\n\n如果您有问题或建议，请提交 [issue](https://github.com/Agions/gantt-flow/issues)。\n\n欢迎提交 Pull Request 来改进这个项目。\n","readmeFilename":"README.md"}