Oroqen-Vue/src/views/Home.vue

<template>
  <div class="home">
    <!-- 英雄区域 -->
    <section class="hero">
      <div class="hero-background ethnic-pattern">
        <div class="container">
          <div class="hero-content">
            <div class="hero-text">
              <h1 class="hero-title">
                传承千年文化
                <br>
                <span class="highlight">鄂伦春族的瑰宝</span>
              </h1>
              <p class="hero-description">
                探索中国东北森林深处的古老民族文化，感受狩猎文明的独特魅力，
                体验桦皮工艺、传统刺绣等非物质文化遗产的精湛技艺。
              </p>
              <div class="hero-actions">
                <router-link to="/culture" class="btn-primary hero-btn">
                  探索文化
                </router-link>
                <router-link to="/products" class="btn-secondary hero-btn">
                  精品商城
                </router-link>
              </div>
            </div>
            <div class="hero-image">
              <div class="hero-image-placeholder">
                <svg viewBox="0 0 400 300" class="hero-svg">
                  <!-- 森林背景 -->
                  <rect width="400" height="300" fill="#2d5016" opacity="0.1"/>
                  <!-- 传统建筑轮廓 -->
                  <path d="M50 250 L150 180 L250 250 L350 180 L350 280 L50 280 Z" 
                        fill="var(--secondary-color)" opacity="0.6"/>
                  <!-- 装饰图案 -->
                  <circle cx="200" cy="150" r="40" fill="var(--primary-color)" opacity="0.3"/>
                  <text x="200" y="160" text-anchor="middle" fill="var(--primary-color)" 
                        font-size="24" font-weight="bold">鄂</text>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 特色板块 -->
    <section class="features section">
      <div class="container">
        <h2 class="section-title">文化瑰宝</h2>
        <div class="features-grid">
          <div class="feature-card card" @click="$router.push('/culture')">
            <div class="feature-icon">
              <svg viewBox="0 0 64 64" width="48" height="48">
                <circle cx="32" cy="32" r="28" fill="var(--primary-color)" opacity="0.2"/>
                <path d="M20 32 L32 20 L44 32 L32 44 Z" fill="var(--primary-color)"/>
              </svg>
            </div>
            <h3 class="feature-title">传统文化</h3>
            <p class="feature-description">
              深入了解鄂伦春族的狩猎文化、节庆仪式、饮食习俗和居住文化
            </p>
          </div>

          <div class="feature-card card" @click="$router.push('/heritage')">
            <div class="feature-icon">
              <svg viewBox="0 0 64 64" width="48" height="48">
                <circle cx="32" cy="32" r="28" fill="var(--secondary-color)" opacity="0.2"/>
                <rect x="24" y="24" width="16" height="16" fill="var(--secondary-color)"/>
              </svg>
            </div>
            <h3 class="feature-title">非遗传承</h3>
            <p class="feature-description">
              桦皮制作技艺、传统刺绣、民族歌舞等非物质文化遗产的传承与保护
            </p>
          </div>

          <div class="feature-card card" @click="$router.push('/products')">
            <div class="feature-icon">
              <svg viewBox="0 0 64 64" width="48" height="48">
                <circle cx="32" cy="32" r="28" fill="var(--accent-color)" opacity="0.3"/>
                <path d="M16 24 L48 24 L44 48 L20 48 Z" fill="var(--primary-color)"/>
              </svg>
            </div>
            <h3 class="feature-title">特色产品</h3>
            <p class="feature-description">
              精美手工艺品、传统服饰、特色食品和现代文创产品
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门产品 -->
    <section class="popular-products section" style="background-color: var(--background-light);">
      <div class="container">
        <h2 class="section-title">热门产品</h2>
        <div class="products-grid">
          <div v-for="product in featuredProducts" :key="product.id" 
               class="product-card card" @click="$router.push(`/product/${product.id}`)">
            <div class="product-image">
              <div class="product-image-placeholder">
                <svg viewBox="0 0 200 150" width="100%" height="150">
                  <rect width="200" height="150" :fill="product.color" opacity="0.3"/>
                  <text x="100" y="80" text-anchor="middle" :fill="product.color" 
                        font-size="14" font-weight="bold">{{ product.name }}</text>
                </svg>
              </div>
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-description">{{ product.description }}</p>
              <div class="product-footer">
                <span class="product-price">¥{{ product.price }}</span>
                <el-button type="primary" size="small" @click.stop="addToCart(product)">
                  加入购物车
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="text-center" style="margin-top: 2rem;">
          <router-link to="/products" class="btn-primary">查看更多产品</router-link>
        </div>
      </div>
    </section>

    <!-- 文化故事 -->
    <section class="culture-stories section">
      <div class="container">
        <h2 class="section-title">文化故事</h2>
        <div class="stories-grid">
          <div v-for="story in stories" :key="story.id" class="story-card card">
            <div class="story-image">
              <div class="story-image-placeholder">
                <svg viewBox="0 0 300 200" width="100%" height="200">
                  <rect width="300" height="200" :fill="story.color" opacity="0.2"/>
                  <circle cx="150" cy="100" r="40" :fill="story.color" opacity="0.5"/>
                  <text x="150" y="110" text-anchor="middle" :fill="story.color" 
                        font-size="16" font-weight="bold">{{ story.title.charAt(0) }}</text>
                </svg>
              </div>
            </div>
            <div class="story-content">
              <h3 class="story-title">{{ story.title }}</h3>
              <p class="story-excerpt">{{ story.excerpt }}</p>
              <div class="story-meta">
                <span class="story-date">{{ story.date }}</span>
                <a href="#" @click.prevent="showStoryDetail(story)" class="story-link">阅读更多</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 统计数据 -->
    <section class="stats section" style="background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));">
      <div class="container">
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-number">1000+</div>
            <div class="stat-label">文化资料</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">50+</div>
            <div class="stat-label">非遗项目</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">200+</div>
            <div class="stat-label">特色产品</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">10000+</div>
            <div class="stat-label">用户关注</div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- 文化故事详情卡片 -->
  <el-dialog 
    v-model="storyDetailVisible" 
    :title="selectedStory?.title" 
    width="70%" 
    top="5vh"
    class="story-detail-dialog"
  >
    <div v-if="selectedStory" class="story-detail-content">
      <!-- 故事头部信息 -->
      <div class="story-header">
        <div class="story-image-placeholder">
          <svg width="100%" height="200" viewBox="0 0 400 200">
            <rect width="400" height="200" :fill="selectedStory.color" opacity="0.2"/>
            <circle cx="200" cy="100" r="50" :fill="selectedStory.color" opacity="0.5"/>
            <text x="200" y="110" text-anchor="middle" :fill="selectedStory.color"
                  font-size="20" font-weight="bold">{{ selectedStory.title.substring(0, 2) }}</text>
          </svg>
        </div>
        <div class="story-meta-info">
          <p class="story-date">发布时间：{{ selectedStory.date }}</p>
          <p class="story-category" v-if="selectedStory.categoryName">分类：{{ selectedStory.categoryName }}</p>
        </div>
      </div>

      <!-- 故事内容 -->
      <div class="story-content-section">
        <h3>内容简介</h3>
        <p class="story-description">{{ selectedStory.excerpt }}</p>
        
        <div v-if="storyDetailData.content" class="story-full-content">
          <h3>详细内容</h3>
          <div class="content-text" v-html="storyDetailData.content"></div>
        </div>

        <div v-if="storyDetailData.tags" class="story-tags">
          <h3>相关标签</h3>
          <div class="tags-container">
            <span class="tag" v-for="tag in parseTags(storyDetailData.tags)" :key="tag">
              {{ tag }}
            </span>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="story-actions">
        <el-button type="primary" @click="goToFullDetail">查看完整详情</el-button>
        <el-button @click="storyDetailVisible = false">关闭</el-button>
      </div>
    </div>
    
    <div v-if="storyLoading" class="loading-container">
      <el-icon class="is-loading"><Loading /></el-icon>
      <p>加载中...</p>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useMainStore } from '../stores'
import { ElMessage } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'
import { productApi } from '../api/product'
import { cultureApi } from '../api/culture'
import { cartApi } from '../api/cart'

const router = useRouter()
const store = useMainStore()

// 特色产品数据
const featuredProducts = ref<any[]>([])
const loading = ref(false)

// 文化故事数据
const stories = ref<any[]>([])

// 故事详情相关
const storyDetailVisible = ref(false)
const selectedStory = ref<any>(null)
const storyDetailData = ref<any>({})
const storyLoading = ref(false)

// 获取热门产品
const getFeaturedProducts = async () => {
  try {
    loading.value = true
    const response = await productApi.getProductList({ 
      pageNo: 1, 
      pageSize: 4,
      status: 1 // 只获取上架的产品
    })
    if (response && response.records) {
      featuredProducts.value = response.records.map((product: any) => ({
        ...product,
        color: getRandomColor()
      }))
    }
  } catch (error) {
    console.error('获取产品数据失败:', error)
    ElMessage.error('获取产品数据失败，请稍后重试')
    featuredProducts.value = []
  } finally {
    loading.value = false
  }
}

// 获取推荐文化内容
const getRecommendedStories = async () => {
  try {
    const response = await cultureApi.getRecommendedCulture()
    if (response && response.length > 0) {
      stories.value = response.slice(0, 3).map((story: any) => ({
        id: story.id,
        title: story.title,
        excerpt: story.content ? story.content.substring(0, 100) + '...' : story.description,
        date: story.createTime ? new Date(story.createTime).toLocaleDateString() : '2024-01-01',
        color: getRandomColor()
      }))
    }
  } catch (error) {
    console.error('获取文化内容失败:', error)
    ElMessage.error('获取文化内容失败，请稍后重试')
    stories.value = []
  }
}

// 获取随机颜色
const getRandomColor = () => {
  const colors = ['#8b4513', '#2d5016', '#8b4513', '#2d5016']
  return colors[Math.floor(Math.random() * colors.length)]
}

// 添加到购物车
const addToCart = async (product: any) => {
  try {
    // 这里使用默认用户ID，实际应用中应该从用户状态获取
    const userId = '1'
    await cartApi.addToCart(userId, product.id, 1)
    store.addToCart(product)
    ElMessage.success('已添加到购物车')
  } catch (error) {
    console.error('添加到购物车失败:', error)
    ElMessage.error('添加到购物车失败，请稍后重试')
  }
}

// 显示故事详情
const showStoryDetail = async (story: any) => {
  selectedStory.value = story
  storyDetailVisible.value = true
  storyLoading.value = true
  
  try {
    // 获取完整的故事详情
    const response = await cultureApi.getCultureById(story.id)
    if (response) {
      storyDetailData.value = response
    }
  } catch (error) {
    console.error('获取故事详情失败:', error)
    ElMessage.error('获取故事详情失败，请稍后重试')
  } finally {
    storyLoading.value = false
  }
}

// 跳转到完整详情页
const goToFullDetail = () => {
  if (selectedStory.value) {
    router.push(`/culture/${selectedStory.value.id}`)
    storyDetailVisible.value = false
  }
}

// 解析标签
const parseTags = (tags: string) => {
  if (!tags) return []
  return tags.split(',').map(tag => tag.trim()).filter(tag => tag)
}

// 组件挂载时获取数据
onMounted(() => {
  getFeaturedProducts()
  getRecommendedStories()
})
</script>

<style scoped>
/* 英雄区域 */
.hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(45, 80, 22, 0.9), rgba(139, 69, 19, 0.8));
}

.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  min-height: 500px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: bold;
  color: white;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.highlight {
  color: var(--accent-color);
}

.hero-description {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 1rem;
}

.hero-btn {
  padding: 15px 30px;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-secondary {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.btn-secondary:hover {
  background: white;
  color: var(--primary-color);
}

.hero-image-placeholder {
  width: 100%;
  height: 400px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-svg {
  width: 100%;
  height: 100%;
}

/* 特色板块 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.feature-card {
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
}

.feature-icon {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
}

.feature-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.feature-description {
  color: var(--text-light);
  line-height: 1.6;
}

/* 产品网格 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.product-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.product-image-placeholder {
  width: 100%;
  height: 150px;
  background: var(--background-light);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-info {
  padding: 1.5rem;
}

.product-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.product-description {
  color: var(--text-light);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--secondary-color);
}

/* 文化故事 */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.story-card {
  overflow: hidden;
}

.story-image-placeholder {
  width: 100%;
  height: 200px;
  background: var(--background-light);
}

.story-content {
  padding: 1.5rem;
}

.story-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.story-excerpt {
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.story-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.story-date {
  color: var(--text-light);
  font-size: 0.9rem;
}

.story-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.story-link:hover {
  text-decoration: underline;
}

/* 统计数据 */
.stats {
  color: white;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 1.1rem;
  opacity: 0.9;
}

.text-center {
  text-align: center;
}

/* 故事详情对话框样式 */
.story-detail-dialog :deep(.el-dialog) {
  border-radius: 12px;
}

.story-detail-content {
  max-height: 70vh;
  overflow-y: auto;
}

.story-header {
  margin-bottom: 2rem;
}

.story-image-placeholder {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
}

.story-meta-info {
  display: flex;
  gap: 2rem;
  color: var(--text-light);
  font-size: 0.9rem;
}

.story-content-section {
  margin-bottom: 2rem;
}

.story-content-section h3 {
  color: var(--primary-color);
  font-size: 1.2rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 0.5rem;
}

.story-description {
  color: var(--text-color);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.story-full-content {
  margin-top: 1.5rem;
}

.content-text {
  color: var(--text-color);
  line-height: 1.8;
  font-size: 1rem;
}

.story-tags {
  margin-top: 1.5rem;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background: var(--primary-color);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
}

.story-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-light);
}

.loading-container .el-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .features-grid,
  .products-grid,
  .stories-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .story-detail-dialog :deep(.el-dialog) {
    width: 95% !important;
    margin: 5vh auto;
  }
  
  .story-meta-info {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .story-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>