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

  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}>
          {products.filter(product => product.category === 'fruits').map(product => (
            <Link 
              key={product.id}
              to={`/fruit/${product.englishName}`}
              style={categoryCardStyle}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-8px) scale(1.03)';
                e.currentTarget.style.boxShadow = '0 15px 35px rgba(255, 87, 34, 0.25)';
                e.currentTarget.style.border = '2px solid #ff5722';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0) scale(1)';
                e.currentTarget.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.1)';
                e.currentTarget.style.border = '2px solid transparent';
              }}
            >
              <div style={imageContainerStyle}>
                <img 
                  src={product.image} 
                  alt={product.name}
                  style={imageStyle}
                  onError={(e) => {
                    // 图片加载失败时使用备用样式
                    e.target.style.display = 'none';
                  }}
                />
              </div>
              <div style={textContainerStyle}>
                <h3 style={productNameStyle}>{product.name}</h3>
                <p style={productDescriptionStyle}>{product.description}</p>
                <div style={viewDetailsStyle}>
                  查看详情 →
                </div>
              </div>
            </Link>
          ))}
        </div>
      </section>

      {/* 蔬菜分类 */}
      <section style={categoriesStyle}>
        <h2 style={sectionTitleStyle}>新鲜蔬菜</h2>
        <div style={categoriesGridStyle}>
          {products.filter(product => product.category === 'vegetables').map(product => (
            <Link 
              key={product.id}
              to={`/vegetable/${product.englishName}`}
              style={categoryCardStyle}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-8px) scale(1.03)';
                e.currentTarget.style.boxShadow = '0 15px 35px rgba(76, 175, 80, 0.25)';
                e.currentTarget.style.border = '2px solid #4caf50';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0) scale(1)';
                e.currentTarget.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.1)';
                e.currentTarget.style.border = '2px solid transparent';
              }}
            >
              <div style={imageContainerStyle}>
                <img 
                  src={product.image} 
                  alt={product.name}
                  style={imageStyle}
                  onError={(e) => {
                    // 图片加载失败时使用备用样式
                    e.target.style.display = 'none';
                  }}
                />
              </div>
              <div style={textContainerStyle}>
                <h3 style={productNameStyle}>{product.name}</h3>
                <p style={productDescriptionStyle}>{product.description}</p>
                <div style={viewDetailsStyle}>
                  查看详情 →
                </div>
              </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',
  cursor: 'pointer',
};

// 图片容器样式
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 productNameStyle = {
  fontSize: '1.3rem',
  fontWeight: 'bold',
  margin: '0 0 0.5rem 0',
  color: '#333',
};

const productDescriptionStyle = {
  fontSize: '0.9rem',
  color: '#666',
  margin: '0 0 1rem 0',
  lineHeight: '1.4',
  minHeight: '40px',
};

const viewDetailsStyle = {
  color: '#ff5722',
  fontSize: '0.9rem',
  fontWeight: '600',
  transition: 'all 0.3s ease',
};

// 搜索框悬停效果
const searchFormHoverStyle = {
  ...searchFormStyle,
  ':hover': {
    transform: 'translateY(-2px)',
    boxShadow: '0 12px 35px rgba(0, 0, 0, 0.3)',
    background: 'rgba(255, 255, 255, 1)',
  }
};

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

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

// 蔬菜类别卡片悬停效果
const vegetableCardHoverStyle = {
  ...categoryCardStyle,
  ':hover': {
    transform: 'translateY(-8px) scale(1.03)',
    boxShadow: '0 15px 35px rgba(76, 175, 80, 0.25)',
    border: '2px solid #4caf50',
  }
};

// 查看详情悬停效果
const viewDetailsHoverStyle = {
  ...viewDetailsStyle,
  ':hover': {
    color: '#e64a19',
    transform: 'translateX(4px)',
  }
};

export default Home;