diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 1d89ee8..d7d6df6 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -5,5 +5,6 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
 }
diff --git a/components.d.ts b/components.d.ts
index b2134a9..cda9eef 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -29,5 +29,6 @@ declare module 'vue' {
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    VideoPlayer: typeof import('./src/components/VideoPlayer.vue')['default']
   }
 }
diff --git a/src/api/cart.ts b/src/api/cart.ts
new file mode 100644
index 0000000..d02e992
--- /dev/null
+++ b/src/api/cart.ts
@@ -0,0 +1,35 @@
+import api from './index'
+
+// 购物车接口
+export const cartApi = {
+  // 获取用户购物车
+  getCartByUserId: (userId: string) => {
+    return api.get(`/oroqen/cart/user/${userId}`)
+  },
+  
+  // 添加到购物车
+  addToCart: (userId: string, productId: string, quantity: number) => {
+    return api.post('/oroqen/cart/add', null, {
+      params: { userId, productId, quantity }
+    })
+  },
+  
+  // 更新购物车商品数量
+  updateCartQuantity: (userId: string, productId: string, quantity: number) => {
+    return api.post('/oroqen/cart/update', null, {
+      params: { userId, productId, quantity }
+    })
+  },
+  
+  // 从购物车移除商品
+  removeFromCart: (userId: string, productId: string) => {
+    return api.post('/oroqen/cart/remove', null, {
+      params: { userId, productId }
+    })
+  },
+  
+  // 清空购物车
+  clearCart: (userId: string) => {
+    return api.post(`/oroqen/cart/clear/${userId}`)
+  }
+}
\ No newline at end of file
diff --git a/src/api/culture.ts b/src/api/culture.ts
new file mode 100644
index 0000000..a090238
--- /dev/null
+++ b/src/api/culture.ts
@@ -0,0 +1,52 @@
+import api from './index'
+
+// 文化内容接口
+export const cultureApi = {
+  // 获取文化内容列表
+  getCultureList: (params: any) => {
+    return api.get('/oroqen/cultureContent/list', { params })
+  },
+  
+  // 获取文化内容详情
+  getCultureById: (id: string) => {
+    return api.get('/oroqen/cultureContent/queryById', { params: { id } })
+  },
+  
+  // 获取推荐文化内容
+  getRecommendedCulture: () => {
+    return api.get('/oroqen/cultureContent/recommended')
+  },
+  
+  // 根据分类获取文化内容
+  getCultureByCategory: (categoryId: string, params: any) => {
+    return api.get(`/oroqen/cultureContent/category/${categoryId}`, { params })
+  },
+  
+  // 点赞文化内容
+  likeCulture: (id: string) => {
+    return api.post(`/oroqen/cultureContent/like/${id}`)
+  },
+  
+  // 取消点赞
+  unlikeCulture: (id: string) => {
+    return api.post(`/oroqen/cultureContent/unlike/${id}`)
+  }
+}
+
+// 文化内容分类接口
+export const cultureCategoryApi = {
+  // 获取分类树
+  getCategoryTree: () => {
+    return api.get('/oroqen/cultureCategory/tree')
+  },
+  
+  // 获取分类列表
+  getCategoryList: (params: any) => {
+    return api.get('/oroqen/cultureCategory/list', { params })
+  },
+  
+  // 获取子分类
+  getChildCategories: (parentId: string) => {
+    return api.get(`/oroqen/cultureCategory/children/${parentId}`)
+  }
+}
\ No newline at end of file
diff --git a/src/api/favorite.ts b/src/api/favorite.ts
new file mode 100644
index 0000000..3eead47
--- /dev/null
+++ b/src/api/favorite.ts
@@ -0,0 +1,32 @@
+import api from './index'
+
+// 用户收藏接口
+export const favoriteApi = {
+  // 获取用户收藏列表
+  getFavoritesByUserId: (userId: string, favoriteType?: string) => {
+    const params: any = { userId }
+    if (favoriteType) params.favoriteType = favoriteType
+    return api.get('/oroqen/userFavorite/user', { params })
+  },
+  
+  // 添加收藏
+  addFavorite: (userId: string, itemId: string, favoriteType: string) => {
+    return api.post('/oroqen/userFavorite/add', null, {
+      params: { userId, itemId, favoriteType }
+    })
+  },
+  
+  // 取消收藏
+  removeFavorite: (userId: string, itemId: string, favoriteType: string) => {
+    return api.post('/oroqen/userFavorite/remove', null, {
+      params: { userId, itemId, favoriteType }
+    })
+  },
+  
+  // 检查是否已收藏
+  checkFavoriteStatus: (userId: string, itemId: string, favoriteType: string) => {
+    return api.get('/oroqen/userFavorite/status', {
+      params: { userId, itemId, favoriteType }
+    })
+  }
+}
\ No newline at end of file
diff --git a/src/api/heritage.ts b/src/api/heritage.ts
new file mode 100644
index 0000000..334b4c1
--- /dev/null
+++ b/src/api/heritage.ts
@@ -0,0 +1,52 @@
+import api from './index'
+
+// 非遗传承人接口
+export const heritageApi = {
+  // 获取传承人列表
+  getInheritorList: (params: any) => {
+    return api.get('/oroqen/heritageInheritor/list', { params })
+  },
+  
+  // 获取传承人详情
+  getInheritorById: (id: string) => {
+    return api.get('/oroqen/heritageInheritor/queryById', { params: { id } })
+  },
+  
+  // 获取所有传承人（不分页）
+  getAllInheritors: () => {
+    return api.get('/oroqen/heritageInheritor/list', { 
+      params: { pageNo: 1, pageSize: 1000 } 
+    })
+  },
+
+  // 非遗项目接口
+  // 获取非遗项目列表
+  getHeritageProjectList: (params: any) => {
+    return api.get('/oroqen/heritageProject/list', { params })
+  },
+  
+  // 获取推荐项目列表
+  getRecommendedProjects: () => {
+    return api.get('/oroqen/heritageProject/recommended')
+  },
+  
+  // 按级别获取项目列表
+  getProjectsByLevel: (level: string) => {
+    return api.get('/oroqen/heritageProject/byLevel', { params: { level } })
+  },
+  
+  // 按类别获取项目列表
+  getProjectsByCategory: (category: string) => {
+    return api.get('/oroqen/heritageProject/byCategory', { params: { category } })
+  },
+  
+  // 获取项目详情
+  getProjectById: (id: string) => {
+    return api.get('/oroqen/heritageProject/queryById', { params: { id } })
+  },
+  
+  // 获取级别统计
+  getLevelStats: () => {
+    return api.get('/oroqen/heritageProject/levelStats')
+  }
+}
\ No newline at end of file
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000..5503436
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1,47 @@
+import axios from 'axios'
+
+// 创建axios实例
+const api = axios.create({
+  baseURL: 'http://localhost:8080/jeecg-boot', // 后端API地址
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// 请求拦截器
+api.interceptors.request.use(
+  config => {
+    // 可以在这里添加token等认证信息
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+api.interceptors.response.use(
+  response => {
+    const { data } = response
+    if (data.success) {
+      return data.result || data
+    } else {
+      // 创建一个包含完整错误信息的错误对象
+      const error = new Error(data.message || '请求失败')
+      error.code = data.code
+      error.data = data
+      return Promise.reject(error)
+    }
+  },
+  error => {
+    console.error('API Error:', error)
+    return Promise.reject(error)
+  }
+)
+
+export default api
\ No newline at end of file
diff --git a/src/api/order.ts b/src/api/order.ts
new file mode 100644
index 0000000..1480787
--- /dev/null
+++ b/src/api/order.ts
@@ -0,0 +1,39 @@
+import api from './index'
+
+// 订单接口
+export const orderApi = {
+  // 获取用户订单列表
+  getOrdersByUserId: (userId: string, status?: string) => {
+    const params: any = { userId }
+    if (status) params.status = status
+    return api.get('/oroqen/order/user', { params })
+  },
+  
+  // 创建订单
+  createOrder: (orderData: any) => {
+    return api.post('/oroqen/order/create', orderData)
+  },
+  
+  // 获取订单详情
+  getOrderById: (id: string) => {
+    return api.get('/oroqen/order/queryById', { params: { id } })
+  },
+  
+  // 取消订单
+  cancelOrder: (id: string) => {
+    return api.post(`/oroqen/order/cancel/${id}`)
+  },
+  
+  // 确认收货
+  confirmOrder: (id: string) => {
+    return api.post(`/oroqen/order/confirm/${id}`)
+  }
+}
+
+// 订单项接口
+export const orderItemApi = {
+  // 获取订单项列表
+  getOrderItemsByOrderId: (orderId: string) => {
+    return api.get(`/oroqen/orderItem/order/${orderId}`)
+  }
+}
\ No newline at end of file
diff --git a/src/api/product.ts b/src/api/product.ts
new file mode 100644
index 0000000..fd5c69a
--- /dev/null
+++ b/src/api/product.ts
@@ -0,0 +1,47 @@
+import api from './index'
+
+// 产品接口
+export const productApi = {
+  // 获取产品列表
+  getProductList: (params: any) => {
+    return api.get('/oroqen/product/list', { params })
+  },
+  
+  // 获取产品详情
+  getProductById: (id: string | number) => {
+    return api.get('/oroqen/product/queryById', { params: { id: id.toString() } })
+  },
+  
+  // 获取推荐产品
+  getFeaturedProducts: () => {
+    return api.get('/oroqen/product/featured')
+  },
+  
+  // 获取热销产品
+  getHotProducts: () => {
+    return api.get('/oroqen/product/hot')
+  },
+  
+  // 根据分类获取产品
+  getProductsByCategory: (categoryId: string, params: any) => {
+    return api.get(`/oroqen/product/category/${categoryId}`, { params })
+  }
+}
+
+// 产品分类接口
+export const productCategoryApi = {
+  // 获取分类树
+  getCategoryTree: () => {
+    return api.get('/oroqen/productCategory/tree')
+  },
+  
+  // 获取分类列表
+  getCategoryList: (params: any) => {
+    return api.get('/oroqen/productCategory/list', { params })
+  },
+  
+  // 获取子分类
+  getChildCategories: (parentId: string) => {
+    return api.get(`/oroqen/productCategory/children/${parentId}`)
+  }
+}
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 29bc1f9..27f7d80 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
 import Culture from '../views/Culture.vue'
+import CultureDetail from '../views/CultureDetail.vue'
 import Heritage from '../views/Heritage.vue'
 import Products from '../views/Products.vue'
 import ProductDetail from '../views/ProductDetail.vue'
@@ -19,6 +20,11 @@ const routes = [
     name: 'Culture',
     component: Culture
   },
+  {
+    path: '/culture/:id',
+    name: 'CultureDetail',
+    component: CultureDetail
+  },
   {
     path: '/heritage',
     name: 'Heritage',
diff --git a/src/views/Cart.vue b/src/views/Cart.vue
index b7018c3..b6b3e86 100644
--- a/src/views/Cart.vue
+++ b/src/views/Cart.vue
@@ -196,50 +196,145 @@ import { useRouter } from 'vue-router'
 import { useMainStore } from '../stores'
 import { User, ShoppingCart } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { cartApi } from '../api/cart'
+import { productApi } from '../api/product'
 
 const router = useRouter()
 const store = useMainStore()
 
 // 响应式数据
 const selectAll = ref(false)
+const loading = ref(false)
+const cartItems = ref<any[]>([])
 
 // 推荐商品
-const recommendedProducts = ref([
-  {
-    id: 2,
-    name: '鄂伦春族刺绣挂画',
-    price: 288,
-    color: '#2d5016'
-  },
-  {
-    id: 4,
-    name: '手工木雕摆件',
-    price: 128,
-    color: '#8b4513'
-  },
-  {
-    id: 5,
-    name: '野生蓝莓干',
-    price: 58,
-    color: '#2d5016'
-  },
-  {
-    id: 6,
-    name: '鄂伦春文化笔记本',
-    price: 35,
-    color: '#8b4513'
+const recommendedProducts = ref<any[]>([])
+
+// 获取购物车数据
+const getCartData = async () => {
+  try {
+    loading.value = true
+    // 这里应该从用户信息中获取userId，暂时使用固定值
+    const userId = 1
+    const response = await cartApi.getUserCart(userId)
+    
+    if (response && response.length > 0) {
+      cartItems.value = response.map((item: any) => ({
+        id: item.id,
+        productId: item.productId,
+        name: item.productName || '商品名称',
+        price: item.price || 0,
+        quantity: item.quantity || 1,
+        stock: item.stock || 99,
+        specs: item.specs || '规格：标准版',
+        craftsman: item.craftsman,
+        originalPrice: item.originalPrice,
+        selected: true,
+        color: getProductColor(item.productId)
+      }))
+    }
+    
+    // 如果没有数据，使用默认数据
+    if (cartItems.value.length === 0) {
+      cartItems.value = getDefaultCartItems()
+    }
+    
+  } catch (error) {
+    console.error('获取购物车数据失败:', error)
+    // 使用默认数据
+    cartItems.value = getDefaultCartItems()
+  } finally {
+    loading.value = false
   }
-])
+}
+
+// 获取推荐商品
+const getRecommendedProducts = async () => {
+  try {
+    const response = await productApi.getHotProducts()
+    
+    if (response?.records && response.records.length > 0) {
+      recommendedProducts.value = response.records.slice(0, 4).map((product: any) => ({
+        id: product.id,
+        name: product.productName,
+        price: product.price,
+        color: getProductColor(product.id)
+      }))
+    }
+    
+    // 如果没有数据，使用默认数据
+    if (recommendedProducts.value.length === 0) {
+      recommendedProducts.value = getDefaultRecommendedProducts()
+    }
+    
+  } catch (error) {
+    console.error('获取推荐商品失败:', error)
+    recommendedProducts.value = getDefaultRecommendedProducts()
+  }
+}
+
+// 获取默认购物车数据
+const getDefaultCartItems = () => {
+  return [
+    {
+      id: 1,
+      productId: 1,
+      name: '精美桦皮首饰盒',
+      price: 168,
+      quantity: 1,
+      stock: 15,
+      specs: '规格：标准版',
+      craftsman: '关小云',
+      originalPrice: 198,
+      selected: true,
+      color: '#8b4513'
+    },
+    {
+      id: 2,
+      productId: 3,
+      name: '手工木雕摆件',
+      price: 128,
+      quantity: 2,
+      stock: 8,
+      specs: '规格：中号',
+      craftsman: '关金山',
+      selected: true,
+      color: '#2d5016'
+    }
+  ]
+}
+
+// 获取默认推荐商品
+const getDefaultRecommendedProducts = () => {
+  return [
+    {
+      id: 2,
+      name: '鄂伦春族刺绣挂画',
+      price: 288,
+      color: '#2d5016'
+    },
+    {
+      id: 4,
+      name: '手工木雕摆件',
+      price: 128,
+      color: '#8b4513'
+    },
+    {
+      id: 5,
+      name: '野生蓝莓干',
+      price: 58,
+      color: '#2d5016'
+    },
+    {
+      id: 6,
+      name: '鄂伦春文化笔记本',
+      price: 35,
+      color: '#8b4513'
+    }
+  ]
+}
 
 // 计算属性
-const cartItems = computed(() => {
-  return store.cartItems.map(item => ({
-    ...item,
-    selected: item.selected !== false, // 默认选中
-    color: getProductColor(item.id)
-  }))
-})
-
 const selectedItems = computed(() => {
   return cartItems.value.filter(item => item.selected)
 })
@@ -265,36 +360,38 @@ const handleSelectAll = (checked: boolean) => {
   cartItems.value.forEach(item => {
     item.selected = checked
   })
-  updateCartSelection()
 }
 
 const updateSelection = () => {
   const selectedCount = cartItems.value.filter(item => item.selected).length
   selectAll.value = selectedCount === cartItems.value.length
-  updateCartSelection()
 }
 
-const updateCartSelection = () => {
-  // 更新store中的选中状态
-  cartItems.value.forEach(item => {
-    const storeItem = store.cartItems.find(si => si.id === item.id)
-    if (storeItem) {
-      storeItem.selected = item.selected
-    }
-  })
-}
-
-const increaseQuantity = (item: any) => {
+const increaseQuantity = async (item: any) => {
   if (item.quantity < item.stock) {
-    store.updateCartItemQuantity(item.id, item.quantity + 1)
+    try {
+      await cartApi.updateQuantity(item.id, item.quantity + 1)
+      item.quantity += 1
+      ElMessage.success('数量已更新')
+    } catch (error) {
+      console.error('更新数量失败:', error)
+      ElMessage.error('更新失败')
+    }
   } else {
     ElMessage.warning('库存不足')
   }
 }
 
-const decreaseQuantity = (item: any) => {
+const decreaseQuantity = async (item: any) => {
   if (item.quantity > 1) {
-    store.updateCartItemQuantity(item.id, item.quantity - 1)
+    try {
+      await cartApi.updateQuantity(item.id, item.quantity - 1)
+      item.quantity -= 1
+      ElMessage.success('数量已更新')
+    } catch (error) {
+      console.error('更新数量失败:', error)
+      ElMessage.error('更新失败')
+    }
   }
 }
 
@@ -310,19 +407,33 @@ const removeFromCart = async (itemId: number) => {
       }
     )
     
-    store.removeFromCart(itemId)
+    await cartApi.removeItem(itemId)
+    cartItems.value = cartItems.value.filter(item => item.id !== itemId)
     ElMessage.success('商品已删除')
     
     // 重新计算全选状态
     updateSelection()
-  } catch {
-    // 用户取消删除
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除商品失败:', error)
+      ElMessage.error('删除失败')
+    }
   }
 }
 
-const addRecommendedToCart = (product: any) => {
-  store.addToCart(product)
-  ElMessage.success('已添加到购物车')
+const addRecommendedToCart = async (product: any) => {
+  try {
+    const userId = 1 // 这里应该从用户信息中获取
+    await cartApi.addToCart({
+      userId,
+      productId: product.id,
+      quantity: 1
+    })
+    ElMessage.success('已添加到购物车')
+  } catch (error) {
+    console.error('添加到购物车失败:', error)
+    ElMessage.error('添加失败')
+  }
 }
 
 const checkout = () => {
@@ -338,8 +449,8 @@ const checkout = () => {
 
 // 生命周期
 onMounted(() => {
-  // 初始化选中状态
-  updateSelection()
+  getCartData()
+  getRecommendedProducts()
 })
 </script>
 
diff --git a/src/views/Culture.vue b/src/views/Culture.vue
index fd896d0..8324755 100644
--- a/src/views/Culture.vue
+++ b/src/views/Culture.vue
@@ -100,6 +100,45 @@
       </div>
     </section>
 
+    <!-- 文化故事展示 -->
+    <section class="section">
+      <div class="container">
+        <h2 class="section-title">文化故事</h2>
+        <div class="culture-stories-grid" v-if="cultureStories.length > 0">
+          <div 
+            v-for="story in cultureStories" 
+            :key="story.id" 
+            class="culture-story-card card"
+            @click="goToCultureDetail(story.id)"
+          >
+            <div class="story-icon">
+              <svg width="60" height="60" viewBox="0 0 60 60">
+                <rect width="60" height="60" :fill="story.color" opacity="0.1" rx="12"/>
+                <text x="30" y="38" text-anchor="middle" 
+                      :fill="story.color" font-size="24" font-weight="bold">
+                  {{ story.title ? story.title.charAt(0) : '文' }}
+                </text>
+              </svg>
+            </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>
+                <span class="story-category" v-if="story.categoryName">{{ story.categoryName }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="empty-state" v-else-if="!loading">
+          <p>暂无文化故事内容</p>
+        </div>
+        <div class="loading-state" v-if="loading">
+          <p>加载中...</p>
+        </div>
+      </div>
+    </section>
+
     <!-- 多媒体资源库 -->
     <section class="section">
       <div class="container">
@@ -139,26 +178,43 @@
     <section class="section" style="background-color: var(--background-light);">
       <div class="container">
         <h2 class="section-title">文化传承人</h2>
-        <div class="inheritors-grid">
+        <div class="inheritors-grid" v-if="inheritors.length > 0">
           <div v-for="inheritor in inheritors" :key="inheritor.id" class="inheritor-card card">
             <div class="inheritor-avatar">
-              <div class="avatar-placeholder">
-                <svg viewBox="0 0 120 120" width="120" height="120">
-                  <circle cx="60" cy="60" r="50" fill="var(--primary-color)" opacity="0.2"/>
-                  <circle cx="60" cy="45" r="15" fill="var(--primary-color)" opacity="0.5"/>
-                  <path d="M30 85 Q60 70 90 85 L90 100 L30 100 Z" 
-                        fill="var(--primary-color)" opacity="0.5"/>
-                </svg>
-              </div>
-            </div>
+                    <div class="avatar-placeholder">
+                      <img v-if="inheritor.avatar" :src="getFileAccessHttpUrl(inheritor.avatar)" :alt="inheritor.name" class="avatar-image" />
+                      <svg v-else viewBox="0 0 80 80" width="80" height="80" class="default-avatar">
+                        <defs>
+                          <linearGradient id="cultureAvatarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" style="stop-color:#ff9a9e;stop-opacity:1" />
+                            <stop offset="100%" style="stop-color:#fecfef;stop-opacity:1" />
+                          </linearGradient>
+                        </defs>
+                        <circle cx="40" cy="40" r="40" fill="url(#cultureAvatarGradient)"/>
+                        <!-- 简洁的人像图标 -->
+                        <circle cx="40" cy="30" r="10" fill="white" opacity="0.9"/>
+                        <path d="M 20 65 Q 20 50 40 50 Q 60 50 60 65 L 60 70 Q 60 75 55 75 L 25 75 Q 20 75 20 70 Z" fill="white" opacity="0.9"/>
+                      </svg>
+                    </div>
+                  </div>
             <div class="inheritor-info">
               <h3 class="inheritor-name">{{ inheritor.name }}</h3>
-              <p class="inheritor-title">{{ inheritor.title }}</p>
-              <p class="inheritor-skill">{{ inheritor.skill }}</p>
-              <p class="inheritor-description">{{ inheritor.description }}</p>
+              <p v-if="inheritor.title" class="inheritor-title">{{ inheritor.title }}</p>
+              <p v-if="inheritor.skill" class="inheritor-skill">{{ inheritor.skill }}</p>
+              <p v-if="inheritor.description" class="inheritor-description">{{ inheritor.description }}</p>
+              <div v-if="inheritor.hometown || inheritor.achievements" class="inheritor-extra">
+                <p v-if="inheritor.hometown" class="inheritor-hometown">籍贯：{{ inheritor.hometown }}</p>
+                <p v-if="inheritor.achievements" class="inheritor-achievements">主要成就：{{ inheritor.achievements }}</p>
+              </div>
             </div>
           </div>
         </div>
+        <div v-else-if="!loading" class="empty-state">
+          <p>暂无传承人数据</p>
+        </div>
+        <div v-if="loading" class="loading-state">
+          <p>加载中...</p>
+        </div>
       </div>
     </section>
 
@@ -186,115 +242,138 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { Picture, VideoPlay, Microphone } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { cultureApi } from '../api/culture'
+import { heritageApi } from '../api/heritage'
+
+const router = useRouter()
 
 // 响应式数据
 const activeTab = ref('hunting')
 const mediaGalleryVisible = ref(false)
 const mediaGalleryTitle = ref('')
 const currentMediaType = ref('')
+const loading = ref(false)
 
 // 文化标签页数据
-const cultureTabs = ref([
-  {
-    id: 'hunting',
-    name: '狩猎文化',
-    title: '森林中的狩猎传统',
-    description: '鄂伦春族是中国最后的狩猎民族，狩猎不仅是生存方式，更是文化核心。他们对森林动物习性了如指掌，形成了独特的狩猎技巧和狩猎伦理。',
-    items: [
-      '传统狩猎工具：弓箭、猎枪、陷阱等',
-      '狩猎技巧：追踪、伪装、团队协作',
-      '狩猎伦理：保护幼崽、适度捕猎',
-      '狩猎仪式：出猎前的祈祷和归来后的感恩'
-    ],
-    color: '#2d5016'
-  },
-  {
-    id: 'festival',
-    name: '节庆仪式',
-    title: '篝火节与传统庆典',
-    description: '篝火节是鄂伦春族最重要的传统节日，族人们围着篝火载歌载舞，庆祝丰收，祈求平安。这些仪式承载着深厚的文化内涵和精神寄托。',
-    items: [
-      '篝火节：每年6月18日，最盛大的民族节日',
-      '萨满仪式：祈福、治病、驱邪的宗教仪式',
-      '成年礼：青年男女的成人仪式',
-      '丰收庆典：庆祝狩猎和采集的丰收'
-    ],
-    color: '#8b4513'
-  },
-  {
-    id: 'food',
-    name: '饮食文化',
-    title: '森林中的美食传统',
-    description: '鄂伦春族的饮食以肉类为主，辅以野菜、野果。他们善于利用森林资源，创造出独特的烹饪方法和食品保存技术。',
-    items: [
-      '手把肉：传统的肉类烹饪方式',
-      '柳蒿芽：春季重要的野菜食材',
-      '烤肉串：篝火旁的传统美食',
-      '肉干制作：传统的食品保存方法'
-    ],
-    color: '#2d5016'
-  },
-  {
-    id: 'housing',
-    name: '居住文化',
-    title: '撮罗子与森林居所',
-    description: '撮罗子是鄂伦春族的传统居所，这种圆锥形建筑适应了游牧狩猎的生活方式，体现了人与自然和谐共处的智慧。',
-    items: [
-      '撮罗子结构：圆锥形框架，桦皮或兽皮覆盖',
-      '建造技巧：快速搭建，便于迁移',
-      '内部布局：火塘居中，功能区域明确',
-      '现代演变：从传统居所到文化象征'
-    ],
-    color: '#8b4513'
-  },
-  {
-    id: 'clothing',
-    name: '服饰文化',
-    title: '精美的传统服饰',
-    description: '鄂伦春族服饰以兽皮为主要材料，装饰精美的刺绣图案。服饰不仅具有实用功能，更承载着丰富的文化内涵和审美价值。',
-    items: [
-      '皮袍：主要服装，保暖实用',
-      '刺绣图案：花卉、动物、几何纹样',
-      '头饰配件：帽子、头巾、发饰',
-      '鞋靴制作：适应森林环境的鞋靴'
-    ],
-    color: '#2d5016'
-  }
-])
+const cultureTabs = ref<any[]>([])
+
+// 文化故事数据
+const cultureStories = ref<any[]>([])
 
 // 传承人数据
-const inheritors = ref([
-  {
-    id: 1,
-    name: '关小云',
-    title: '国家级非遗传承人',
-    skill: '鄂伦春族桦皮制作技艺',
-    description: '从事桦皮工艺制作40余年，作品精美，技艺精湛，致力于技艺传承和创新发展。'
-  },
-  {
-    id: 2,
-    name: '孟淑珍',
-    title: '自治区级非遗传承人',
-    skill: '鄂伦春族传统刺绣',
-    description: '精通传统刺绣技艺，图案设计独特，色彩搭配和谐，培养了众多刺绣爱好者。'
-  },
-  {
-    id: 3,
-    name: '白热布',
-    title: '民族文化研究专家',
-    skill: '鄂伦春族民歌传承',
-    description: '收集整理鄂伦春族民歌200余首，致力于民族音乐的保护和传播工作。'
-  },
-  {
-    id: 4,
-    name: '关金山',
-    title: '传统工艺大师',
-    skill: '木雕与狩猎工具制作',
-    description: '掌握传统木雕技艺和狩猎工具制作方法，作品展现浓郁的民族特色。'
+const inheritors = ref<any[]>([])
+
+// 获取文化故事数据
+const getCultureStories = async () => {
+  try {
+    loading.value = true
+    const response = await cultureApi.getCultureList({ 
+      pageNo: 1, 
+      pageSize: 6 
+    })
+    
+    if (response?.records && response.records.length > 0) {
+      cultureStories.value = response.records.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() : '未知日期',
+        categoryName: story.categoryName,
+        color: getRandomColor()
+      }))
+    } else {
+      cultureStories.value = []
+    }
+  } catch (error) {
+    console.error('获取文化故事失败:', error)
+    ElMessage.error('获取文化故事失败，请稍后重试')
+    cultureStories.value = []
+  } finally {
+    loading.value = false
   }
-])
+}
+
+// 跳转到文化详情页
+const goToCultureDetail = (id: string) => {
+  router.push(`/culture/${id}`)
+}
+
+// 获取文化数据
+const getCultureData = async () => {
+  try {
+    const response = await cultureApi.getCultureList({ 
+      pageNo: 1, 
+      pageSize: 20 
+    })
+    
+    if (response?.records && response.records.length > 0) {
+      // 将API数据转换为标签页格式
+      cultureTabs.value = response.records.slice(0, 5).map((culture: any, index: number) => ({
+        id: culture.id.toString(),
+        name: culture.title || `文化${index + 1}`,
+        title: culture.title || '文化传统',
+        description: culture.content || culture.description || '暂无描述',
+        items: culture.items ? culture.items.split(',') : ['传统技艺', '文化传承', '民族特色', '历史价值'],
+        color: index % 2 === 0 ? '#2d5016' : '#8b4513'
+      }))
+    } else {
+      cultureTabs.value = []
+      ElMessage.warning('暂无文化数据')
+    }
+  } catch (error) {
+    console.error('获取文化数据失败:', error)
+    ElMessage.error('获取文化数据失败，请稍后重试')
+    cultureTabs.value = []
+  }
+}
+
+// 获取传承人数据
+const getInheritors = async () => {
+  try {
+    loading.value = true
+    const response = await heritageApi.getInheritorList({ 
+      pageNo: 1, 
+      pageSize: 20,
+      status: 1 // 只获取启用状态的传承人
+    })
+    
+    if (response?.records && response.records.length > 0) {
+      inheritors.value = response.records.map((inheritor: any) => ({
+        id: inheritor.id,
+        name: inheritor.name,
+        title: inheritor.heritageLevel ? `${inheritor.heritageLevel}非遗传承人` : '非遗传承人',
+        skill: inheritor.heritageSkills || '传统技艺',
+        description: inheritor.biography || `${inheritor.name}是${inheritor.heritageSkills || '传统技艺'}的传承人，多年以来致力于技艺的传承和发展。`,
+        avatar: inheritor.avatar,
+        heritageLevel: inheritor.heritageLevel,
+        achievements: inheritor.achievements,
+        hometown: inheritor.hometown,
+        gender: inheritor.gender,
+        birthYear: inheritor.birthYear,
+        contactInfo: inheritor.contactInfo
+      }))
+    } else {
+      inheritors.value = []
+      console.log('暂无传承人数据')
+    }
+  } catch (error) {
+    console.error('获取传承人数据失败:', error)
+    ElMessage.error('获取传承人数据失败，请稍后重试')
+    inheritors.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取随机颜色
+const getRandomColor = () => {
+  const colors = ['#2d5016', '#8b4513']
+  return colors[Math.floor(Math.random() * colors.length)]
+}
 
 // 方法
 const openMediaGallery = (type: string) => {
@@ -312,6 +391,13 @@ const openMediaGallery = (type: string) => {
   }
   mediaGalleryVisible.value = true
 }
+
+// 组件挂载时获取数据
+onMounted(() => {
+  getCultureData()
+  getCultureStories()
+  getInheritors()
+})
 </script>
 
 <style scoped>
@@ -442,6 +528,77 @@ const openMediaGallery = (type: string) => {
   margin-right: 0.5rem;
 }
 
+/* 文化故事展示 */
+.culture-stories-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2rem;
+}
+
+.culture-story-card {
+  display: flex;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.culture-story-card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-hover);
+}
+
+.story-icon {
+  flex-shrink: 0;
+}
+
+.story-content {
+  flex: 1;
+}
+
+.story-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.8rem;
+  line-height: 1.4;
+}
+
+.story-excerpt {
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  font-size: 0.95rem;
+}
+
+.story-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.story-date {
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+.story-category {
+  background: var(--primary-color);
+  color: white;
+  padding: 0.2rem 0.6rem;
+  border-radius: 12px;
+  font-size: 0.8rem;
+}
+
+.empty-state,
+.loading-state {
+  text-align: center;
+  padding: 3rem;
+  color: var(--text-secondary);
+}
+
 /* 多媒体资源 */
 .media-categories {
   display: grid;
@@ -497,10 +654,33 @@ const openMediaGallery = (type: string) => {
   margin-bottom: 1.5rem;
 }
 
+.avatar-image {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid var(--primary-color);
+}
+
 .avatar-placeholder {
-  display: inline-block;
+  width: 80px;
+  height: 80px;
   border-radius: 50%;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.default-avatar {
+  border-radius: 50%;
+  transition: transform 0.3s ease, filter 0.3s ease;
+  cursor: pointer;
+}
+
+.default-avatar:hover {
+  transform: scale(1.05);
+  filter: brightness(1.1);
 }
 
 .inheritor-name {
@@ -524,6 +704,21 @@ const openMediaGallery = (type: string) => {
 .inheritor-description {
   color: var(--text-light);
   line-height: 1.6;
+  margin-bottom: 1rem;
+}
+
+.inheritor-extra {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.inheritor-hometown,
+.inheritor-achievements {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+  text-align: left;
 }
 
 /* 媒体画廊 */
@@ -581,7 +776,8 @@ const openMediaGallery = (type: string) => {
   }
   
   .media-categories,
-  .inheritors-grid {
+  .inheritors-grid,
+  .culture-stories-grid {
     grid-template-columns: 1fr;
   }
   
diff --git a/src/views/CultureDetail.vue b/src/views/CultureDetail.vue
new file mode 100644
index 0000000..a6d354e
--- /dev/null
+++ b/src/views/CultureDetail.vue
@@ -0,0 +1,477 @@
+<template>
+  <div class="culture-detail-page">
+    <!-- 面包屑导航 -->
+    <div class="breadcrumb">
+      <div class="container">
+        <router-link to="/">首页</router-link>
+        <span class="separator">/</span>
+        <router-link to="/culture">传统文化</router-link>
+        <span class="separator">/</span>
+        <span class="current">{{ cultureContent.title || '文化详情' }}</span>
+      </div>
+    </div>
+
+    <!-- 文化内容详情 -->
+    <div class="container">
+      <div class="culture-detail-container" v-if="!loading">
+        <!-- 文化内容卡片 -->
+        <div class="culture-card">
+          <!-- 头部信息 -->
+          <div class="culture-header">
+            <div class="culture-icon">
+              <svg width="60" height="60" viewBox="0 0 60 60">
+                <rect width="60" height="60" :fill="iconColor" opacity="0.1" rx="12"/>
+                <text x="30" y="38" text-anchor="middle" 
+                      :fill="iconColor" font-size="24" font-weight="bold">
+                  {{ cultureContent.title ? cultureContent.title.charAt(0) : '文' }}
+                </text>
+              </svg>
+            </div>
+            <div class="culture-meta">
+              <h1 class="culture-title">{{ cultureContent.title }}</h1>
+              <div class="culture-info">
+                <span class="culture-date">
+                  <el-icon><Calendar /></el-icon>
+                  {{ formatDate(cultureContent.createTime) }}
+                </span>
+                <span class="culture-category" v-if="cultureContent.categoryName">
+                  <el-icon><PriceTag /></el-icon>
+                  {{ cultureContent.categoryName }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 文化内容 -->
+          <div class="culture-content">
+            <div class="content-section" v-if="cultureContent.description">
+              <h3>简介</h3>
+              <p class="content-text">{{ cultureContent.description }}</p>
+            </div>
+            
+            <div class="content-section" v-if="cultureContent.content">
+              <h3>详细内容</h3>
+              <div class="content-text" v-html="formatContent(cultureContent.content)"></div>
+            </div>
+
+            <!-- 图片展示 -->
+            <div class="content-section" v-if="cultureContent.imageUrl">
+              <h3>相关图片</h3>
+              <div class="culture-images">
+                <img :src="cultureContent.imageUrl" :alt="cultureContent.title" class="culture-image">
+              </div>
+            </div>
+
+            <!-- 标签 -->
+            <div class="content-section" v-if="cultureContent.tags">
+              <h3>相关标签</h3>
+              <div class="culture-tags">
+                <span class="tag" v-for="tag in parseTags(cultureContent.tags)" :key="tag">
+                  {{ tag }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 相关文化内容推荐 -->
+        <div class="related-culture" v-if="relatedCultures.length > 0">
+          <h2 class="section-title">相关文化内容</h2>
+          <div class="related-grid">
+            <div 
+              class="related-item card" 
+              v-for="item in relatedCultures" 
+              :key="item.id"
+              @click="goToCultureDetail(item.id)"
+            >
+              <div class="related-icon">
+                <svg width="40" height="40" viewBox="0 0 40 40">
+                  <rect width="40" height="40" :fill="getRandomColor()" opacity="0.1" rx="8"/>
+                  <text x="20" y="26" text-anchor="middle" 
+                        :fill="getRandomColor()" font-size="16" font-weight="bold">
+                    {{ item.title ? item.title.charAt(0) : '文' }}
+                  </text>
+                </svg>
+              </div>
+              <div class="related-content">
+                <h4 class="related-title">{{ item.title }}</h4>
+                <p class="related-excerpt">{{ getExcerpt(item.content || item.description) }}</p>
+                <span class="related-date">{{ formatDate(item.createTime) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 加载状态 -->
+      <div class="loading-container" v-else>
+        <el-icon class="loading-icon" size="48"><Loading /></el-icon>
+        <p>加载中...</p>
+      </div>
+
+      <!-- 错误状态 -->
+      <div class="error-container" v-if="error">
+        <el-icon class="error-icon" size="48"><Warning /></el-icon>
+        <p>{{ error }}</p>
+        <el-button type="primary" @click="loadCultureDetail">重新加载</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Calendar, PriceTag, Loading, Warning } from '@element-plus/icons-vue'
+import { cultureApi } from '../api/culture'
+
+const route = useRoute()
+const router = useRouter()
+
+// 响应式数据
+const cultureContent = ref<any>({})
+const relatedCultures = ref<any[]>([])
+const loading = ref(true)
+const error = ref('')
+
+// 计算属性
+const iconColor = computed(() => {
+  const colors = ['#8b4513', '#2d5016', '#d4a574', '#5d4e37']
+  return colors[Math.floor(Math.random() * colors.length)]
+})
+
+// 加载文化内容详情
+const loadCultureDetail = async () => {
+  try {
+    loading.value = true
+    error.value = ''
+    
+    const id = route.params.id as string
+    if (!id) {
+      error.value = '文化内容ID不存在'
+      return
+    }
+
+    const response = await cultureApi.getCultureById(id)
+    if (response) {
+      cultureContent.value = response
+      // 加载相关内容
+      await loadRelatedCultures()
+    } else {
+      error.value = '文化内容不存在'
+    }
+  } catch (err: any) {
+    console.error('加载文化内容失败:', err)
+    if (err.message && err.message.includes('未找到对应数据')) {
+      error.value = '文化内容不存在'
+    } else {
+      error.value = '获取文化内容失败，请稍后重试'
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载相关文化内容
+const loadRelatedCultures = async () => {
+  try {
+    const response = await cultureApi.getRecommendedCulture()
+    if (response && response.length > 0) {
+      // 过滤掉当前文化内容，取前3个
+      relatedCultures.value = response
+        .filter((item: any) => item.id !== cultureContent.value.id)
+        .slice(0, 3)
+    }
+  } catch (err) {
+    console.error('加载相关文化内容失败:', err)
+  }
+}
+
+// 跳转到其他文化详情页
+const goToCultureDetail = (id: string) => {
+  router.push(`/culture/${id}`)
+}
+
+// 格式化日期
+const formatDate = (dateString: string) => {
+  if (!dateString) return '未知日期'
+  return new Date(dateString).toLocaleDateString('zh-CN')
+}
+
+// 格式化内容（简单的换行处理）
+const formatContent = (content: string) => {
+  if (!content) return ''
+  return content.replace(/\n/g, '<br>')
+}
+
+// 解析标签
+const parseTags = (tags: string) => {
+  if (!tags) return []
+  return tags.split(',').map(tag => tag.trim()).filter(tag => tag)
+}
+
+// 获取摘要
+const getExcerpt = (content: string) => {
+  if (!content) return '暂无描述'
+  return content.length > 80 ? content.substring(0, 80) + '...' : content
+}
+
+// 获取随机颜色
+const getRandomColor = () => {
+  const colors = ['#8b4513', '#2d5016', '#d4a574', '#5d4e37']
+  return colors[Math.floor(Math.random() * colors.length)]
+}
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadCultureDetail()
+})
+</script>
+
+<style scoped>
+.culture-detail-page {
+  min-height: 100vh;
+  background: var(--background-light);
+}
+
+/* 面包屑导航 */
+.breadcrumb {
+  background: white;
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.breadcrumb a {
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+
+.breadcrumb a:hover {
+  color: var(--primary-color);
+}
+
+.separator {
+  margin: 0 0.5rem;
+  color: var(--text-secondary);
+}
+
+.current {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+/* 主容器 */
+.culture-detail-container {
+  padding: 2rem 0;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+/* 文化内容卡片 */
+.culture-card {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: var(--shadow);
+  margin-bottom: 2rem;
+}
+
+.culture-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.culture-icon {
+  flex-shrink: 0;
+}
+
+.culture-meta {
+  flex: 1;
+}
+
+.culture-title {
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+  line-height: 1.3;
+}
+
+.culture-info {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.culture-date,
+.culture-category {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+/* 内容区域 */
+.culture-content {
+  line-height: 1.8;
+}
+
+.content-section {
+  margin-bottom: 2rem;
+}
+
+.content-section h3 {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--primary-color);
+  display: inline-block;
+}
+
+.content-text {
+  color: var(--text-primary);
+  font-size: 1rem;
+  line-height: 1.8;
+}
+
+/* 图片展示 */
+.culture-images {
+  display: grid;
+  gap: 1rem;
+}
+
+.culture-image {
+  width: 100%;
+  max-width: 600px;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+}
+
+/* 标签 */
+.culture-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tag {
+  background: var(--primary-color);
+  color: white;
+  padding: 0.3rem 0.8rem;
+  border-radius: 20px;
+  font-size: 0.85rem;
+}
+
+/* 相关文化内容 */
+.related-culture {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: var(--shadow);
+}
+
+.section-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--text-primary);
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.related-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.related-item {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.related-item:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-hover);
+}
+
+.related-icon {
+  flex-shrink: 0;
+}
+
+.related-content {
+  flex: 1;
+}
+
+.related-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.related-excerpt {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin-bottom: 0.5rem;
+}
+
+.related-date {
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+}
+
+/* 加载和错误状态 */
+.loading-container,
+.error-container {
+  text-align: center;
+  padding: 3rem;
+  color: var(--text-secondary);
+}
+
+.loading-icon,
+.error-icon {
+  margin-bottom: 1rem;
+  color: var(--primary-color);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .culture-detail-container {
+    padding: 1rem;
+  }
+  
+  .culture-card {
+    padding: 1.5rem;
+  }
+  
+  .culture-header {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .culture-title {
+    font-size: 1.5rem;
+  }
+  
+  .culture-info {
+    justify-content: center;
+  }
+  
+  .related-item {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Heritage.vue b/src/views/Heritage.vue
index 3856f21..af34077 100644
--- a/src/views/Heritage.vue
+++ b/src/views/Heritage.vue
@@ -4,7 +4,7 @@
     <section class="page-header">
       <div class="container">
         <div class="header-content">
-          <h1 class="page-title">非物质文化遗产</h1>
+          <h1 class="page-title">非遗文化</h1>
           <p class="page-subtitle">传承千年技艺，保护民族瑰宝</p>
         </div>
       </div>
@@ -60,51 +60,117 @@
       <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 v-for="craft in displayedCrafts" :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 class="video-container">
+                <video 
+                  :src="getFileAccessHttpUrl(craft.videoUrl)"
+                  controls
+                  autoplay
+                  muted
+                  loop
+                  preload="metadata"
+                  class="craft-video"
+                  @error="handleVideoError"
+                  @loadstart="handleVideoLoadStart"
+                  @canplay="handleVideoCanPlay"
+                >
+                  您的浏览器不支持视频播放。
+                </video>
+                <div class="video-overlay">
+                  <div class="video-info">
+                    <h4 class="video-title">{{ craft.name }}</h4>
+                    <p class="video-category">传统技艺</p>
+                  </div>
+                </div>
               </div>
             </div>
             <div class="craft-content">
-              <h3 class="craft-title">{{ craft.name }}</h3>
+              <div class="craft-header">
+                <h3 class="craft-title">{{ craft.name }}</h3>
+                <div class="craft-tags">
+                  <span class="craft-tag">非遗</span>
+                  <span class="craft-tag">传统技艺</span>
+                </div>
+              </div>
               <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 v-if="craft.inheritorName" class="craft-inheritor">
+                <div class="inheritor-info">
+                  <div class="inheritor-avatar-small">
+                    <svg viewBox="0 0 40 40" width="40" height="40">
+                      <circle cx="20" cy="20" r="18" fill="var(--primary-color)" opacity="0.2"/>
+                      <circle cx="20" cy="15" r="6" fill="var(--primary-color)" opacity="0.5"/>
+                      <path d="M10 30 Q20 25 30 30 L30 35 L10 35 Z" 
+                            fill="var(--primary-color)" opacity="0.5"/>
+                    </svg>
+                  </div>
+                  <div class="inheritor-details">
+                    <p class="inheritor-name"><strong>传承人：</strong>{{ craft.inheritorName }}</p>
+                    <p class="inheritor-level">代表性传承人</p>
+                  </div>
+                </div>
+              </div>
+              <div v-if="craft.steps && craft.steps.length > 0" class="craft-steps">
+                <h4>制作工艺</h4>
+                <div class="steps-container">
+                  <div v-for="(step, index) in craft.steps.slice(0, 3)" :key="index" class="step-item">
+                    <div class="step-number">{{ index + 1 }}</div>
+                    <div class="step-content">{{ step }}</div>
+                  </div>
+                  <div v-if="craft.steps.length > 3" class="more-steps">
+                    <span>还有 {{ craft.steps.length - 3 }} 个步骤...</span>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
+        
+        <!-- 加载更多技艺按钮 -->
+        <div v-if="!showAllCrafts && crafts.filter(craft => craft.videoUrl && craft.videoUrl.trim() !== '').length > 3" class="load-more-container">
+          <el-button 
+            type="primary" 
+            size="large" 
+            @click="loadMoreCrafts"
+            :loading="loading"
+          >
+            加载更多技艺展示
+          </el-button>
+        </div>
+        
+        <!-- 显示全部后的提示 -->
+        <div v-if="showAllCrafts && crafts.filter(craft => craft.videoUrl && craft.videoUrl.trim() !== '').length > 3" class="all-loaded-tip">
+          <p>已显示全部 {{ crafts.filter(craft => craft.videoUrl && craft.videoUrl.trim() !== '').length }} 项技艺</p>
+        </div>
       </div>
     </section>
 
     <!-- 传承人故事 -->
-    <section class="section">
+    <section v-if="inheritorStories.length > 0" 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 
+            v-for="story in displayedStories" 
+            :key="story.id" 
+            class="story-card card clickable-card" 
+            @click="viewInheritorDetails(story)"
+          >
             <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"/>
+                  <img v-if="story.avatar" :src="getFileAccessHttpUrl(story.avatar)" :alt="story.name" class="avatar-image" />
+                  <svg v-else viewBox="0 0 80 80" width="80" height="80" class="default-avatar">
+                    <defs>
+                      <linearGradient id="defaultAvatarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" style="stop-color:#ff9a9e;stop-opacity:1" />
+                        <stop offset="100%" style="stop-color:#fecfef;stop-opacity:1" />
+                      </linearGradient>
+                    </defs>
+                    <circle cx="40" cy="40" r="40" fill="url(#defaultAvatarGradient)"/>
+                    <!-- 简洁的人像图标 -->
+                    <circle cx="40" cy="30" r="10" fill="white" opacity="0.9"/>
+                    <path d="M 20 65 Q 20 50 40 50 Q 60 50 60 65 L 60 70 Q 60 75 55 75 L 25 75 Q 20 75 20 70 Z" fill="white" opacity="0.9"/>
                   </svg>
                 </div>
               </div>
@@ -119,20 +185,44 @@
               <p>{{ story.story }}</p>
               <h4>代表作品</h4>
               <div class="works-grid">
-                <div v-for="work in story.works" :key="work" class="work-item">
+                <div v-for="work in story.works" :key="work.id" class="work-item">
                   <div class="work-image">
-                    <svg viewBox="0 0 100 80" width="100" height="80">
+                    <img v-if="work.work_images" :src="getFileAccessHttpUrl(work.work_images)" :alt="work.name" class="work-cover-image" />
+                    <svg v-else 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>
+                            font-size="10">{{ work.name.substring(0, 2) }}</text>
                     </svg>
                   </div>
-                  <p class="work-name">{{ work }}</p>
+                  <p class="work-name">{{ work.name }}</p>
                 </div>
               </div>
             </div>
+            
+            <!-- 点击提示 -->
+            <div class="click-hint">
+              <el-icon><ArrowRight /></el-icon>
+              <span>点击查看详情</span>
+            </div>
           </div>
         </div>
+        
+        <!-- 加载更多按钮 -->
+        <div v-if="!showAllStories && inheritorStories.length > 3" class="load-more-container">
+          <el-button 
+            type="primary" 
+            size="large" 
+            @click="loadMoreStories"
+            :loading="loading"
+          >
+            加载更多传承人故事
+          </el-button>
+        </div>
+        
+        <!-- 显示全部后的提示 -->
+        <div v-if="showAllStories && inheritorStories.length > 3" class="all-loaded-tip">
+          <p>已显示全部 {{ inheritorStories.length }} 位传承人的故事</p>
+        </div>
       </div>
     </section>
 
@@ -143,20 +233,20 @@
         <div class="protection-overview">
           <div class="protection-stats">
             <div class="stat-card">
-              <div class="stat-number">15</div>
+              <div class="stat-number">{{ protectionStats.national }}</div>
               <div class="stat-label">国家级非遗项目</div>
             </div>
             <div class="stat-card">
-              <div class="stat-number">28</div>
+              <div class="stat-number">{{ protectionStats.provincial }}</div>
               <div class="stat-label">省级非遗项目</div>
             </div>
             <div class="stat-card">
-              <div class="stat-number">45</div>
+              <div class="stat-number">{{ protectionStats.inheritors }}</div>
               <div class="stat-label">代表性传承人</div>
             </div>
             <div class="stat-card">
-              <div class="stat-number">8</div>
-              <div class="stat-label">传承基地</div>
+              <div class="stat-number">{{ protectionStats.municipal }}</div>
+              <div class="stat-label">市级非遗项目</div>
             </div>
           </div>
           
@@ -198,6 +288,151 @@
     </section>
 
     <!-- 详情对话框 -->
+    <!-- 传承人详情对话框 -->
+    <el-dialog 
+      v-model="inheritorDetailDialogVisible" 
+      :title="selectedInheritor?.name + ' - 传承人详情'" 
+      width="80%" 
+      top="5vh"
+      class="inheritor-detail-dialog"
+    >
+      <div v-if="selectedInheritor" class="inheritor-detail">
+        <div class="inheritor-detail-header">
+          <div class="inheritor-large-avatar">
+            <div class="large-avatar-placeholder">
+              <img v-if="selectedInheritor.avatar" :src="getFileAccessHttpUrl(selectedInheritor.avatar)" :alt="selectedInheritor.name" class="large-avatar-image" />
+              <svg v-else viewBox="0 0 120 120" width="120" height="120" class="default-large-avatar">
+                <defs>
+                  <linearGradient id="defaultLargeAvatarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" style="stop-color:#ff9a9e;stop-opacity:1" />
+                    <stop offset="100%" style="stop-color:#fecfef;stop-opacity:1" />
+                  </linearGradient>
+                </defs>
+                <circle cx="60" cy="60" r="60" fill="url(#defaultLargeAvatarGradient)"/>
+                <!-- 简洁的人像图标 -->
+                <circle cx="60" cy="45" r="15" fill="white" opacity="0.9"/>
+                <path d="M 30 97 Q 30 75 60 75 Q 90 75 90 97 L 90 105 Q 90 112 82 112 L 38 112 Q 30 112 30 105 Z" fill="white" opacity="0.9"/>
+              </svg>
+            </div>
+          </div>
+          <div class="inheritor-detail-info">
+                <h2 class="inheritor-detail-name">{{ selectedInheritor.name }}</h2>
+                <p class="inheritor-detail-title">{{ selectedInheritor.title }}</p>
+                <div class="inheritor-meta">
+                  <div class="meta-item">
+                    <span class="meta-label">年龄：</span>
+                    <span class="meta-value">{{ selectedInheritor.age }}岁</span>
+                  </div>
+                  <div class="meta-item">
+                    <span class="meta-label">从艺经验：</span>
+                    <span class="meta-value">{{ selectedInheritor.experience }}年</span>
+                  </div>
+                  <div class="meta-item">
+                    <span class="meta-label">专业技艺：</span>
+                    <span class="meta-value">{{ selectedInheritor.skill || '传统技艺' }}</span>
+                  </div>
+                  <div class="meta-item">
+                    <span class="meta-label">传承级别：</span>
+                    <span class="meta-value">{{ selectedInheritor.level || '市级' }}</span>
+                  </div>
+                  <div v-if="selectedInheritor.hometown" class="meta-item">
+                    <span class="meta-label">籍贯：</span>
+                    <span class="meta-value">{{ selectedInheritor.hometown }}</span>
+                  </div>
+                  <div v-if="selectedInheritor.gender !== null" class="meta-item">
+                    <span class="meta-label">性别：</span>
+                    <span class="meta-value">{{ selectedInheritor.gender === 1 ? '男' : '女' }}</span>
+                  </div>
+                  <div v-if="selectedInheritor.birthYear" class="meta-item">
+                    <span class="meta-label">出生年份：</span>
+                    <span class="meta-value">{{ selectedInheritor.birthYear }}年</span>
+                  </div>
+                </div>
+          </div>
+        </div>
+        
+        <div class="inheritor-detail-content">
+          <div class="detail-section">
+            <h3 class="section-title">个人简介</h3>
+            <p class="section-content">{{ selectedInheritor.biography || selectedInheritor.story }}</p>
+          </div>
+          
+          <div class="detail-section">
+            <h3 class="section-title">传承故事</h3>
+            <p class="section-content">{{ selectedInheritor.story }}</p>
+          </div>
+          
+          <div class="detail-section">
+            <h3 class="section-title">主要成就</h3>
+            <p class="section-content">{{ selectedInheritor.achievements || '在传统技艺传承方面做出了重要贡献，培训了多名优秀学徒，参与了多项文化保护项目。' }}</p>
+          </div>
+          
+          <div class="detail-section">
+            <h3 class="section-title">代表作品</h3>
+            <div class="works-showcase">
+              <div v-for="work in selectedInheritor.works" :key="work.id" class="work-showcase-item">
+                <!-- 作品封面图片 -->
+                <div class="work-showcase-image">
+                  <img 
+                    v-if="work.work_images" 
+                    :src="getFileAccessHttpUrl(work.work_images)" 
+                    :alt="work.name"
+                    class="work-cover-image"
+                    @click="openImagePreview([work.work_images], 0)"
+                  />
+                  <div v-else class="no-image-placeholder">
+                    <el-icon size="40"><Picture /></el-icon>
+                    <span>暂无图片</span>
+                  </div>
+                </div>
+                
+                <!-- 作品信息和画廊 -->
+                <div class="work-content">
+                  <div class="work-info">
+                    <h4 class="work-showcase-name">{{ work.name }}</h4>
+                    <p class="work-showcase-desc">{{ work.description }}</p>
+                    
+                    <div class="work-meta-info">
+                      <span class="work-category">{{ work.category || '传统技艺' }}</span>
+                      <span class="work-level">{{ work.level || '国家级' }}</span>
+                    </div>
+                    
+                    <div v-if="work.tags && work.tags.length > 0" class="work-tags">
+                      <span v-for="tag in work.tags" :key="tag" class="work-tag">{{ tag }}</span>
+                    </div>
+                  </div>
+                  
+                  <!-- 右侧画廊缩略图 -->
+                  <div v-if="work.additionalImages && work.additionalImages.length > 0" class="work-gallery">
+                    <div class="gallery-title">更多图片</div>
+                    <div class="gallery-thumbnails">
+                      <div 
+                        v-for="(image, index) in work.additionalImages.slice(0, 4)" 
+                        :key="index" 
+                        class="gallery-thumb"
+                        @click="openImagePreview([work.work_images, ...work.additionalImages], index + 1)"
+                      >
+                        <img :src="getFileAccessHttpUrl(image)" :alt="`${work.name} - 图片${index + 2}`" />
+                        <div class="thumb-overlay">
+                          <el-icon><ZoomIn /></el-icon>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="detail-section">
+            <h3 class="section-title">传承理念</h3>
+            <p class="section-content">{{ selectedInheritor.philosophy || '传承不仅是技艺的延续，更是文化精神的传递。我希望通过自己的努力，让更多年轻人了解和热爱我们的传统文化。' }}</p>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 非遗项目详情对话框 -->
     <el-dialog v-model="detailDialogVisible" :title="selectedHeritage?.name" width="70%" top="5vh">
       <div v-if="selectedHeritage" class="heritage-detail">
         <div class="detail-image">
@@ -224,17 +459,86 @@
         </div>
       </div>
     </el-dialog>
+    <!-- 图片预览对话框 -->
+    <el-dialog 
+      v-model="imagePreviewVisible" 
+      title="图片预览" 
+      width="80%" 
+      top="5vh"
+      class="image-preview-dialog"
+      @close="closeImagePreview"
+    >
+      <div v-if="previewImages.length > 0" class="image-preview-container">
+        <div class="preview-main">
+          <img 
+            :src="previewImages[currentImageIndex]" 
+            :alt="`预览图片 ${currentImageIndex + 1}`"
+            class="preview-image"
+          />
+        </div>
+        
+        <!-- 图片导航 -->
+        <div v-if="previewImages.length > 1" class="preview-navigation">
+          <el-button 
+            :disabled="currentImageIndex === 0"
+            @click="currentImageIndex--"
+            circle
+            size="large"
+          >
+            <el-icon><ArrowLeft /></el-icon>
+          </el-button>
+          
+          <span class="image-counter">
+            {{ currentImageIndex + 1 }} / {{ previewImages.length }}
+          </span>
+          
+          <el-button 
+            :disabled="currentImageIndex === previewImages.length - 1"
+            @click="currentImageIndex++"
+            circle
+            size="large"
+          >
+            <el-icon><ArrowRight /></el-icon>
+          </el-button>
+        </div>
+        
+        <!-- 缩略图导航 -->
+        <div v-if="previewImages.length > 1" class="preview-thumbnails">
+          <div 
+            v-for="(image, index) in previewImages" 
+            :key="index"
+            class="preview-thumb"
+            :class="{ active: index === currentImageIndex }"
+            @click="currentImageIndex = index"
+          >
+            <img :src="image" :alt="`缩略图 ${index + 1}`" />
+          </div>
+        </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'
+import { ref, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { VideoPlay, School, Camera, Trophy, Money, ArrowRight, Picture, ZoomIn, ArrowLeft } from '@element-plus/icons-vue'
+import { heritageApi } from '../api/heritage'
 
 // 响应式数据
 const activeLevel = ref('national')
 const detailDialogVisible = ref(false)
 const selectedHeritage = ref(null)
+const loading = ref(false)
+
+// 传承人详情对话框控制
+const inheritorDetailDialogVisible = ref(false)
+const selectedInheritor = ref(null)
+
+// 图片预览对话框控制
+const imagePreviewVisible = ref(false)
+const previewImages = ref<string[]>([])
+const currentImageIndex = ref(0)
 
 // 非遗级别
 const heritageLevels = ref([
@@ -244,116 +548,416 @@ const heritageLevels = ref([
 ])
 
 // 非遗项目数据
-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 heritageItems = ref<any>({
+  national: [],
+  provincial: [],
+  municipal: []
 })
 
 // 技艺展示数据
-const crafts = ref([
-  {
-    id: 1,
-    name: '桦皮制作技艺',
-    description: '从采集桦皮到制作成品的完整工艺流程',
-    color: '#8b4513',
-    steps: [
-      '选择合适的白桦树',
-      '小心剥取桦皮',
-      '清理和处理桦皮',
-      '设计制作图案',
-      '缝制和装饰',
-      '最终成品整理'
-    ]
-  },
-  {
-    id: 2,
-    name: '传统刺绣工艺',
-    description: '精美的手工刺绣制作过程',
-    color: '#2d5016',
-    steps: [
-      '设计刺绣图案',
-      '选择合适面料',
-      '准备彩色丝线',
-      '绷布固定',
-      '精细刺绣',
-      '后期整理装裱'
-    ]
-  }
-])
+const crafts = ref<any[]>([])
 
 // 传承人故事数据
-const inheritorStories = ref([
-  {
-    id: 1,
-    name: '关小云',
-    title: '国家级非遗传承人',
-    age: 68,
-    experience: 45,
-    story: '从小跟随祖母学习桦皮制作技艺，经过几十年的钻研和实践，不仅掌握了传统技法，还在保持传统的基础上进行了创新发展。她制作的桦皮工艺品不仅实用，更是艺术品，深受人们喜爱。',
-    works: ['桦皮首饰盒', '桦皮装饰画', '桦皮茶具', '桦皮摆件']
-  },
-  {
-    id: 2,
-    name: '孟淑珍',
-    title: '自治区级非遗传承人',
-    age: 72,
-    experience: 50,
-    story: '自幼学习刺绣技艺，对传统图案有着深入的研究和理解。她的刺绣作品图案精美，色彩和谐，充分体现了鄂伦春族的文化特色。多年来培养了众多学生，为技艺传承做出了重要贡献。',
-    works: ['传统服饰刺绣', '装饰挂画', '手工包袋', '民族头饰']
+const inheritorStories = ref<any[]>([])
+
+// 传承人故事分页控制
+const showAllStories = ref(false)
+
+// 技艺展示分页控制
+const showAllCrafts = ref(false)
+
+// 计算属性：显示的传承人故事
+const displayedStories = computed(() => {
+  if (showAllStories.value) {
+    return inheritorStories.value
   }
-])
+  return inheritorStories.value.slice(0, 3)
+})
+
+// 计算属性：显示的技艺展示
+const displayedCrafts = computed(() => {
+  // 先过滤出有视频的技艺项目
+  const craftsWithVideo = crafts.value.filter(craft => craft.videoUrl && craft.videoUrl.trim() !== '')
+  
+  if (showAllCrafts.value) {
+    return craftsWithVideo
+  }
+  return craftsWithVideo.slice(0, 3)
+})
+
+// 保护现状统计数据
+const protectionStats = ref({
+  national: 0,
+  provincial: 0,
+  municipal: 0,
+  inheritors: 0
+})
+
+// 获取保护现状统计数据
+const getProtectionStats = async () => {
+  console.log('=== 开始获取保护现状统计数据 ===')
+  try {
+    // 获取级别统计
+    console.log('调用API: getLevelStats')
+    const statsResponse = await heritageApi.getLevelStats()
+    console.log('级别统计数据完整响应:', JSON.stringify(statsResponse, null, 2))
+    
+    // 重置统计数据
+    protectionStats.value = {
+      national: 0,
+      provincial: 0,
+      municipal: 0,
+      inheritors: 0
+    }
+    
+    // 处理响应数据 - 检查是否有result字段
+    let dataArray = null
+    if (statsResponse?.result && Array.isArray(statsResponse.result)) {
+      // 包含result字段的对象（正确的API响应格式）
+      dataArray = statsResponse.result
+      console.log('响应包含result字段，数组长度:', dataArray.length)
+    } else if (Array.isArray(statsResponse)) {
+      // 直接是数组
+      dataArray = statsResponse
+      console.log('响应是直接数组，长度:', dataArray.length)
+    } else {
+      console.log('API响应格式不正确:', statsResponse)
+      console.log('statsResponse?.result:', statsResponse?.result)
+      console.log('Array.isArray(statsResponse):', Array.isArray(statsResponse))
+    }
+    
+    if (dataArray && Array.isArray(dataArray)) {
+      // 处理统计数据 - 后端返回的是带count字段的统计对象
+      dataArray.forEach((item: any, index: number) => {
+        console.log(`处理统计项 [${index}]:`, JSON.stringify(item, null, 2))
+        
+        const level = item.heritage_level || item.heritageLevel
+        const count = item.count || 0
+        console.log('项目级别:', level, '数量:', count)
+        
+        if (level === '国家级') {
+          protectionStats.value.national = count
+          console.log('设置国家级数量:', count)
+        } else if (level === '省级') {
+          protectionStats.value.provincial = count
+          console.log('设置省级数量:', count)
+        } else if (level === '市级') {
+          protectionStats.value.municipal = count
+          console.log('设置市级数量:', count)
+        } else {
+          console.log('未识别的级别:', level)
+        }
+      })
+    }
+    
+    // 获取传承人数量
+    console.log('调用API: getInheritorList')
+    const inheritorResponse = await heritageApi.getInheritorList({ 
+      pageNo: 1, 
+      pageSize: 1000 
+    })
+    
+    if (inheritorResponse?.total) {
+      protectionStats.value.inheritors = inheritorResponse.total
+    } else if (inheritorResponse?.records) {
+      protectionStats.value.inheritors = inheritorResponse.records.length
+    }
+    
+    console.log('=== 最终保护现状统计 ===:', protectionStats.value)
+    
+  } catch (error) {
+    console.error('获取保护现状统计失败:', error)
+    // 使用默认值
+    protectionStats.value = {
+      national: 0,
+      provincial: 0,
+      municipal: 0,
+      inheritors: 0
+    }
+  }
+}
+
+// 获取传承人数据
+const getInheritors = async () => {
+  try {
+    loading.value = true
+    const response = await heritageApi.getInheritorList({ 
+      pageNo: 1, 
+      pageSize: 20 
+    })
+    
+    if (response?.records && response.records.length > 0) {
+      // 获取所有非遗项目数据用于匹配代表作品
+      const projectsResponse = await heritageApi.getHeritageProjectList({ pageNo: 1, pageSize: 1000 })
+      const allProjects = projectsResponse?.records || []
+      
+      // 将API数据转换为页面需要的格式
+      inheritorStories.value = response.records.map((inheritor: any) => {
+        // 查找该传承人相关的项目
+        const relatedProjects = allProjects.filter((project: any) => {
+          // 检查项目的关联传承人ID字段
+          const inheritorIds = project.inheritorIds || ''
+          return inheritorIds.includes(inheritor.id) || 
+                 project.projectName === inheritor.heritageSkills ||
+                 (inheritor.representativeWorks && inheritor.representativeWorks.includes(project.projectName))
+        })
+        
+        // 构建代表作品列表，优先使用关联的项目数据
+        let works = []
+        if (relatedProjects.length > 0) {
+          works = relatedProjects.map((project: any) => ({
+            id: project.id,
+            name: project.projectName,
+            description: project.description || project.fullDescription || '暂无描述',
+            category: project.category || '传统技艺',
+            level: project.heritageLevel || '市级',
+            work_images: project.coverImage,
+            additionalImages: project.images ? project.images.split(',').filter(img => img.trim() !== '') : [],
+            videoUrl: project.videoUrl,
+            tags: project.tags ? project.tags.split(',') : ['传统技艺']
+          }))
+          console.log(`传承人 ${inheritor.name} 的关联项目作品:`, works)
+        } else if (inheritor.representativeWorks || inheritor.workImages) {
+          // 如果没有关联项目，使用传承人的代表作品字段或作品图片字段
+          let workImages = []
+          
+          // 优先使用workImages字段，如果没有则使用representativeWorks字段
+          if (inheritor.workImages && inheritor.workImages.trim() !== '') {
+            workImages = inheritor.workImages.split(',').filter(item => 
+              item.trim() !== '' && item.trim().match(/\.(jpg|jpeg|png|gif|webp)$/i)
+            )
+            console.log(`传承人 ${inheritor.name} 的workImages字段:`, inheritor.workImages)
+          } else if (inheritor.representativeWorks) {
+            // 检查representativeWorks是否包含图片路径
+            workImages = inheritor.representativeWorks.split(',').filter(item => 
+              item.trim().match(/\.(jpg|jpeg|png|gif|webp)$/i)
+            )
+            console.log(`传承人 ${inheritor.name} 的representativeWorks字段:`, inheritor.representativeWorks)
+          }
+          
+          if (workImages.length > 0) {
+            // 如果包含图片路径，创建基于图片的作品
+            const additionalImages = workImages.slice(1).map(img => img.trim()).filter(img => img !== '')
+            works = [{
+              id: `work_${inheritor.id}`,
+              name: `${inheritor.name}的代表作品`,
+              description: inheritor.heritageSkills || '传承人代表作品',
+              category: '传统技艺',
+              level: inheritor.heritageLevel || '市级',
+              work_images: workImages[0].trim(), // 第一张作为封面
+              additionalImages: additionalImages, // 其余作为额外图片
+              videoUrl: null,
+              tags: ['传统技艺', '手工制作']
+            }]
+            console.log(`传承人 ${inheritor.name} 的代表作品:`)
+            console.log('- 封面图片:', workImages[0].trim())
+            console.log('- 其他图片:', additionalImages)
+            console.log('- 完整作品数据:', works)
+          } else if (inheritor.representativeWorks) {
+            // 如果representativeWorks是文字描述的作品名称
+            works = inheritor.representativeWorks.split(',').map((work: string, index: number) => ({
+              id: `work_${inheritor.id}_${index}`,
+              name: work.trim(),
+              description: '传承人代表作品',
+              category: '传统技艺',
+              level: inheritor.heritageLevel || '市级',
+              work_images: null,
+              additionalImages: [],
+              videoUrl: null,
+              tags: ['传统技艺', '手工制作']
+            }))
+          }
+        } else {
+          // 默认作品
+          works = [{
+            id: `default_${inheritor.id}`,
+            name: '传统手工艺品',
+            description: '传承人精心制作的传统工艺作品',
+            category: '传统技艺',
+            level: inheritor.heritageLevel || '市级',
+            work_images: null,
+            additionalImages: [],
+            videoUrl: null,
+            tags: ['传统技艺', '民族特色']
+          }]
+        }
+        
+        // 计算年龄和从艺经验
+        const currentYear = new Date().getFullYear()
+        const age = inheritor.birthYear ? currentYear - inheritor.birthYear : null
+        const experience = inheritor.birthYear ? Math.max(15, age - 18) : null
+        
+        // 处理传承级别显示
+        const levelMap = {
+          'national': '国家级',
+          'provincial': '省级', 
+          'municipal': '市级',
+          'county': '县级'
+        }
+        const displayLevel = levelMap[inheritor.heritageLevel] || inheritor.heritageLevel || '市级'
+        
+        // 处理性别显示
+        const genderText = inheritor.gender === 1 ? '男' : inheritor.gender === 0 ? '女' : null
+        
+        return {
+          id: inheritor.id,
+          name: inheritor.name || '未知传承人',
+          title: inheritor.heritageSkills || '传承人',
+          age: age,
+          experience: experience,
+          story: inheritor.biography || `${inheritor.name}是${inheritor.heritageSkills || '传统技艺'}的传承人，多年以来致力于技艺的传承和发展，为保护和弘扬鄂伦春族文化做出了重要贡献。`,
+          works: works,
+          skill: inheritor.heritageSkills,
+          level: displayLevel,
+          achievements: inheritor.achievements || '在传统技艺传承方面做出了重要贡献，培训了多名优秀学徒，参与了多项文化保护项目。',
+          hometown: inheritor.hometown,
+          avatar: inheritor.avatar,
+          contactInfo: inheritor.contactInfo,
+          gender: inheritor.gender,
+          genderText: genderText,
+          birthYear: inheritor.birthYear,
+          biography: inheritor.biography,
+          representativeWorks: inheritor.representativeWorks,
+          status: inheritor.status
+        }
+      }).filter(inheritor => inheritor.status === 1) // 只显示状态为启用的传承人
+      
+      // 同时更新技艺展示数据 - 直接从所有非遗项目中获取
+      const allProjectsForCrafts = [...(heritageItems.value.national || []), ...(heritageItems.value.provincial || []), ...(heritageItems.value.municipal || [])]
+      
+      // 将所有非遗项目转换为技艺展示数据
+      const craftData = allProjectsForCrafts.map((project: any, index: number) => {
+        // 查找对应的传承人
+        const matchedInheritor = response.records.find((inheritor: any) => inheritor.heritageProject === project.id)
+        
+        return {
+          id: project.id,
+          name: project.name,
+          description: project.description || `${project.name}是鄂伦春族的传统技艺，具有深厚的文化底蕴和独特的制作工艺。`,
+          color: ['#8b4513', '#2d5016', '#d2691e', '#8b4513'][index % 4],
+          steps: project.craftProcess && project.craftProcess.length > 0 ? project.craftProcess : [],
+          videoUrl: project.videoUrl || '',
+          inheritorName: matchedInheritor ? matchedInheritor.name : null,
+          achievements: matchedInheritor ? matchedInheritor.achievements : null,
+          works: matchedInheritor ? matchedInheritor.representativeWorks : null
+        }
+      })
+      
+      crafts.value = craftData
+    }
+    
+    // 如果没有数据，显示空状态
+    if (inheritorStories.value.length === 0) {
+      ElMessage.warning('暂无传承人数据')
+    }
+    
+  } catch (error) {
+    console.error('获取传承人数据失败:', error)
+    ElMessage.error('获取传承人数据失败，请稍后重试')
+    inheritorStories.value = []
+    crafts.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取非遗项目数据
+const getHeritageItems = async () => {
+  try {
+    loading.value = true
+    
+    // 获取各级别的非遗项目数据
+    const [nationalResponse, provincialResponse, municipalResponse] = await Promise.all([
+      heritageApi.getProjectsByLevel('国家级'),
+      heritageApi.getProjectsByLevel('省级'),
+      heritageApi.getProjectsByLevel('市级')
+    ])
+    console.log(nationalResponse, provincialResponse, municipalResponse)
+    
+    // 处理数据格式
+    const processProjects = (projects: any[]) => {
+      if (!Array.isArray(projects)) {
+        console.log('projects不是数组:', projects)
+        return []
+      }
+      return projects.map((project: any) => ({
+        id: project.id,
+        name: project.projectName,
+        category: project.category,
+        description: project.description,
+        fullDescription: project.fullDescription || project.description,
+        history: project.history || '历史悠久，传承至今',
+        features: project.features ? project.features.split(',') : ['传统技艺', '文化价值', '历史意义'],
+        value: project.value || '具有重要的文化价值和历史意义',
+        coverImage: project.coverImage,
+        images: project.images ? project.images.split(',') : [],
+        videoUrl: project.videoUrl,
+        audioUrl: project.audioUrl,
+        tags: project.tags ? project.tags.split(',') : [],
+        inheritorIds: project.inheritorIds ? project.inheritorIds.split(',') : [],
+        protectionUnit: project.protectionUnit,
+        protectionMeasures: project.protectionMeasures,
+        currentStatus: project.currentStatus || '保护良好',
+        viewCount: project.viewCount || 0,
+        likeCount: project.likeCount || 0,
+        craftProcess: project.craftProcess && project.craftProcess.trim() !== '' ? 
+          (typeof project.craftProcess === 'string' ? JSON.parse(project.craftProcess) : project.craftProcess) : 
+          [],
+        color: ['#2d5016', '#8b4513', '#d2691e'][Math.floor(Math.random() * 3)]
+      }))
+    }
+    
+    // 提取实际数据数组
+    const extractData = (response: any) => {
+      console.log('响应结构:', response)
+      // 尝试多种可能的数据路径
+      if (response?.result && Array.isArray(response.result)) {
+        return response.result
+      }
+      if (response?.data?.result && Array.isArray(response.data.result)) {
+        return response.data.result
+      }
+      if (response?.data?.records && Array.isArray(response.data.records)) {
+        return response.data.records
+      }
+      if (response?.data && Array.isArray(response.data)) {
+        return response.data
+      }
+      if (Array.isArray(response)) {
+        return response
+      }
+      return []
+    }
+    
+    heritageItems.value = {
+      national: processProjects(extractData(nationalResponse)),
+      provincial: processProjects(extractData(provincialResponse)),
+      municipal: processProjects(extractData(municipalResponse))
+    }
+    console.log(heritageItems.value)
+    // 如果所有级别都没有数据，显示提示
+    const totalCount = heritageItems.value.national.length + 
+                      heritageItems.value.provincial.length + 
+                      heritageItems.value.municipal.length
+    
+    if (totalCount === 0) {
+      ElMessage.warning('暂无非遗项目数据')
+    } else {
+      ElMessage.success(`成功加载 ${totalCount} 个非遗项目`)
+    }
+    
+  } catch (error) {
+    console.error('获取非遗项目数据失败:', error)
+    ElMessage.error('获取非遗项目数据失败，请稍后重试')
+    heritageItems.value = {
+      national: [],
+      provincial: [],
+      municipal: []
+    }
+  } finally {
+    loading.value = false
+  }
+}
 
 // 计算属性
 const currentHeritageList = computed(() => {
@@ -366,9 +970,105 @@ const viewDetails = (item: any) => {
   detailDialogVisible.value = true
 }
 
-const playCraftVideo = (craft: any) => {
-  // 模拟播放视频
-  console.log('播放视频:', craft.name)
+// 获取文件访问URL的工具函数
+const getFileAccessHttpUrl = (filePath: string) => {
+  if (!filePath) {
+    console.warn('getFileAccessHttpUrl: 文件路径为空')
+    return ''
+  }
+  
+  console.log('getFileAccessHttpUrl: 原始路径 =', filePath)
+  
+  // 如果已经是完整的HTTP URL，直接返回
+  if (filePath.startsWith('http://') || filePath.startsWith('https://')) {
+    console.log('getFileAccessHttpUrl: 完整URL，直接返回 =', filePath)
+    return filePath
+  }
+  
+  // 如果是blob URL，直接返回
+  if (filePath.startsWith('blob:')) {
+    console.log('getFileAccessHttpUrl: blob URL，直接返回 =', filePath)
+    return filePath
+  }
+  
+  // 处理相对路径，转换为完整的静态资源访问路径
+  const baseUrl = 'http://localhost:8080/jeecg-boot/sys/common/static/'
+  
+  // 移除开头的斜杠（如果有）
+  let cleanPath = filePath.startsWith('/') ? filePath.substring(1) : filePath
+  
+  // 如果路径已经包含完整的文件夹结构，直接使用
+  if (cleanPath.includes('/')) {
+    const finalUrl = baseUrl + cleanPath
+    console.log('getFileAccessHttpUrl: 包含路径结构，最终URL =', finalUrl)
+    return finalUrl
+  }
+  
+  // 如果路径不包含文件夹结构，根据文件类型添加默认路径
+  if (cleanPath.includes('avatar') || cleanPath.includes('头像')) {
+    cleanPath = 'inheritor/avatar/' + cleanPath
+  } else if (cleanPath.match(/\.(jpg|jpeg|png|gif|webp)$/i)) {
+    // 其他图片文件，可能是作品图片
+    cleanPath = 'inheritor/works/' + cleanPath
+  }
+  
+  const finalUrl = baseUrl + cleanPath
+  console.log('getFileAccessHttpUrl: 最终URL =', finalUrl)
+  return finalUrl
+}
+
+// 视频事件处理函数
+const handleVideoError = (event: Event) => {
+  const video = event.target as HTMLVideoElement
+  console.error('视频加载失败:', video.src)
+  ElMessage.error('视频加载失败，请检查视频文件是否存在')
+}
+
+const handleVideoLoadStart = (event: Event) => {
+  const video = event.target as HTMLVideoElement
+  console.log('开始加载视频:', video.src)
+}
+
+const handleVideoCanPlay = (event: Event) => {
+  const video = event.target as HTMLVideoElement
+  console.log('视频可以播放:', video.src)
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  getProtectionStats()
+  getInheritors()
+  getHeritageItems()
+})
+
+// 加载更多传承人故事
+const loadMoreStories = () => {
+  showAllStories.value = true
+}
+
+// 加载更多技艺展示
+const loadMoreCrafts = () => {
+  showAllCrafts.value = true
+}
+
+// 查看传承人详情
+const viewInheritorDetails = (inheritor: any) => {
+  selectedInheritor.value = inheritor
+  inheritorDetailDialogVisible.value = true
+}
+
+// 打开图片预览
+const openImagePreview = (images: string[], index: number = 0) => {
+  previewImages.value = images.map(img => getFileAccessHttpUrl(img))
+  currentImageIndex.value = index
+  imagePreviewVisible.value = true
+}
+
+// 关闭图片预览
+const closeImagePreview = () => {
+  imagePreviewVisible.value = false
+  previewImages.value = []
+  currentImageIndex.value = 0
 }
 </script>
 
@@ -510,50 +1210,276 @@ const playCraftVideo = (craft: any) => {
   width: 100%;
   border-radius: 12px;
   overflow: hidden;
+  position: relative;
 }
 
-.media-controls {
+/* 视频容器样式 - 优化版本 */
+.video-container {
+  width: 100%;
+  height: 280px;
+  border-radius: 16px;
+  overflow: hidden;
+  background: #e8ddd4;
+  padding: 20px;
+  box-sizing: border-box;
+  position: relative;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.video-container:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+}
+
+.craft-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 12px;
+  background: #d4b896;
+}
+
+/* 视频覆盖层 */
+.video-overlay {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  bottom: 20px;
+  left: 20px;
+  right: 20px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+  border-radius: 0 0 12px 12px;
+  padding: 20px;
+  color: white;
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
+.video-container:hover .video-overlay {
+  opacity: 1;
+}
+
+.video-title {
+  margin: 0 0 5px 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.video-category {
+  margin: 0;
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+
+/* 技艺内容区域优化 */
 .craft-content {
   background: white;
-  padding: 2rem;
-  border-radius: 12px;
-  box-shadow: var(--shadow);
+  padding: 2.5rem;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+}
+
+.craft-content:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+}
+
+.craft-header {
+  margin-bottom: 1.5rem;
 }
 
 .craft-title {
-  font-size: 1.5rem;
+  font-size: 1.6rem;
   color: var(--primary-color);
   margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+.craft-tags {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.craft-tag {
+  background: linear-gradient(135deg, var(--primary-color), #3a5a1f);
+  color: white;
+  padding: 0.3rem 0.8rem;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  font-weight: 500;
 }
 
 .craft-description {
   color: var(--text-color);
-  line-height: 1.6;
-  margin-bottom: 1.5rem;
+  line-height: 1.7;
+  margin-bottom: 2rem;
+  font-size: 1rem;
 }
 
+/* 传承人信息优化 */
+.craft-inheritor {
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+  border-radius: 12px;
+  border-left: 4px solid var(--primary-color);
+}
+
+.inheritor-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.inheritor-avatar-small {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.inheritor-details {
+  flex: 1;
+}
+
+.inheritor-name {
+  margin: 0 0 0.3rem 0;
+  color: var(--text-color);
+  font-size: 0.95rem;
+}
+
+.inheritor-level {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+}
+
+/* 制作工艺优化 */
 .craft-steps h4 {
   color: var(--primary-color);
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
+  font-size: 1.2rem;
+  font-weight: 600;
 }
 
-.steps-list {
+.steps-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.step-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 10px;
+  transition: all 0.3s ease;
+}
+
+.step-item:hover {
+  background: #e9ecef;
+  transform: translateX(5px);
+}
+
+.step-number {
+  width: 28px;
+  height: 28px;
+  background: var(--primary-color);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.9rem;
+  flex-shrink: 0;
+}
+
+.step-content {
+  flex: 1;
   color: var(--text-color);
-  padding-left: 1.5rem;
-}
-
-.steps-list li {
-  margin-bottom: 0.5rem;
   line-height: 1.5;
+  font-size: 0.95rem;
 }
 
-/* 传承人故事 */
+.more-steps {
+  text-align: center;
+  padding: 1rem;
+  color: var(--text-secondary);
+  font-style: italic;
+  background: #f1f3f4;
+  border-radius: 8px;
+  border: 2px dashed #dee2e6;
+}
+
+.more-steps span {
+  font-size: 0.9rem;
+}
+
+/* 传承人头像样式 */
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.large-avatar-image {
+  width: 120px;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.avatar-placeholder {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.default-avatar {
+  border-radius: 50%;
+  transition: transform 0.3s ease, filter 0.3s ease;
+  cursor: pointer;
+}
+
+.default-avatar:hover {
+  transform: scale(1.05);
+  filter: brightness(1.1);
+}
+
+.large-avatar-placeholder {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.default-large-avatar {
+  border-radius: 50%;
+  transition: transform 0.3s ease, filter 0.3s ease;
+  cursor: pointer;
+}
+
+.default-large-avatar:hover {
+  transform: scale(1.02);
+  filter: brightness(1.1);
+}
 .inheritors-stories {
   display: grid;
   gap: 2rem;
@@ -567,45 +1493,89 @@ const playCraftVideo = (craft: any) => {
   display: flex;
   align-items: center;
   gap: 1.5rem;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
-.avatar-placeholder {
+.inheritor-avatar {
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
   border-radius: 50%;
   overflow: hidden;
 }
 
-.inheritor-name {
-  font-size: 1.3rem;
-  color: var(--primary-color);
-  margin-bottom: 0.5rem;
+.inheritor-large-avatar {
+  flex-shrink: 0;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  overflow: hidden;
 }
 
-.inheritor-title {
-  color: var(--secondary-color);
-  font-weight: 500;
-  margin-bottom: 0.5rem;
+.avatar-placeholder {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
 }
 
-.inheritor-age {
-  color: var(--text-light);
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.large-avatar-placeholder {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+}
+
+.large-avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.inheritor-basic h3 {
+  margin: 0 0 0.5rem 0;
+  color: var(--text-primary);
+}
+
+.inheritor-basic p {
+  margin: 0.25rem 0;
+  color: var(--text-secondary);
   font-size: 0.9rem;
 }
 
 .story-content h4 {
   color: var(--primary-color);
-  margin: 1.5rem 0 1rem;
+  margin: 1.5rem 0 1rem 0;
+  font-size: 1.1rem;
 }
 
 .story-content p {
-  color: var(--text-color);
-  line-height: 1.8;
-  margin-bottom: 1rem;
+  line-height: 1.6;
+  color: var(--text-primary);
+  margin-bottom: 1.5rem;
 }
 
 .works-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 1rem;
 }
 
@@ -615,84 +1585,77 @@ const playCraftVideo = (craft: any) => {
 
 .work-image {
   margin-bottom: 0.5rem;
-  border-radius: 4px;
+  border-radius: 8px;
   overflow: hidden;
+  width: 100%;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--background-light);
+}
+
+.work-image .work-cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
 }
 
 .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);
+  color: var(--text-secondary);
+  margin: 0 0 0.3rem 0;
   font-weight: 500;
 }
 
-.protection-measures h3 {
-  font-size: 1.5rem;
+.work-category {
+  font-size: 0.8rem;
   color: var(--primary-color);
-  margin-bottom: 2rem;
+  margin: 0 0 0.2rem 0;
+}
+
+.work-level {
+  font-size: 0.75rem;
+  color: var(--text-light);
+  margin: 0;
+}
+
+/* 加载更多按钮样式 */
+.load-more-container {
   text-align: center;
+  margin-top: 3rem;
+  padding: 2rem 0;
 }
 
-.measures-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2rem;
+.load-more-container .el-button {
+  padding: 12px 32px;
+  font-size: 16px;
+  border-radius: 25px;
+  box-shadow: 0 4px 12px rgba(45, 80, 22, 0.2);
+  transition: all 0.3s ease;
 }
 
-.measure-item {
-  background: white;
-  padding: 2rem;
+.load-more-container .el-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(45, 80, 22, 0.3);
+}
+
+/* 全部加载完成提示样式 */
+.all-loaded-tip {
+  text-align: center;
+  margin-top: 2rem;
+  padding: 1.5rem;
+  background: var(--background-light);
   border-radius: 12px;
-  text-align: center;
-  box-shadow: var(--shadow);
+  border: 1px solid var(--border-color);
 }
 
-.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;
+.all-loaded-tip p {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-style: italic;
 }
 
 .detail-content h3 {
@@ -720,6 +1683,189 @@ const playCraftVideo = (craft: any) => {
   line-height: 1.5;
 }
 
+/* 保护现状与成果样式 */
+.protection-overview {
+  display: grid;
+  gap: 3rem;
+}
+
+.protection-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+  margin-bottom: 3rem;
+}
+
+.stat-card {
+  background: linear-gradient(135deg, #ffffff, #f8f9fa);
+  padding: 2rem;
+  border-radius: 16px;
+  text-align: center;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(45, 80, 22, 0.1);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+}
+
+.stat-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
+}
+
+.stat-number {
+  font-size: 3rem;
+  font-weight: bold;
+  color: var(--primary-color);
+  margin-bottom: 0.5rem;
+  text-shadow: 0 2px 4px rgba(45, 80, 22, 0.1);
+}
+
+.stat-label {
+  font-size: 1.1rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+.protection-measures {
+  background: linear-gradient(135deg, #f8f9fa, #ffffff);
+  padding: 3rem;
+  border-radius: 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(45, 80, 22, 0.1);
+}
+
+.protection-measures h3 {
+  font-size: 2rem;
+  color: var(--primary-color);
+  text-align: center;
+  margin-bottom: 2.5rem;
+  font-weight: bold;
+  position: relative;
+}
+
+.protection-measures h3::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+  border-radius: 2px;
+}
+
+.measures-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.measure-item {
+  background: white;
+  padding: 2rem;
+  border-radius: 16px;
+  text-align: center;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(45, 80, 22, 0.05);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.measure-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+
+.measure-item:hover::before {
+  transform: scaleX(1);
+}
+
+.measure-item:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+}
+
+.measure-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 1.5rem;
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  box-shadow: 0 8px 24px rgba(45, 80, 22, 0.3);
+  transition: all 0.3s ease;
+}
+
+.measure-item:hover .measure-icon {
+  transform: scale(1.1);
+  box-shadow: 0 12px 32px rgba(45, 80, 22, 0.4);
+}
+
+.measure-item h4 {
+  font-size: 1.3rem;
+  color: var(--primary-color);
+  margin-bottom: 1rem;
+  font-weight: bold;
+}
+
+.measure-item p {
+  color: var(--text-secondary);
+  line-height: 1.6;
+  font-size: 1rem;
+  margin: 0;
+}
+
+/* 保护现状部分的动画效果 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.stat-card,
+.measure-item {
+  animation: fadeInUp 0.6s ease forwards;
+}
+
+.stat-card:nth-child(1) { animation-delay: 0.1s; }
+.stat-card:nth-child(2) { animation-delay: 0.2s; }
+.stat-card:nth-child(3) { animation-delay: 0.3s; }
+.stat-card:nth-child(4) { animation-delay: 0.4s; }
+
+.measure-item:nth-child(1) { animation-delay: 0.5s; }
+.measure-item:nth-child(2) { animation-delay: 0.6s; }
+.measure-item:nth-child(3) { animation-delay: 0.7s; }
+.measure-item:nth-child(4) { animation-delay: 0.8s; }
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .page-title {
@@ -760,4 +1906,409 @@ const playCraftVideo = (craft: any) => {
     grid-template-columns: 1fr;
   }
 }
+
+/* 传承人故事卡片点击样式 */
+.clickable-card {
+  cursor: pointer;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.clickable-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.click-hint {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--primary-color);
+  font-size: 0.9rem;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.clickable-card:hover .click-hint {
+  opacity: 1;
+}
+
+/* 传承人详情对话框样式 */
+.inheritor-detail {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.inheritor-detail-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 2rem;
+  margin-bottom: 2rem;
+  padding-bottom: 2rem;
+  border-bottom: 2px solid var(--border-color);
+}
+
+.inheritor-large-avatar {
+  flex-shrink: 0;
+}
+
+.large-avatar-placeholder {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--background-light);
+  border: 3px solid var(--primary-color);
+}
+
+.inheritor-detail-info {
+  flex: 1;
+}
+
+.inheritor-detail-name {
+  font-size: 2rem;
+  color: var(--primary-color);
+  margin: 0 0 0.5rem 0;
+  font-weight: bold;
+}
+
+.inheritor-detail-title {
+  font-size: 1.2rem;
+  color: var(--secondary-color);
+  margin: 0 0 1.5rem 0;
+  font-weight: 500;
+}
+
+.inheritor-meta {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+}
+
+.meta-label {
+  font-weight: 500;
+  color: var(--text-secondary);
+  min-width: 80px;
+}
+
+.meta-value {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.inheritor-detail-content {
+  display: grid;
+  gap: 2rem;
+}
+
+.detail-section {
+  background: var(--background-light);
+  padding: 1.5rem;
+  border-radius: 12px;
+  border-left: 4px solid var(--primary-color);
+}
+
+.detail-section .section-title {
+  font-size: 1.3rem;
+  color: var(--primary-color);
+  margin: 0 0 1rem 0;
+  font-weight: bold;
+}
+
+.detail-section .section-content {
+  color: var(--text-primary);
+  line-height: 1.8;
+  margin: 0;
+  font-size: 1rem;
+}
+
+.works-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 1rem;
+}
+
+.work-showcase-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.work-showcase-item:hover {
+  transform: translateY(-2px);
+}
+
+.work-showcase-image {
+  flex-shrink: 0;
+  width: 150px;
+  height: 120px;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+  background: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.work-showcase-image.no-image {
+  background: #f8f9fa;
+  border: 2px dashed #ddd;
+}
+
+.no-image-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  color: #999;
+  font-size: 12px;
+}
+
+.work-cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+
+.work-cover-image:hover {
+  transform: scale(1.05);
+}
+
+.image-count-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.work-content {
+  flex: 1;
+  display: flex;
+  gap: 16px;
+}
+
+.work-info {
+  flex: 1;
+}
+
+.work-gallery {
+  flex-shrink: 0;
+  width: 120px;
+}
+
+.gallery-title {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.gallery-thumbnails {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px;
+}
+
+.gallery-thumb {
+  width: 56px;
+  height: 44px;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  border: 2px solid transparent;
+  transition: all 0.3s ease;
+}
+
+.gallery-thumb:hover {
+  border-color: var(--primary-color);
+  transform: scale(1.05);
+}
+
+.gallery-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumb-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  color: white;
+}
+
+.gallery-thumb:hover .thumb-overlay {
+  opacity: 1;
+}
+
+.work-showcase-name {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+.work-showcase-desc {
+  margin: 0 0 12px 0;
+  color: var(--text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.work-meta-info {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.work-meta-item {
+  display: flex;
+  align-items: center;
+}
+
+.work-category {
+  background: linear-gradient(135deg, #4CAF50, #45a049);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
+}
+
+.work-level {
+  background: linear-gradient(135deg, #8B4513, #A0522D);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(139, 69, 19, 0.3);
+}
+
+.work-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.work-tag {
+  background: var(--background-light);
+  color: var(--text-secondary);
+  padding: 2px 6px;
+  border-radius: 8px;
+  font-size: 11px;
+  border: 1px solid var(--border-color);
+}
+
+/* 图片预览对话框样式 */
+.image-preview-dialog .el-dialog__body {
+  padding: 0;
+}
+
+.image-preview-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+}
+
+.preview-main {
+  width: 100%;
+  max-height: 60vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f5f5f5;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 60vh;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.preview-navigation {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin: 16px 0;
+}
+
+.image-counter {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-primary);
+  min-width: 80px;
+  text-align: center;
+}
+
+.preview-thumbnails {
+  display: flex;
+  gap: 8px;
+  max-width: 100%;
+  overflow-x: auto;
+  padding: 8px 0;
+}
+
+.preview-thumb {
+  flex-shrink: 0;
+  width: 60px;
+  height: 48px;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: all 0.3s ease;
+}
+
+.preview-thumb:hover,
+.preview-thumb.active {
+  border-color: var(--primary-color);
+  transform: scale(1.05);
+}
+
+.preview-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a85c6bf..d84f01a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -146,7 +146,7 @@
               <p class="story-excerpt">{{ story.excerpt }}</p>
               <div class="story-meta">
                 <span class="story-date">{{ story.date }}</span>
-                <a href="#" class="story-link">阅读更多</a>
+                <a href="#" @click.prevent="showStoryDetail(story)" class="story-link">阅读更多</a>
               </div>
             </div>
           </div>
@@ -178,77 +178,195 @@
       </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 } from 'vue'
+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([
-  {
-    id: 1,
-    name: '桦皮工艺盒',
-    description: '传统桦皮制作工艺，精美实用',
-    price: 168,
-    color: '#8b4513'
-  },
-  {
-    id: 2,
-    name: '鄂伦春族刺绣',
-    description: '手工刺绣，图案精美，寓意吉祥',
-    price: 288,
-    color: '#2d5016'
-  },
-  {
-    id: 3,
-    name: '传统服饰',
-    description: '复刻传统服饰，展现民族风采',
-    price: 588,
-    color: '#8b4513'
-  },
-  {
-    id: 4,
-    name: '木雕摆件',
-    description: '手工雕刻，展现森林文化',
-    price: 128,
-    color: '#2d5016'
-  }
-])
+const featuredProducts = ref<any[]>([])
+const loading = ref(false)
 
 // 文化故事数据
-const stories = ref([
-  {
-    id: 1,
-    title: '森林中的狩猎文化',
-    excerpt: '鄂伦春族世代生活在大兴安岭的森林中，形成了独特的狩猎文化和生活方式...',
-    date: '2024-01-15',
-    color: '#2d5016'
-  },
-  {
-    id: 2,
-    title: '桦皮工艺的传承',
-    excerpt: '桦皮是鄂伦春族生活中不可缺少的材料，从日用品到艺术品，展现了民族智慧...',
-    date: '2024-01-10',
-    color: '#8b4513'
-  },
-  {
-    id: 3,
-    title: '篝火节的欢歌',
-    excerpt: '每年的篝火节是鄂伦春族最重要的节日，族人们围着篝火载歌载舞...',
-    date: '2024-01-05',
-    color: '#2d5016'
+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 = (product: any) => {
-  store.addToCart(product)
-  ElMessage.success('已添加到购物车')
+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>
@@ -510,6 +628,104 @@ const addToCart = (product: any) => {
   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 {
@@ -535,6 +751,20 @@ const addToCart = (product: any) => {
   .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) {
diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
index a642f96..c196c56 100644
--- a/src/views/ProductDetail.vue
+++ b/src/views/ProductDetail.vue
@@ -8,7 +8,7 @@
           <span class="separator">/</span>
           <router-link to="/products">产品中心</router-link>
           <span class="separator">/</span>
-          <span class="current">{{ product.name }}</span>
+          <span class="current">{{ product.productName || product.name || '产品详情' }}</span>
         </div>
       </div>
     </section>
@@ -25,7 +25,7 @@
                   <rect width="400" height="400" :fill="product.color" opacity="0.2"/>
                   <circle cx="200" cy="200" r="80" :fill="product.color" opacity="0.5"/>
                   <text x="200" y="210" text-anchor="middle" :fill="product.color" 
-                        font-size="24" font-weight="bold">{{ product.name.substring(0, 2) }}</text>
+                        font-size="24" font-weight="bold">{{ (product.productName || product.name || '产品').substring(0, 2) }}</text>
                 </svg>
               </div>
             </div>
@@ -47,7 +47,7 @@
               <span v-if="product.isHot" class="badge hot">热销</span>
             </div>
             
-            <h1 class="product-title">{{ product.name }}</h1>
+            <h1 class="product-title">{{ product.productName || product.name || '产品名称' }}</h1>
             <p class="product-subtitle">{{ getCategoryName(product.category) }}</p>
             
             <div class="price-section">
@@ -158,34 +158,36 @@
           <el-tab-pane label="规格参数" name="specs">
             <div class="specs-table">
               <table>
-                <tr>
-                  <td>产品名称</td>
-                  <td>{{ product.name }}</td>
-                </tr>
-                <tr>
-                  <td>产品分类</td>
-                  <td>{{ getCategoryName(product.category) }}</td>
-                </tr>
-                <tr>
-                  <td>材质</td>
-                  <td>{{ product.material || '天然桦皮' }}</td>
-                </tr>
-                <tr>
-                  <td>尺寸</td>
-                  <td>{{ product.size || '长20cm × 宽15cm × 高8cm' }}</td>
-                </tr>
-                <tr>
-                  <td>重量</td>
-                  <td>{{ product.weight || '约200g' }}</td>
-                </tr>
-                <tr>
-                  <td>产地</td>
-                  <td>{{ product.origin || '黑龙江大兴安岭' }}</td>
-                </tr>
-                <tr>
-                  <td>保养方式</td>
-                  <td>避免阳光直射，保持干燥，定期清洁</td>
-                </tr>
+                <tbody>
+                  <tr>
+                    <td>产品名称</td>
+                    <td>{{ product.productName || product.name || '产品名称' }}</td>
+                  </tr>
+                  <tr>
+                    <td>产品分类</td>
+                    <td>{{ getCategoryName(product.category) }}</td>
+                  </tr>
+                  <tr>
+                    <td>材质</td>
+                    <td>{{ product.material || '天然桦皮' }}</td>
+                  </tr>
+                  <tr>
+                    <td>尺寸</td>
+                    <td>{{ product.size || '长20cm × 宽15cm × 高8cm' }}</td>
+                  </tr>
+                  <tr>
+                    <td>重量</td>
+                    <td>{{ product.weight || '约200g' }}</td>
+                  </tr>
+                  <tr>
+                    <td>产地</td>
+                    <td>{{ product.origin || '黑龙江大兴安岭' }}</td>
+                  </tr>
+                  <tr>
+                    <td>保养方式</td>
+                    <td>避免阳光直射，保持干燥，定期清洁</td>
+                  </tr>
+                </tbody>
               </table>
             </div>
           </el-tab-pane>
@@ -246,12 +248,12 @@
                   <rect width="200" height="150" :fill="relatedProduct.color" opacity="0.2"/>
                   <circle cx="100" cy="75" r="30" :fill="relatedProduct.color" opacity="0.5"/>
                   <text x="100" y="80" text-anchor="middle" :fill="relatedProduct.color" 
-                        font-size="12" font-weight="bold">{{ relatedProduct.name.substring(0, 2) }}</text>
+                        font-size="12" font-weight="bold">{{ (relatedProduct.productName || relatedProduct.name || '产品').substring(0, 2) }}</text>
                 </svg>
               </div>
             </div>
             <div class="product-info">
-              <h3 class="product-name">{{ relatedProduct.name }}</h3>
+              <h3 class="product-name">{{ relatedProduct.productName || relatedProduct.name || '产品名称' }}</h3>
               <div class="product-price">¥{{ relatedProduct.price }}</div>
             </div>
           </div>
@@ -272,6 +274,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useMainStore } from '../stores'
 import { User, StarFilled, Loading } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
+import { productApi } from '../api/product'
 
 const route = useRoute()
 const router = useRouter()
@@ -318,6 +321,9 @@ const craftSteps = ref([
   }
 ])
 
+// 相关产品
+const relatedProducts = ref<any[]>([])
+
 // 用户评价
 const reviews = ref([
   {
@@ -325,7 +331,7 @@ const reviews = ref([
     userName: '文化爱好者',
     rating: 5,
     date: '2024-01-15',
-    content: '非常精美的桦皮工艺品，做工精细，很有民族特色，值得收藏！'
+    content: '非常精美的工艺品，做工精细，很有民族特色，值得收藏！'
   },
   {
     id: 2,
@@ -343,191 +349,6 @@ const reviews = ref([
   }
 ])
 
-// 相关产品
-const relatedProducts = ref([
-  {
-    id: 2,
-    name: '鄂伦春族刺绣挂画',
-    price: 288,
-    color: '#2d5016'
-  },
-  {
-    id: 4,
-    name: '手工木雕摆件',
-    price: 128,
-    color: '#8b4513'
-  },
-  {
-    id: 7,
-    name: '桦皮茶具套装',
-    price: 368,
-    color: '#2d5016'
-  },
-  {
-    id: 8,
-    name: '民族风头饰',
-    price: 88,
-    color: '#8b4513'
-  }
-])
-
-// 模拟产品数据
-const mockProducts = [
-  {
-    id: 1,
-    name: '桦皮工艺盒',
-    category: 'handicrafts',
-    description: '传统桦皮制作工艺，精美实用的收纳盒',
-    fullDescription: '这款桦皮工艺盒采用传统的鄂伦春族桦皮制作工艺，选用优质天然桦树皮为原料，经过精心处理和手工制作而成。盒子造型优美，实用性强，既可作为收纳盒使用，也是极具收藏价值的民族工艺品。每一个细节都体现了匠人的精湛技艺和对传统文化的传承。',
-    price: 168,
-    originalPrice: 198,
-    stock: 15,
-    craftsman: '关小云',
-    craftsmanTitle: '桦皮工艺传承人',
-    craftsmanDesc: '从事桦皮工艺制作30余年，作品精美，技艺精湛，多次获得民族工艺品大赛奖项',
-    isNew: true,
-    isHot: false,
-    color: '#8b4513',
-    material: '天然桦皮',
-    size: '长20cm × 宽15cm × 高8cm',
-    weight: '约200g',
-    origin: '黑龙江大兴安岭',
-    culturalMeaning: '桦皮工艺是鄂伦春族传统手工艺的重要组成部分，承载着深厚的民族文化内涵。桦皮盒不仅是实用的生活用品，更是民族智慧的结晶，体现了鄂伦春族人民对自然的敬畏和对美好生活的追求。'
-  },
-  {
-    id: 2,
-    name: '鄂伦春族刺绣挂画',
-    category: 'handicrafts',
-    description: '手工刺绣，图案精美，寓意吉祥',
-    fullDescription: '这幅刺绣挂画采用传统的鄂伦春族刺绣工艺，以丝线为材料，在优质布料上精心绣制而成。图案设计融合了鄂伦春族的传统文化元素，色彩搭配和谐，寓意吉祥如意。每一针每一线都凝聚着绣娘的心血和对民族文化的热爱。',
-    price: 288,
-    stock: 8,
-    craftsman: '孟淑珍',
-    craftsmanTitle: '刺绣工艺传承人',
-    craftsmanDesc: '从事刺绣工艺25年，擅长传统图案设计，作品多次在民族工艺展览中获奖',
-    isNew: false,
-    isHot: true,
-    color: '#2d5016',
-    material: '优质丝线、棉布',
-    size: '长40cm × 宽30cm',
-    weight: '约150g',
-    origin: '黑龙江大兴安岭',
-    culturalMeaning: '刺绣是鄂伦春族妇女的传统技艺，图案多取材于自然和生活，体现了鄂伦春族人民对美好生活的向往和对自然的崇敬。'
-  },
-  {
-    id: 3,
-    name: '传统民族服饰',
-    category: 'clothing',
-    description: '复刻传统服饰，展现民族风采',
-    fullDescription: '这套传统民族服饰严格按照鄂伦春族传统服装样式制作，选用优质面料，手工缝制，细节精美。服装设计体现了鄂伦春族的文化特色，穿着舒适，既可用于文化表演，也可作为收藏品。',
-    price: 588,
-    stock: 5,
-    craftsman: '白热布',
-    craftsmanTitle: '民族服饰制作师',
-    craftsmanDesc: '专注民族服饰制作15年，深谙传统服装制作工艺，作品广受好评',
-    isNew: false,
-    isHot: true,
-    color: '#8b4513',
-    material: '优质棉麻、丝绸',
-    size: 'M码（可定制）',
-    weight: '约800g',
-    origin: '黑龙江大兴安岭',
-    culturalMeaning: '鄂伦春族传统服饰承载着深厚的文化内涵，每一个图案和色彩都有其特定的含义，体现了民族的智慧和审美。'
-  },
-  {
-    id: 4,
-    name: '手工木雕摆件',
-    category: 'handicrafts',
-    description: '精美木雕工艺，展现森林文化',
-    fullDescription: '这件木雕摆件选用优质木材，经过精心雕刻而成。作品造型生动，线条流畅，充分展现了鄂伦春族的森林文化特色。每一个细节都经过匠人的精心打磨，是极具艺术价值的工艺品。',
-    price: 128,
-    stock: 20,
-    craftsman: '关金山',
-    craftsmanTitle: '木雕工艺师',
-    craftsmanDesc: '从事木雕工艺20年，擅长动物和自然题材雕刻，技艺精湛',
-    isNew: false,
-    isHot: false,
-    color: '#2d5016',
-    material: '优质木材',
-    size: '长15cm × 宽10cm × 高12cm',
-    weight: '约300g',
-    origin: '黑龙江大兴安岭',
-    culturalMeaning: '木雕是鄂伦春族传统手工艺之一，多以森林动物和自然景观为题材，体现了民族与自然和谐共生的理念。'
-  },
-  {
-    id: 5,
-    name: '野生蓝莓干',
-    category: 'food',
-    description: '大兴安岭野生蓝莓，天然无添加',
-    fullDescription: '这款蓝莓干选用大兴安岭原始森林中的野生蓝莓，经过自然晾晒工艺制成。保持了蓝莓的天然营养成分，口感酸甜，是健康的天然零食。无任何人工添加剂，绿色健康。',
-    price: 58,
-    originalPrice: 68,
-    stock: 50,
-    isNew: true,
-    isHot: false,
-    color: '#8b4513',
-    material: '野生蓝莓',
-    size: '净含量200g',
-    weight: '约200g',
-    origin: '黑龙江大兴安岭',
-    culturalMeaning: '蓝莓是大兴安岭的特产，鄂伦春族人民世代采集食用，是大自然赐予的珍贵礼物。'
-  },
-  {
-    id: 6,
-    name: '鄂伦春文化笔记本',
-    category: 'cultural',
-    description: '融入民族元素的精美笔记本',
-    fullDescription: '这款笔记本封面设计融入了鄂伦春族传统文化元素，采用优质纸张制作，书写流畅。既实用又具有文化纪念意义，是学习工作的好伴侣，也是了解鄂伦春族文化的窗口。',
-    price: 35,
-    stock: 100,
-    isNew: false,
-    isHot: false,
-    color: '#2d5016',
-    material: '优质纸张、硬质封面',
-    size: 'A5规格',
-    weight: '约250g',
-    origin: '黑龙江大兴安岭',
-    culturalMeaning: '笔记本设计元素来源于鄂伦春族传统图案，每一个符号都承载着深厚的文化内涵。'
-  },
-  {
-    id: 7,
-    name: '桦皮茶具套装',
-    category: 'handicrafts',
-    description: '传统桦皮工艺制作的茶具',
-    fullDescription: '这套桦皮茶具采用传统工艺制作，包含茶壶、茶杯等完整配件。桦皮材质天然环保，具有独特的香味，用于泡茶别有一番风味。是品茶爱好者和文化收藏者的理想选择。',
-    price: 368,
-    stock: 3,
-    craftsman: '关小云',
-    craftsmanTitle: '桦皮工艺传承人',
-    craftsmanDesc: '从事桦皮工艺制作30余年，作品精美，技艺精湛，多次获得民族工艺品大赛奖项',
-    isNew: false,
-    isHot: true,
-    color: '#8b4513',
-    material: '天然桦皮',
-    size: '茶壶高12cm，茶杯直径8cm',
-    weight: '约500g',
-    origin: '黑龙江大兴安岭',
-    culturalMeaning: '桦皮茶具体现了鄂伦春族人民的生活智慧，将实用性与艺术性完美结合。'
-  },
-  {
-    id: 8,
-    name: '民族风头饰',
-    category: 'clothing',
-    description: '传统图案设计的精美头饰',
-    fullDescription: '这款头饰采用传统鄂伦春族图案设计，手工制作，工艺精美。可用于民族服装搭配，也可作为装饰品收藏。设计典雅，做工精细，充分展现了鄂伦春族的文化魅力。',
-    price: 88,
-    stock: 12,
-    isNew: true,
-    isHot: false,
-    color: '#2d5016',
-    material: '优质布料、装饰珠子',
-    size: '可调节尺寸',
-    weight: '约50g',
-    origin: '黑龙江大兴安岭',
-    culturalMeaning: '头饰在鄂伦春族传统文化中具有重要地位，不同的图案和颜色代表不同的寓意和身份。'
-  }
-]
-
 // 计算属性
 const getCategoryName = (categoryId: string) => {
   const category = categories.value.find(c => c.id === categoryId)
@@ -570,20 +391,79 @@ const buyNow = () => {
 }
 
 // 生命周期
-onMounted(() => {
-  const productId = parseInt(route.params.id as string)
+onMounted(async () => {
+  const productId = route.params.id as string
   
-  // 模拟从API获取产品数据
-  setTimeout(() => {
-    const foundProduct = mockProducts.find(p => p.id === productId)
-    if (foundProduct) {
-      product.value = foundProduct
+  if (!productId) {
+    ElMessage.error('产品ID无效')
+    router.push('/products')
+    return
+  }
+  
+  try {
+    // 从API获取产品数据
+    const response = await productApi.getProductById(productId)
+    if (response && response.id) {
+      product.value = {
+        ...response,
+        color: getRandomColor(),
+        // 设置默认值
+        material: response.material || '天然材料',
+        size: response.size || '标准尺寸',
+        weight: response.weight || '约200g',
+        origin: response.origin || '黑龙江大兴安岭',
+        culturalMeaning: response.culturalMeaning || '承载着深厚的鄂伦春族文化内涵'
+      }
+      
+      // 获取相关产品
+      await getRelatedProducts(response.categoryId)
     } else {
       ElMessage.error('产品不存在')
       router.push('/products')
     }
-  }, 500)
+  } catch (error) {
+    console.error('获取产品详情失败:', error)
+    // 检查是否是"未找到对应数据"的错误
+    if (error.message && error.message.includes('未找到对应数据')) {
+      ElMessage.error('产品不存在')
+    } else {
+      ElMessage.error('获取产品详情失败，请稍后重试')
+    }
+    router.push('/products')
+  }
 })
+
+// 获取相关产品
+const getRelatedProducts = async (categoryId: string) => {
+  try {
+    const response = await productApi.getProductList({ 
+      pageNo: 1, 
+      pageSize: 4,
+      categoryId: categoryId,
+      status: 1
+    })
+    if (response?.records && response.records.length > 0) {
+      relatedProducts.value = response.records
+        .filter((p: any) => p.id !== product.value.id)
+        .slice(0, 4)
+        .map((p: any) => ({
+          ...p,
+          color: getRandomColor()
+        }))
+    } else {
+      relatedProducts.value = []
+    }
+  } catch (error) {
+    console.error('获取相关产品失败:', error)
+    relatedProducts.value = []
+  }
+}
+
+// 获取随机颜色
+const getRandomColor = () => {
+  const colors = ['#8b4513', '#2d5016']
+  return colors[Math.floor(Math.random() * colors.length)]
+}
 </script>
 
 <style scoped>
diff --git a/src/views/Products.vue b/src/views/Products.vue
index 7e663db..59ddfb9 100644
--- a/src/views/Products.vue
+++ b/src/views/Products.vue
@@ -21,7 +21,7 @@
                 v-for="category in categories" 
                 :key="category.id"
                 :class="['filter-btn', { active: selectedCategory === category.id }]"
-                @click="selectedCategory = category.id"
+                @click="selectedCategory = category.id; onCategoryChange()"
               >
                 {{ category.name }}
               </button>
@@ -68,7 +68,7 @@
                   <rect width="250" height="200" :fill="product.color" opacity="0.2"/>
                   <circle cx="125" cy="100" r="40" :fill="product.color" opacity="0.5"/>
                   <text x="125" y="110" text-anchor="middle" :fill="product.color" 
-                        font-size="14" font-weight="bold">{{ product.name.substring(0, 2) }}</text>
+                        font-size="14" font-weight="bold">{{ product.productName ? product.productName.substring(0, 2) : '产品' }}</text>
                 </svg>
               </div>
               <div class="product-badges">
@@ -78,14 +78,14 @@
             </div>
             
             <div class="product-info">
-              <h3 class="product-name">{{ product.name }}</h3>
-              <p class="product-category">{{ getCategoryName(product.category) }}</p>
-              <p class="product-description">{{ product.description }}</p>
+              <h3 class="product-name">{{ product.productName || '产品名称' }}</h3>
+              <p class="product-category">{{ getCategoryName(product.categoryId) }}</p>
+              <p class="product-description">{{ product.description || '暂无描述' }}</p>
               
               <div class="product-meta">
-                <div class="craftsman-info" v-if="product.craftsman">
+                <div class="craftsman-info" v-if="product.craftsmanInfo">
                   <el-icon><User /></el-icon>
-                  <span>{{ product.craftsman }}</span>
+                  <span>{{ product.craftsmanInfo }}</span>
                 </div>
                 <div class="stock-info">
                   <span :class="['stock-status', product.stock > 0 ? 'in-stock' : 'out-stock']">
@@ -127,6 +127,8 @@ import { useRoute } from 'vue-router'
 import { useMainStore } from '../stores'
 import { User } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
+import { productApi, productCategoryApi } from '../api/product'
+import { cartApi } from '../api/cart'
 
 const route = useRoute()
 const store = useMainStore()
@@ -137,114 +139,99 @@ const priceRange = ref('all')
 const sortBy = ref('default')
 const loading = ref(false)
 const hasMore = ref(true)
+const currentPage = ref(1)
+const pageSize = ref(12)
 
 // 产品分类
-const categories = ref([
-  { id: 'all', name: '全部产品' },
-  { id: 'handicrafts', name: '手工艺品' },
-  { id: 'food', name: '特色食品' },
-  { id: 'cultural', name: '文创产品' },
-  { id: 'clothing', name: '服饰配饰' }
+const categories = ref<any[]>([
+  { id: 'all', name: '全部产品' }
 ])
 
 // 产品数据
-const products = ref([
-  {
-    id: 1,
-    name: '桦皮工艺盒',
-    category: 'handicrafts',
-    description: '传统桦皮制作工艺，精美实用的收纳盒',
-    price: 168,
-    originalPrice: 198,
-    stock: 15,
-    craftsman: '关小云',
-    isNew: true,
-    isHot: false,
-    color: '#8b4513'
-  },
-  {
-    id: 2,
-    name: '鄂伦春族刺绣挂画',
-    category: 'handicrafts',
-    description: '手工刺绣，图案精美，寓意吉祥',
-    price: 288,
-    stock: 8,
-    craftsman: '孟淑珍',
-    isNew: false,
-    isHot: true,
-    color: '#2d5016'
-  },
-  {
-    id: 3,
-    name: '传统民族服饰',
-    category: 'clothing',
-    description: '复刻传统服饰，展现民族风采',
-    price: 588,
-    stock: 5,
-    craftsman: '白热布',
-    isNew: false,
-    isHot: true,
-    color: '#8b4513'
-  },
-  {
-    id: 4,
-    name: '手工木雕摆件',
-    category: 'handicrafts',
-    description: '精美木雕工艺，展现森林文化',
-    price: 128,
-    stock: 20,
-    craftsman: '关金山',
-    isNew: false,
-    isHot: false,
-    color: '#2d5016'
-  },
-  {
-    id: 5,
-    name: '野生蓝莓干',
-    category: 'food',
-    description: '大兴安岭野生蓝莓，天然无添加',
-    price: 58,
-    originalPrice: 68,
-    stock: 50,
-    isNew: true,
-    isHot: false,
-    color: '#8b4513'
-  },
-  {
-    id: 6,
-    name: '鄂伦春文化笔记本',
-    category: 'cultural',
-    description: '融入民族元素的精美笔记本',
-    price: 35,
-    stock: 100,
-    isNew: false,
-    isHot: false,
-    color: '#2d5016'
-  },
-  {
-    id: 7,
-    name: '桦皮茶具套装',
-    category: 'handicrafts',
-    description: '传统桦皮工艺制作的茶具',
-    price: 368,
-    stock: 3,
-    craftsman: '关小云',
-    isNew: false,
-    isHot: true,
-    color: '#8b4513'
-  },
-  {
-    id: 8,
-    name: '民族风头饰',
-    category: 'clothing',
-    description: '传统图案设计的精美头饰',
-    price: 88,
-    stock: 12,
-    isNew: true,
-    isHot: false,
-    color: '#2d5016'
+const products = ref<any[]>([])
+
+// 获取产品分类
+const getCategories = async () => {
+  try {
+    const response = await productCategoryApi.getCategoryList({ 
+      pageNo: 1, 
+      pageSize: 100 
+    })
+    if (response && response.records) {
+      const categoryList = response.records.map((cat: any) => ({
+        id: cat.id,
+        name: cat.categoryName
+      }))
+      categories.value = [
+        { id: 'all', name: '全部产品' },
+        ...categoryList
+      ]
+    }
+  } catch (error) {
+    console.error('获取分类失败:', error)
   }
-])
+}
+
+// 获取产品列表
+const getProducts = async (loadMore = false) => {
+  try {
+    loading.value = true
+    const params: any = {
+      pageNo: loadMore ? currentPage.value + 1 : 1,
+      pageSize: pageSize.value,
+      status: 1 // 只获取上架的产品
+    }
+    
+    // 添加分类筛选
+    if (selectedCategory.value !== 'all') {
+      params.categoryId = selectedCategory.value
+    }
+    
+    const response = await productApi.getProductList(params)
+    
+    if (response && response.records) {
+      const newProducts = response.records.map((product: any) => ({
+        ...product,
+        color: getRandomColor(),
+        isNew: isNewProduct(product.createTime),
+        isHot: product.salesCount > 50 // 假设销量大于50为热销
+      }))
+      
+      if (loadMore) {
+        products.value = [...products.value, ...newProducts]
+        currentPage.value++
+      } else {
+        products.value = newProducts
+        currentPage.value = 1
+      }
+      
+      hasMore.value = response.current < response.pages
+    }
+  } catch (error) {
+    console.error('获取产品数据失败:', error)
+    ElMessage.error('获取产品数据失败，请稍后重试')
+    if (!loadMore) {
+      products.value = []
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 判断是否为新产品
+const isNewProduct = (createTime: string) => {
+  if (!createTime) return false
+  const now = new Date()
+  const created = new Date(createTime)
+  const diffDays = (now.getTime() - created.getTime()) / (1000 * 3600 * 24)
+  return diffDays <= 30 // 30天内为新品
+}
+
+// 获取随机颜色
+const getRandomColor = () => {
+  const colors = ['#8b4513', '#2d5016', '#8b4513', '#2d5016']
+  return colors[Math.floor(Math.random() * colors.length)]
+}
 
 // 计算属性
 const filteredProducts = computed(() => {
@@ -252,7 +239,7 @@ const filteredProducts = computed(() => {
 
   // 分类筛选
   if (selectedCategory.value !== 'all') {
-    result = result.filter(p => p.category === selectedCategory.value)
+    result = result.filter(p => p.categoryId === selectedCategory.value)
   }
 
   // 价格筛选
@@ -286,27 +273,38 @@ const getCategoryName = (categoryId: string) => {
   return category ? category.name : ''
 }
 
-const addToCart = (product: any) => {
+const addToCart = async (product: any) => {
   if (product.stock === 0) {
     ElMessage.warning('商品暂时缺货')
     return
   }
   
-  store.addToCart(product)
-  ElMessage.success('已添加到购物车')
+  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 loadMore = () => {
-  loading.value = true
-  // 模拟加载更多数据
-  setTimeout(() => {
-    loading.value = false
-    hasMore.value = false
-  }, 1000)
+  getProducts(true)
+}
+
+// 监听分类变化
+const onCategoryChange = () => {
+  getProducts()
 }
 
 // 生命周期
 onMounted(() => {
+  getCategories()
+  getProducts()
+  
   // 处理搜索参数
   const searchQuery = route.query.search as string
   if (searchQuery) {