ai-sport/src/app/tab1/tab1.page.ts

// import { Component } from '@angular/core';
// import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
// import { ExploreContainerComponent } from '../explore-container/explore-container.component';

// @Component({
//   selector: 'app-tab1',
//   templateUrl: 'tab1.page.html',
//   styleUrls: ['tab1.page.scss'],
//   imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
// })
// export class Tab1Page {
//   constructor() {}
// }
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { 
  IonHeader, IonToolbar, IonSegment, IonSegmentButton, IonLabel, 
  IonIcon, IonBadge, IonButtons, IonButton, IonSearchbar, 
  IonContent, IonCard, IonCardContent, IonCardHeader, 
  IonCardTitle, IonCardSubtitle, IonProgressBar, IonList, 
  IonItem, IonThumbnail 
} from '@ionic/angular/standalone';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { register } from 'swiper/element/bundle';

// 注册 Swiper 组件
register();

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // 添加这行以支持 Web Components
  imports: [
    CommonModule,
    FormsModule,
    IonHeader, IonToolbar, IonSegment, IonSegmentButton, IonLabel, 
    IonIcon, IonBadge, IonButtons, IonButton, IonSearchbar, 
    IonContent, IonCard, IonCardContent, IonCardHeader, 
    IonCardTitle, IonCardSubtitle, IonProgressBar, IonList, 
    IonItem, IonThumbnail
  ]
})
export class Tab1Page {
  selectedTab = 'recommend';
  isVip = false;
  hasCampActivity = true;
  unreadNotifications = true;
  
  searchQuery = '';
  searchHints = ['5日突击燃脂', '晨间瑜伽', 'HIIT训练', '零基础拉伸'];
  currentSearchHint = this.searchHints[0];
  
  // Swiper 配置
  swiperConfig = JSON.stringify({
    slidesPerView: 'auto',
    spaceBetween: 8,
    freeMode: true
  });

  // 快速入口分类
  quickAccessItems = [
    { name: '跑步', icon: 'walk-outline' },
    { name: '瑜伽', icon: 'body-outline' },
    { name: '行走', icon: 'footsteps-outline' },
    { name: '燃脂', icon: 'flame-outline' },
    { name: '直播课', icon: 'videocam-outline' },
    { name: '活动挑战', icon: 'trophy-outline' },
    { name: '数据统计', icon: 'stats-chart-outline' },
    { name: '商城', icon: 'cart-outline' }
  ];
  
  // 最近练习
  recentCourses = [
    {
      title: '活力燃脂走',
      image: 'assets/images/work-1.jpg',
      duration: '20分钟',
      level: 'K1 零基础',
      calories: 220,
      progress: 0.6
    },
    {
      title: '晨间唤醒瑜伽',
      image: 'assets/images/yoga1.jpg',
      duration: '15分钟',
      level: 'K1 零基础',
      calories: 180,
      progress: 0.3
    }
  ];
  
  // 热门课程
  popularCourses = [
    {
      title: '马甲线养成',
      image: 'assets/images/abs1.jpg',
      duration: '30分钟',
      level: 'K2 初级',
      calories: 280,
      participants: '10万+'
    },
    {
      title: '全身燃脂训练',
      image: 'assets/images/workout2.jpg',
      duration: '25分钟',
      level: 'K2 初级',
      calories: 320,
      participants: '8.2万+'
    }
  ];
  
  // 为你推荐
  recommendedCourses = [
    {
      title: '20分钟站立燃脂',
      image: 'assets/images/work-2.jpg',
      duration: '20分钟',
      level: 'K1 零基础',
      calories: 240,
      matchRate: 92,
      description: '无需器械，站立完成的高效燃脂训练'
    },
    {
      title: '深度睡眠冥想',
      image: 'assets/images/work-3.jpg',
      duration: '15分钟',
      level: 'K1 零基础',
      calories: 80,
      matchRate: 88,
      description: '帮助你快速入睡，提高睡眠质量'
    }
  ];
  
  // 解锁徽章
  unlockedBadges = [
    { name: '坚持之星', icon: 'star-outline' },
    { name: '燃脂达人', icon: 'flame-outline' },
    { name: '早起鸟', icon: 'alarm-outline' }
  ];
  
  constructor() {
    // 模拟搜索提示轮播
    setInterval(() => {
      const currentIndex = this.searchHints.indexOf(this.currentSearchHint);
      const nextIndex = (currentIndex + 1) % this.searchHints.length;
      this.currentSearchHint = this.searchHints[nextIndex];
    }, 3000);
  }
  
  openSearchModal() {
    console.log('打开搜索模态框');
  }
  
  openNotifications() {
    console.log('打开通知页面');
  }
  
  viewReport() {
    console.log('查看年度报告');
  }
}