国际化

GanttFlow 支持多语言，可以通过配置实现国际化和本地化。

内置语言

GanttFlow 内置了以下语言支持：

React

import { EnhancedGanttChart } from "@agions/gantt-flow"
import zhCN from "@agions/gantt-flow/locale/zh-CN"
import enUS from "@agions/gantt-flow/locale/en-US"

// 使用中文
<EnhancedGanttChart locale={zhCN} />

// 使用英文
<EnhancedGanttChart locale={enUS} />

Vue

<template>
  <GanttChart :locale="locale" />
</template>

<script setup lang="ts">
import zhCN from "@agions/gantt-flow/locale/zh-CN"

const locale = zhCN
</script>

内置语言包

中文 (zh-CN)

const zhCN = {
  // 任务相关
  task: "任务",
  milestone: "里程碑",
  project: "项目",
  tasks: "任务列表",
  
  // 时间相关
  today: "今天",
  week: "周",
  month: "月",
  quarter: "季度",
  year: "年",
  day: "日",
  weekend: "周末",
  
  // 操作相关
  unplanned: "未计划",
  export: "导出",
  undo: "撤销",
  redo: "重做",
  fitToScreen: "适应屏幕",
  zoomIn: "放大",
  zoomOut: "缩小",
  
  // 状态相关
  noData: "暂无数据",
  loading: "加载中...",
  
  // 日期格式
  dateFormat: "YYYY-MM-DD"
}

英文 (en-US)

const enUS = {
  task: "Task",
  milestone: "Milestone",
  project: "Project",
  tasks: "Tasks",
  today: "Today",
  week: "Week",
  month: "Month",
  quarter: "Quarter",
  year: "Year",
  day: "Day",
  weekend: "Weekend",
  unplanned: "Unplanned",
  export: "Export",
  undo: "Undo",
  redo: "Redo",
  fitToScreen: "Fit to Screen",
  zoomIn: "Zoom In",
  zoomOut: "Zoom Out",
  noData: "No Data",
  loading: "Loading...",
  dateFormat: "YYYY-MM-DD"
}

自定义语言配置

可以通过 locale 属性自定义所有文案：

const customLocale = {
  task: "任务",
  milestone: "里程碑",
  project: "项目",
  today: "今天",
  week: "周",
  month: "月",
  quarter: "季度",
  year: "年",
  day: "日",
  weekend: "周末",
  unplanned: "未计划",
  export: "导出",
  undo: "撤销",
  redo: "重做",
  fitToScreen: "适应屏幕",
  zoomIn: "放大",
  zoomOut: "缩小",
  noData: "暂无数据",
  loading: "加载中...",
  dateFormat: "YYYY-MM-DD"
}

<EnhancedGanttChart locale={customLocale} tasks={tasks} />

自动检测语言

GanttFlow 可以自动根据浏览器语言设置选择对应语言：

import { getBrowserLocale } from "@agions/gantt-flow"

<EnhancedGanttChart locale={getBrowserLocale()} tasks={tasks} />

getBrowserLocale() 会返回：

• zh-CN 如果浏览器语言以 zh 开头
• en-US 默认

日期格式

日期格式可以通过 dateFormat 自定义：

const locales = {
  // ISO 格式（默认）
  iso: { dateFormat: "YYYY-MM-DD" },
  
  // 欧洲格式
  eu: { dateFormat: "DD/MM/YYYY" },
  
  // 美国格式
  us: { dateFormat: "MM/DD/YYYY" },
  
  // 中文格式
  cn: { dateFormat: "YYYY年MM月DD日" },
  
  // 完整中文
  cnFull: { dateFormat: "YYYY-MM-DD" }  // 配合 locale 使用
}

完整示例

import React from "react"
import { EnhancedGanttChart } from "@agions/gantt-flow"
import zhCN from "@agions/gantt-flow/locale/zh-CN"

function App() {
  // 合并自定义配置
  const locale = {
    ...zhCN,
    dateFormat: "YYYY-MM-DD",
    // 添加自定义文案
    assignee: "负责人",
    status: "状态"
  }

  return (
    <div style={{ height: "500px" }}>
      <EnhancedGanttChart
        tasks={tasks}
        locale={locale}
        options={{
          // 主题跟随系统语言
          theme: "auto"
        }}
      />
    </div>
  )
}

RTL 语言支持

对于从右到左阅读的语言（如阿拉伯语、希伯来语）：

<EnhancedGanttChart
  tasks={tasks}
  direction="rtl"  // 从右到左
/>

下一步

• 主题系统 - 自定义组件外观
• 最佳实践 - 工程实践建议