Oroqen-Vue/src/views/Heritage.vue

<template>
  <div class="heritage">
    <!-- 页面头部 -->
    <section class="page-header">
      <div class="container">
        <div class="header-content">
          <h1 class="page-title">非物质文化遗产</h1>
          <p class="page-subtitle">传承千年技艺，保护民族瑰宝</p>
        </div>
      </div>
    </section>

    <!-- 非遗名录 -->
    <section class="section">
      <div class="container">
        <h2 class="section-title">非遗名录</h2>
        <div class="heritage-levels">
          <div class="level-tabs">
            <button 
              v-for="level in heritageLevels" 
              :key="level.id"
              :class="['level-tab', { active: activeLevel === level.id }]"
              @click="activeLevel = level.id"
            >
              {{ level.name }}
            </button>
          </div>
          
          <div class="heritage-list">
            <div v-for="item in currentHeritageList" :key="item.id" class="heritage-item card">
              <div class="heritage-image">
                <div class="image-placeholder">
                  <svg viewBox="0 0 200 150" width="100%" height="150">
                    <rect width="200" height="150" :fill="item.color" opacity="0.2"/>
                    <circle cx="100" cy="75" r="30" :fill="item.color" opacity="0.5"/>
                    <text x="100" y="85" text-anchor="middle" :fill="item.color" 
                          font-size="12" font-weight="bold">{{ item.name.substring(0, 2) }}</text>
                  </svg>
                </div>
              </div>
              <div class="heritage-info">
                <h3 class="heritage-name">{{ item.name }}</h3>
                <p class="heritage-category">{{ item.category }}</p>
                <p class="heritage-description">{{ item.description }}</p>
                <div class="heritage-meta">
                  <span class="heritage-year">{{ item.year }}年入选</span>
                  <el-button type="primary" size="small" @click="viewDetails(item)">
                    查看详情
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 技艺展示 -->
    <section class="section" style="background-color: var(--background-light);">
      <div class="container">
        <h2 class="section-title">技艺展示</h2>
        <div class="crafts-showcase">
          <div v-for="craft in crafts" :key="craft.id" class="craft-item">
            <div class="craft-media">
              <div class="media-placeholder">
                <svg viewBox="0 0 400 250" width="100%" height="250">
                  <rect width="400" height="250" :fill="craft.color" opacity="0.1"/>
                  <rect x="50" y="50" width="300" height="150" :fill="craft.color" opacity="0.3" rx="10"/>
                  <circle cx="200" cy="125" r="40" fill="white" opacity="0.8"/>
                  <polygon points="180,115 180,135 220,125" fill="var(--primary-color)"/>
                </svg>
              </div>
              <div class="media-controls">
                <el-button type="primary" circle @click="playCraftVideo(craft)">
                  <el-icon><VideoPlay /></el-icon>
                </el-button>
              </div>
            </div>
            <div class="craft-content">
              <h3 class="craft-title">{{ craft.name }}</h3>
              <p class="craft-description">{{ craft.description }}</p>
              <div class="craft-steps">
                <h4>制作流程：</h4>
                <ol class="steps-list">
                  <li v-for="step in craft.steps" :key="step">{{ step }}</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 传承人故事 -->
    <section class="section">
      <div class="container">
        <h2 class="section-title">传承人故事</h2>
        <div class="inheritors-stories">
          <div v-for="story in inheritorStories" :key="story.id" class="story-card card">
            <div class="story-header">
              <div class="inheritor-avatar">
                <div class="avatar-placeholder">
                  <svg viewBox="0 0 80 80" width="80" height="80">
                    <circle cx="40" cy="40" r="35" fill="var(--primary-color)" opacity="0.2"/>
                    <circle cx="40" cy="30" r="12" fill="var(--primary-color)" opacity="0.5"/>
                    <path d="M20 60 Q40 50 60 60 L60 70 L20 70 Z" 
                          fill="var(--primary-color)" opacity="0.5"/>
                  </svg>
                </div>
              </div>
              <div class="inheritor-basic">
                <h3 class="inheritor-name">{{ story.name }}</h3>
                <p class="inheritor-title">{{ story.title }}</p>
                <p class="inheritor-age">{{ story.age }}岁 · {{ story.experience }}年从艺经验</p>
              </div>
            </div>
            <div class="story-content">
              <h4>传承故事</h4>
              <p>{{ story.story }}</p>
              <h4>代表作品</h4>
              <div class="works-grid">
                <div v-for="work in story.works" :key="work" class="work-item">
                  <div class="work-image">
                    <svg viewBox="0 0 100 80" width="100" height="80">
                      <rect width="100" height="80" fill="var(--secondary-color)" opacity="0.2" rx="4"/>
                      <text x="50" y="45" text-anchor="middle" fill="var(--secondary-color)" 
                            font-size="10">{{ work.substring(0, 2) }}</text>
                    </svg>
                  </div>
                  <p class="work-name">{{ work }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 保护现状 -->
    <section class="section" style="background-color: var(--background-light);">
      <div class="container">
        <h2 class="section-title">保护现状与成果</h2>
        <div class="protection-overview">
          <div class="protection-stats">
            <div class="stat-card">
              <div class="stat-number">15</div>
              <div class="stat-label">国家级非遗项目</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">28</div>
              <div class="stat-label">省级非遗项目</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">45</div>
              <div class="stat-label">代表性传承人</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">8</div>
              <div class="stat-label">传承基地</div>
            </div>
          </div>
          
          <div class="protection-measures">
            <h3>保护措施</h3>
            <div class="measures-grid">
              <div class="measure-item">
                <div class="measure-icon">
                  <el-icon size="32"><School /></el-icon>
                </div>
                <h4>教育传承</h4>
                <p>在学校开设非遗课程，培养年轻一代的文化认同感</p>
              </div>
              <div class="measure-item">
                <div class="measure-icon">
                  <el-icon size="32"><Camera /></el-icon>
                </div>
                <h4>数字化保护</h4>
                <p>建立数字档案，记录技艺流程和文化内涵</p>
              </div>
              <div class="measure-item">
                <div class="measure-icon">
                  <el-icon size="32"><Trophy /></el-icon>
                </div>
                <h4>展示推广</h4>
                <p>举办展览活动，提高社会关注度和影响力</p>
              </div>
              <div class="measure-item">
                <div class="measure-icon">
                  <el-icon size="32"><Money /></el-icon>
                </div>
                <h4>资金支持</h4>
                <p>设立专项资金，支持传承人和保护项目</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 详情对话框 -->
    <el-dialog v-model="detailDialogVisible" :title="selectedHeritage?.name" width="70%" top="5vh">
      <div v-if="selectedHeritage" class="heritage-detail">
        <div class="detail-image">
          <div class="image-placeholder">
            <svg viewBox="0 0 400 200" width="100%" height="200">
              <rect width="400" height="200" :fill="selectedHeritage.color" opacity="0.2"/>
              <circle cx="200" cy="100" r="50" :fill="selectedHeritage.color" opacity="0.5"/>
              <text x="200" y="110" text-anchor="middle" :fill="selectedHeritage.color" 
                    font-size="20" font-weight="bold">{{ selectedHeritage.name.substring(0, 2) }}</text>
            </svg>
          </div>
        </div>
        <div class="detail-content">
          <h3>项目简介</h3>
          <p>{{ selectedHeritage.fullDescription }}</p>
          <h3>历史渊源</h3>
          <p>{{ selectedHeritage.history }}</p>
          <h3>技艺特点</h3>
          <ul>
            <li v-for="feature in selectedHeritage.features" :key="feature">{{ feature }}</li>
          </ul>
          <h3>传承价值</h3>
          <p>{{ selectedHeritage.value }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { VideoPlay, School, Camera, Trophy, Money } from '@element-plus/icons-vue'

// 响应式数据
const activeLevel = ref('national')
const detailDialogVisible = ref(false)
const selectedHeritage = ref(null)

// 非遗级别
const heritageLevels = ref([
  { id: 'national', name: '国家级' },
  { id: 'provincial', name: '省级' },
  { id: 'municipal', name: '市级' }
])

// 非遗项目数据
const heritageItems = ref({
  national: [
    {
      id: 1,
      name: '鄂伦春族桦皮制作技艺',
      category: '传统技艺',
      description: '利用桦树皮制作各种生活用品的传统技艺',
      year: 2008,
      color: '#8b4513',
      fullDescription: '鄂伦春族桦皮制作技艺是一项古老的传统手工艺，主要利用白桦树皮制作各种生活用品。',
      history: '这项技艺有着数百年的历史，是鄂伦春族适应森林生活的智慧结晶。',
      features: ['材料天然环保', '制作工艺精湛', '实用性强', '装饰美观'],
      value: '体现了鄂伦春族与自然和谐共处的生活理念，具有重要的文化价值。'
    },
    {
      id: 2,
      name: '鄂伦春族民歌',
      category: '传统音乐',
      description: '反映鄂伦春族生活的传统民歌',
      year: 2008,
      color: '#2d5016',
      fullDescription: '鄂伦春族民歌是反映鄂伦春族生产生活、思想感情的重要载体。',
      history: '民歌世代口耳相传，内容丰富，形式多样。',
      features: ['旋律优美', '内容丰富', '形式多样', '情感真挚'],
      value: '是研究鄂伦春族历史文化的重要资料，具有很高的学术价值。'
    }
  ],
  provincial: [
    {
      id: 3,
      name: '鄂伦春族传统刺绣',
      category: '传统美术',
      description: '具有民族特色的传统刺绣工艺',
      year: 2010,
      color: '#8b4513',
      fullDescription: '鄂伦春族传统刺绣以其精美的图案和独特的技法而闻名。',
      history: '刺绣技艺在鄂伦春族中有着悠久的历史传统。',
      features: ['图案精美', '色彩丰富', '技法独特', '寓意深刻'],
      value: '展现了鄂伦春族妇女的智慧和审美情趣。'
    }
  ],
  municipal: [
    {
      id: 4,
      name: '鄂伦春族萨满舞',
      category: '传统舞蹈',
      description: '具有宗教色彩的传统舞蹈',
      year: 2012,
      color: '#2d5016',
      fullDescription: '萨满舞是鄂伦春族重要的宗教仪式舞蹈。',
      history: '萨满舞起源于古老的萨满教信仰。',
      features: ['动作独特', '节奏鲜明', '寓意深刻', '仪式感强'],
      value: '是研究鄂伦春族宗教信仰的重要资料。'
    }
  ]
})

// 技艺展示数据
const crafts = ref([
  {
    id: 1,
    name: '桦皮制作技艺',
    description: '从采集桦皮到制作成品的完整工艺流程',
    color: '#8b4513',
    steps: [
      '选择合适的白桦树',
      '小心剥取桦皮',
      '清理和处理桦皮',
      '设计制作图案',
      '缝制和装饰',
      '最终成品整理'
    ]
  },
  {
    id: 2,
    name: '传统刺绣工艺',
    description: '精美的手工刺绣制作过程',
    color: '#2d5016',
    steps: [
      '设计刺绣图案',
      '选择合适面料',
      '准备彩色丝线',
      '绷布固定',
      '精细刺绣',
      '后期整理装裱'
    ]
  }
])

// 传承人故事数据
const inheritorStories = ref([
  {
    id: 1,
    name: '关小云',
    title: '国家级非遗传承人',
    age: 68,
    experience: 45,
    story: '从小跟随祖母学习桦皮制作技艺，经过几十年的钻研和实践，不仅掌握了传统技法，还在保持传统的基础上进行了创新发展。她制作的桦皮工艺品不仅实用，更是艺术品，深受人们喜爱。',
    works: ['桦皮首饰盒', '桦皮装饰画', '桦皮茶具', '桦皮摆件']
  },
  {
    id: 2,
    name: '孟淑珍',
    title: '自治区级非遗传承人',
    age: 72,
    experience: 50,
    story: '自幼学习刺绣技艺，对传统图案有着深入的研究和理解。她的刺绣作品图案精美，色彩和谐，充分体现了鄂伦春族的文化特色。多年来培养了众多学生，为技艺传承做出了重要贡献。',
    works: ['传统服饰刺绣', '装饰挂画', '手工包袋', '民族头饰']
  }
])

// 计算属性
const currentHeritageList = computed(() => {
  return heritageItems.value[activeLevel.value] || []
})

// 方法
const viewDetails = (item: any) => {
  selectedHeritage.value = item
  detailDialogVisible.value = true
}

const playCraftVideo = (craft: any) => {
  // 模拟播放视频
  console.log('播放视频:', craft.name)
}
</script>

<style scoped>
/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 4rem 0 2rem;
  text-align: center;
}

.page-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* 非遗级别标签 */
.level-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  gap: 1rem;
}

.level-tab {
  padding: 0.8rem 2rem;
  border: 2px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.level-tab:hover,
.level-tab.active {
  background: var(--primary-color);
  color: white;
}

/* 非遗列表 */
.heritage-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.heritage-item {
  overflow: hidden;
  transition: all 0.3s ease;
}

.heritage-item:hover {
  transform: translateY(-5px);
}

.heritage-image {
  width: 100%;
  height: 150px;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-light);
}

.heritage-info {
  padding: 1.5rem;
}

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

.heritage-category {
  color: var(--secondary-color);
  font-weight: 500;
  margin-bottom: 1rem;
}

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

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

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

/* 技艺展示 */
.crafts-showcase {
  display: grid;
  gap: 3rem;
}

.craft-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.craft-item:nth-child(even) {
  direction: rtl;
}

.craft-item:nth-child(even) > * {
  direction: ltr;
}

.craft-media {
  position: relative;
}

.media-placeholder {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.media-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.craft-content {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

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

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

.craft-steps h4 {
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.steps-list {
  color: var(--text-color);
  padding-left: 1.5rem;
}

.steps-list li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* 传承人故事 */
.inheritors-stories {
  display: grid;
  gap: 2rem;
}

.story-card {
  padding: 2rem;
}

.story-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.avatar-placeholder {
  border-radius: 50%;
  overflow: hidden;
}

.inheritor-name {
  font-size: 1.3rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.inheritor-title {
  color: var(--secondary-color);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

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

.story-content h4 {
  color: var(--primary-color);
  margin: 1.5rem 0 1rem;
}

.story-content p {
  color: var(--text-color);
  line-height: 1.8;
  margin-bottom: 1rem;
}

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

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

.work-image {
  margin-bottom: 0.5rem;
  border-radius: 4px;
  overflow: hidden;
}

.work-name {
  font-size: 0.9rem;
  color: var(--text-color);
}

/* 保护现状 */
.protection-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.stat-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow);
}

.stat-number {
  font-size: 3rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.stat-label {
  color: var(--text-color);
  font-weight: 500;
}

.protection-measures h3 {
  font-size: 1.5rem;
  color: var(--primary-color);
  margin-bottom: 2rem;
  text-align: center;
}

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

.measure-item {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow);
}

.measure-icon {
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.measure-item h4 {
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.measure-item p {
  color: var(--text-color);
  line-height: 1.6;
}

/* 详情对话框 */
.heritage-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.detail-content h3 {
  color: var(--primary-color);
  margin: 1.5rem 0 1rem;
}

.detail-content h3:first-child {
  margin-top: 0;
}

.detail-content p {
  color: var(--text-color);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.detail-content ul {
  color: var(--text-color);
  padding-left: 1.5rem;
}

.detail-content li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .level-tabs {
    flex-wrap: wrap;
  }
  
  .heritage-list {
    grid-template-columns: 1fr;
  }
  
  .craft-item {
    grid-template-columns: 1fr;
  }
  
  .craft-item:nth-child(even) {
    direction: ltr;
  }
  
  .story-header {
    flex-direction: column;
    text-align: center;
  }
  
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .protection-stats,
  .measures-grid {
    grid-template-columns: 1fr;
  }
  
  .heritage-detail {
    grid-template-columns: 1fr;
  }
}
</style>