10. 数学文化与数学史

功能简介：展示数学发展史上的重要事件、数学家及其贡献，通过时间轴和互动展示，介绍数学文化的发展历程。支持按时期、地区筛选，帮助学生了解数学的历史背景和文化价值。

ArkTS代码：

// 定义类型接口
interface Mathematician {
  name: string
  period: string
  region: string
  years: string
  contribution: string
}

interface Event {
  year: string
  event: string
  period: string
  region: string
}

interface MathematicianInfo {
  name: string
  years: string
  region: string
  contribution: string
}

@Entry
@Component
struct MathCulture {
  @State private period: string = 'ancient'
  @State private region: string = 'all'
  @State private mathematicians: Array<Mathematician> = []
  @State private selectedMathematician: string = ''
  @State private selectedInfo: MathematicianInfo = {name: '', years: '', region: '', contribution: ''}
  @State private events: Array<Event> = []
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Column() {
      Text('📚 数学文化与数学史')
        .fontSize(24).fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

      Text('时期筛选')
        .fontSize(18).fontWeight(FontWeight.Bold)
        .margin({ bottom: 10 })

      Row() {
        Button('古代')
          .width(80)
          .onClick(() => { this.period = 'ancient'; this.loadData() })
        Button('中世纪')
          .width(80)
          .onClick(() => { this.period = 'medieval'; this.loadData() })
        Button('近代')
          .width(80)
          .onClick(() => { this.period = 'modern'; this.loadData() })
        Button('现代')
          .width(80)
          .onClick(() => { this.period = 'contemporary'; this.loadData() })
        Button('全部')
          .width(80)
          .onClick(() => { this.period = 'all'; this.loadData() })
      }
      .margin({ bottom: 20 })

      Text('地区筛选')
        .fontSize(18).fontWeight(FontWeight.Bold)
        .margin({ bottom: 10 })

      Row() {
        Button('全部')
          .width(80)
          .onClick(() => { this.region = 'all'; this.loadData() })
        Button('欧洲')
          .width(80)
          .onClick(() => { this.region = 'europe'; this.loadData() })
        Button('亚洲')
          .width(80)
          .onClick(() => { this.region = 'asia'; this.loadData() })
        Button('其他')
          .width(80)
          .onClick(() => { this.region = 'other'; this.loadData() })
      }
      .margin({ bottom: 20 })

      Text('数学发展时间轴')
        .fontSize(18).fontWeight(FontWeight.Bold)
        .margin({ bottom: 10 })

      Canvas(this.context)
        .width(400).height(200)
        .backgroundColor('#f5f5f5')
        .onReady(() => this.drawTimeline())

      Text('著名数学家')
        .fontSize(18).fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 10 })

      List() {
        ForEach(this.mathematicians, (mathematician: Mathematician) => {
          ListItem() {
            Row() {
              Text(mathematician.name)
                .fontSize(16)
                .fontWeight(FontWeight.Bold)
              Text(mathematician.years)
                .fontSize(14)
                .fontColor('#666')
                .margin({ left: 10 })
              Text(mathematician.region)
                .fontSize(14)
                .fontColor('#666')
                .margin({ left: 10 })
            }
            .padding(10)
            .backgroundColor('#f0f0f0')
            .borderRadius(5)
            .onClick(() => this.selectMathematician(mathematician))
          }
        })
      }
      .width('100%')
      .height(200)

      if (this.selectedMathematician) {
        Text('数学家详情')
          .fontSize(18).fontWeight(FontWeight.Bold)
          .margin({ top: 20, bottom: 10 })

        Text(this.selectedInfo.name)
          .fontSize(16).fontWeight(FontWeight.Bold)
          .fontColor('#2196F3')
        Text(`年代: ${this.selectedInfo.years}`)
          .fontSize(14).fontColor('#666')
        Text(`地区: ${this.selectedInfo.region}`)
          .fontSize(14).fontColor('#666')
        Text('主要贡献:')
          .fontSize(14).fontWeight(FontWeight.Bold)
          .margin({ top: 10 })
        Text(this.selectedInfo.contribution)
          .fontSize(14).fontColor('#666')
          .textAlign(TextAlign.Start)
          .margin({ top: 5 })
      }

      Text('数学发展重要事件')
        .fontSize(18).fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 10 })

      List() {
        ForEach(this.events, (event: Event) => {
          ListItem() {
            Row() {
              Text(event.year)
                .fontSize(14)
                .fontWeight(FontWeight.Bold)
                .width(80)
              Text(event.event)
                .fontSize(14)
                .fontColor('#666')
            }
            .padding(10)
            .backgroundColor('#f0f0f0')
            .borderRadius(5)
          }
        })
      }
      .width('100%')
      .height(200)
    }
    .padding(20)
  }

  private loadData() {
    // 加载数学家数据
    this.mathematicians = []
    const allMathematicians: Array<Mathematician> = [
      {name: '毕达哥拉斯', period: 'ancient', region: 'europe', years: '约前580-前500', contribution: '毕达哥拉斯定理（勾股定理），数论的创始人，提出"万物皆数"的思想'},
      {name: '欧几里得', period: 'ancient', region: 'europe', years: '约前330-前275', contribution: '几何之父，著有《几何原本》，建立了欧几里得几何体系，奠定了几何学的基础'},
      {name: '阿基米德', period: 'ancient', region: 'europe', years: '前287-前212', contribution: '发现浮力定律，计算圆周率，发明阿基米德螺线，在数学和物理学领域有重大贡献'},
      {name: '刘徽', period: 'ancient', region: 'asia', years: '约225-295', contribution: '中国古代数学家，著有《九章算术注》，提出割圆术，计算圆周率到3.1416'},
      {name: '花拉子米', period: 'medieval', region: 'asia', years: '约780-850', contribution: '阿拉伯数学家，代数之父，著有《代数学》，引入印度数字系统到欧洲'},
      {name: '斐波那契', period: 'medieval', region: 'europe', years: '约1170-1250', contribution: '引入印度-阿拉伯数字到欧洲，发现斐波那契数列，著有《算盘书》'},
      {name: '牛顿', period: 'modern', region: 'europe', years: '1643-1727', contribution: '发明微积分，提出万有引力定律，著有《自然哲学的数学原理》，奠定经典力学基础'},
      {name: '莱布尼茨', period: 'modern', region: 'europe', years: '1646-1716', contribution: '独立发明微积分，提出二进制，对计算机科学有深远影响'},
      {name: '欧拉', period: 'modern', region: 'europe', years: '1707-1783', contribution: '数学全才，在数论、微积分、图论等领域有重大贡献，提出欧拉公式'},
      {name: '高斯', period: 'contemporary', region: 'europe', years: '1777-1855', contribution: '数学王子，在数论、代数、几何等领域有重大贡献，提出高斯分布'},
      {name: '黎曼', period: 'contemporary', region: 'europe', years: '1826-1866', contribution: '黎曼几何的创始人，提出黎曼猜想，对相对论的发展有重要影响'},
      {name: '希尔伯特', period: 'contemporary', region: 'europe', years: '1862-1943', contribution: '提出希尔伯特问题，在数学基础、代数、几何等领域有重大贡献'}
    ]

    // 过滤数学家数据
    for (let i = 0; i < allMathematicians.length; i++) {
      const mat = allMathematicians[i]
      const periodMatch = this.period === 'all' || mat.period === this.period
      const regionMatch = this.region === 'all' || mat.region === this.region
      if (periodMatch && regionMatch) {
        this.mathematicians.push(mat)
      }
    }

    // 加载重要事件数据
    this.events = []
    const allEvents: Array<Event> = [
      {year: '前3000', event: '古埃及人使用十进制计数', period: 'ancient', region: 'other'},
      {year: '前2000', event: '古巴比伦人发明六十进制', period: 'ancient', region: 'asia'},
      {year: '前500', event: '毕达哥拉斯提出勾股定理', period: 'ancient', region: 'europe'},
      {year: '前300', event: '欧几里得著《几何原本》', period: 'ancient', region: 'europe'},
      {year: '263', event: '刘徽注《九章算术》', period: 'ancient', region: 'asia'},
      {year: '820', event: '花拉子米著《代数学》', period: 'medieval', region: 'asia'},
      {year: '1202', event: '斐波那契著《算盘书》', period: 'medieval', region: 'europe'},
      {year: '1665', event: '牛顿发明微积分', period: 'modern', region: 'europe'},
      {year: '1687', event: '牛顿发表《自然哲学的数学原理》', period: 'modern', region: 'europe'},
      {year: '1748', event: '欧拉发表《无穷分析引论》', period: 'modern', region: 'europe'},
      {year: '1801', event: '高斯发表《算术研究》', period: 'contemporary', region: 'europe'},
      {year: '1854', event: '黎曼提出黎曼几何', period: 'contemporary', region: 'europe'},
      {year: '1900', event: '希尔伯特提出23个数学问题', period: 'contemporary', region: 'europe'}
    ]

    // 过滤事件数据
    for (let i = 0; i < allEvents.length; i++) {
      const event = allEvents[i]
      const periodMatch = this.period === 'all' || event.period === this.period
      const regionMatch = this.region === 'all' || event.region === this.region
      if (periodMatch && regionMatch) {
        this.events.push(event)
      }
    }

    // 清空选中的数学家
    this.selectedMathematician = ''
    this.selectedInfo = {name: '', years: '', region: '', contribution: ''}

    // 绘制时间轴
    this.drawTimeline()
  }

  private selectMathematician(mathematician: Mathematician) {
    this.selectedMathematician = mathematician.name
    this.selectedInfo = {
      name: mathematician.name,
      years: mathematician.years,
      region: this.getRegionName(mathematician.region),
      contribution: mathematician.contribution
    }
  }

  private getRegionName(region: string): string {
    switch (region) {
      case 'europe': return '欧洲'
      case 'asia': return '亚洲'
      case 'other': return '其他'
      default: return '未知'
    }
  }

  private drawTimeline() {
    const ctx = this.context
    const width = 400
    const height = 200
    
    // 清空画布
    ctx.clearRect(0, 0, width, height)
    
    // 绘制时间轴
    const timelineY = height / 2
    ctx.beginPath()
    ctx.moveTo(50, timelineY)
    ctx.lineTo(width - 50, timelineY)
    ctx.strokeStyle = '#2196F3'
    ctx.lineWidth = 2
    ctx.stroke()
    
    // 绘制时间点
    if (this.events.length > 0) {
      const step = (width - 100) / (this.events.length - 1)
      
      for (let i = 0; i < this.events.length; i++) {
        const x = 50 + i * step
        
        // 绘制时间点
        ctx.beginPath()
        ctx.arc(x, timelineY, 5, 0, 2 * Math.PI)
        ctx.fillStyle = '#2196F3'
        ctx.fill()
        ctx.strokeStyle = '#000'
        ctx.stroke()
        
        // 绘制年份标签
        ctx.font = '12px Arial'
        ctx.fillStyle = '#000'
        ctx.textAlign = 'center'
        ctx.fillText(this.events[i].year, x, timelineY + 20)
        
        // 绘制事件标签
        ctx.fillText(this.events[i].event.substring(0, 10) + '...', x, timelineY - 15)
      }
    }
  }
}