Administrator / spring-boot-microservices-onlineshooping-fullstack · Files

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';

const Home = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const navigate = useNavigate();

  const handleSearch = (e) => {
    e.preventDefault();
    if (searchTerm.trim()) {
      navigate(`/products?search=${encodeURIComponent(searchTerm)}`);
    }
  };

  // 使用 CloudFront 域名替换 S3 直接链接
  const CLOUDFRONT_DOMAIN = 'https://d3sx9glhrpxv9q.cloudfront.net';

  const fruits = [
    {
      id: 1,
      name: '秦岭猕猴桃',
      description: '秀色可餐，果香浓郁',
      category: 'fruits',
      image: `${CLOUDFRONT_DOMAIN}/kiwi.png`  // 改为 CloudFront 链接
    },
    {
      id: 2,
      name: '栖霞红富士苹果',
      description: '红艳诱人，脆爽多汁',
      category: 'fruits',
      image: `${CLOUDFRONT_DOMAIN}/apples.jpg`  // 改为 CloudFront 链接
    },
    {
      id: 3,
      name: '长安石榴',
      description: '晶莹剔透，粉黛抹腮',
      category: 'fruits',
      image: `${CLOUDFRONT_DOMAIN}/shiliu.png`  // 改为 CloudFront 链接
    },
    {
      id: 4,
      name: '鄠邑葡萄',
      description: '甜而不腻，皮薄肉厚',
      category: 'fruits',
      image: `${CLOUDFRONT_DOMAIN}/grape.png`  // 改为 CloudFront 链接
    },
    {
      id: 5,
      name: '延川红枣',
      description: '口感脆甜，滋生养颜',
      category: 'fruits',
      image: `${CLOUDFRONT_DOMAIN}/hongzao.png`  // 改为 CloudFront 链接
    },
    {
      id: 6,
      name: '城固柑橘',
      description: '皮薄易剥，汁多化渣',
      category: 'fruits',
      image: `${CLOUDFRONT_DOMAIN}/oranges.jpg`  // 改为 CloudFront 链接
    },
    {
      id: 7,
      name: '大荔西瓜',
      description: '绿裳红心玉为魂，清甜如许胜琼浆',
      category: 'fruits',
      image: `${CLOUDFRONT_DOMAIN}/watermelon.png`  // 改为 CloudFront 链接
    },
    {
      id: 6,
      name: '周至草莓',
      description: '味觉之舞，意境之妙',
      category: 'fruits',
      image: `${CLOUDFRONT_DOMAIN}/strawberries.jpg`  // 改为 CloudFront 链接
    },
    {
      id: 6,
      name: '眉县番茄',
      description: '色彩之韵，生长之诗',
      category: 'fruits',
      image: `${CLOUDFRONT_DOMAIN}/tomatoes.jpg`  // 改为 CloudFront 链接
    }
  ];

  return (
    <div style={containerStyle}>
      <section style={heroStyle}>
        <h1 style={heroTitleStyle}>欢迎来到普罗米修甄选果蔬平台</h1>
        
        {/* 搜索框 */}
        <div style={searchContainerStyle}>
          <form onSubmit={handleSearch} style={searchFormStyle}>
            <input
              type="text"
              placeholder="搜索水果或蔬菜..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              style={searchInputStyle}
            />
            <button type="submit" style={searchButtonStyle}>
              搜索
            </button>
          </form>
        </div>
      </section>

      <section style={categoriesStyle}>
        <h2 style={sectionTitleStyle}>时令果蔬</h2>
        <div style={categoriesGridStyle}>
          {fruits.map(fruit => (
            <Link 
              key={fruit.id}
              to={`/products?category=${fruit.category}`} 
              style={categoryCardStyle}
            >
              <div style={imageContainerStyle}>
                <img 
                  src={fruit.image} 
                  alt={fruit.name}
                  style={imageStyle}
                  onError={(e) => {
                    // 图片加载失败时使用备用样式
                    e.target.style.display = 'none';
                  }}
                />
              </div>
              <div style={textContainerStyle}>
                <h3 style={fruitNameStyle}>{fruit.name}</h3>
                <p style={fruitDescriptionStyle}>{fruit.description}</p>
              </div>
            </Link>
          ))}
        </div>
      </section>
    </div>
  );
};

// 样式部分
const containerStyle = {
  minHeight: 'calc(100vh - 200px)',
};

const heroStyle = {
  background: 'linear-gradient(135deg, #ff5722 0%, #ff8a65 100%)',
  color: 'white',
  padding: '1.5rem 1rem',
  textAlign: 'center',
  minHeight: '30vh',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  position: 'relative',
  overflow: 'hidden',
};

const heroTitleStyle = {
  fontSize: '2rem',
  marginBottom: '1.5rem',
  fontWeight: 'bold',
  textShadow: '2px 2px 4px rgba(0,0,0,0.3)',
  position: 'relative',
  zIndex: 2,
};

// 搜索框样式
const searchContainerStyle = {
  width: '100%',
  maxWidth: '500px',
  margin: '0 auto',
  position: 'relative',
  zIndex: 2,
};

const searchFormStyle = {
  display: 'flex',
  background: 'rgba(255, 255, 255, 0.95)',
  borderRadius: '50px',
  overflow: 'hidden',
  boxShadow: '0 8px 25px rgba(0, 0, 0, 0.2)',
  transition: 'all 0.3s ease',
  backdropFilter: 'blur(10px)',
};

const searchInputStyle = {
  flex: 1,
  border: 'none',
  outline: 'none',
  padding: '0.8rem 1.2rem',
  fontSize: '0.9rem',
  color: '#333',
  background: 'transparent',
};

const searchButtonStyle = {
  background: 'linear-gradient(135deg, #e64a19, #ff5722)',
  color: 'white',
  border: 'none',
  padding: '0.8rem 1.5rem',
  fontSize: '0.9rem',
  fontWeight: 'bold',
  cursor: 'pointer',
  transition: 'all 0.3s ease',
};

const categoriesStyle = {
  padding: '2rem 1rem',
  backgroundColor: '#f8f9fa',
  minHeight: '45vh',
  marginTop: '-1rem',
};

const sectionTitleStyle = {
  textAlign: 'center',
  fontSize: '2.2rem',
  marginBottom: '2rem',
  color: '#ff5722',
  fontWeight: 'bold',
  background: 'linear-gradient(135deg, #ff5722, #e64a19)',
  WebkitBackgroundClip: 'text',
  WebkitTextFillColor: 'transparent',
};

const categoriesGridStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
  gap: '2rem',
  maxWidth: '1200px',
  margin: '0 auto',
};

const categoryCardStyle = {
  backgroundColor: 'white',
  borderRadius: '15px',
  textDecoration: 'none',
  color: '#333',
  boxShadow: '0 4px 15px rgba(0, 0, 0, 0.1)',
  transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
  border: '2px solid transparent',
  position: 'relative',
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
};

// 修改图片容器样式 - 关键修改
const imageContainerStyle = {
  width: '100%',
  height: '200px',
  overflow: 'hidden',
  position: 'relative',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: 'white', // 改为白色背景
  borderRadius: '13px 13px 0 0', // 与卡片保持一致
};

// 修改图片样式 - 关键修改
const imageStyle = {
  width: 'auto',
  height: 'auto',
  maxWidth: '90%', // 稍微缩小一点，让图片周围有白色边距
  maxHeight: '90%',
  objectFit: 'contain',
  display: 'block',
  margin: '0 auto',
  transition: 'transform 0.3s ease',
  backgroundColor: 'white', // 图片本身也设置白色背景
};

const textContainerStyle = {
  padding: '1.5rem',
  textAlign: 'center',
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  backgroundColor: 'white', // 确保文字区域也是白色
};

const fruitNameStyle = {
  fontSize: '1.3rem',
  fontWeight: 'bold',
  margin: '0 0 0.5rem 0',
  color: '#333',
};

const fruitDescriptionStyle = {
  fontSize: '0.9rem',
  color: '#666',
  margin: 0,
  lineHeight: '1.4',
};

// 悬停效果
const categoryCardStyleWithHover = {
  ...categoryCardStyle,
  ':hover': {
    transform: 'translateY(-8px) scale(1.03)',
    boxShadow: '0 15px 35px rgba(255, 87, 34, 0.25)',
    border: '2px solid #ff5722',
  }
};

const searchFormStyleWithHover = {
  ...searchFormStyle,
  ':hover': {
    transform: 'translateY(-2px)',
    boxShadow: '0 12px 35px rgba(0, 0, 0, 0.3)',
    background: 'rgba(255, 255, 255, 1)',
  }
};

const searchButtonStyleWithHover = {
  ...searchButtonStyle,
  ':hover': {
    background: 'linear-gradient(135deg, #d84315, #ff5722)',
    transform: 'scale(1.05)',
  }
};

// 由于内联样式不支持伪类，我们需要在组件中使用样式对象
export default Home;