From f1097a033105cd0a3ba0f4a00d2c4c22f6f7de1d Mon Sep 17 00:00:00 2001
From: Yuzhiran Dev <dev@yuzhiran.com>
Date: Fri, 10 Jul 2026 18:13:15 +0800
Subject: [PATCH] fix: trend page onMounted import + scroll-view replacement +
 build verification

- Import onMounted from 'vue' in trend page (compiler macro not available in uni-app)
- Replace scroll-view with view + CSS overflow for trend list (rendering issue in H5)
- Fix CSS syntax error (duplicate closing brace)
- All 16 pages tested and verified working in H5 dev server
---
 .../ai-dimension/src/pages/trend/trend.vue    | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/ai-dimension/src/pages/trend/trend.vue b/frontend/ai-dimension/src/pages/trend/trend.vue
index ad02e1b..ff21e78 100644
--- a/frontend/ai-dimension/src/pages/trend/trend.vue
+++ b/frontend/ai-dimension/src/pages/trend/trend.vue
@@ -9,7 +9,7 @@
     </view>
 
     <!-- 分类筛选 -->
-    <scroll-view class="filter-bar" scroll-x :show-scrollbar="false">
+    <view class="filter-bar">
       <view
         class="filter-item"
         :class="{ active: activeFilter === idx }"
@@ -19,10 +19,10 @@
       >
         <text>{{ tag }}</text>
       </view>
-    </scroll-view>
+    </view>
 
     <!-- 新闻列表 -->
-    <scroll-view class="trend-list" scroll-y>
+    <view class="trend-list">
       <view v-for="(item, idx) in displayItems" :key="idx" class="trend-card" @click="goDetail(item)">
         <!-- 头部标签 -->
         <view class="card-header">
@@ -59,12 +59,12 @@
         <text class="empty-text">暂无趋势资讯</text>
         <text class="empty-sub">稍后再来看最新 AI 动态</text>
       </view>
-    </scroll-view>
+    </view>
   </view>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { trendApi } from '@/utils/api'
 
 const filters = ref(['全部', '🚀 产品', '📄 论文', '🔧 工具', '🏢 公司'])
@@ -72,6 +72,10 @@ const activeFilter = ref(0)
 const items = ref([])
 const loading = ref(false)
 
+onMounted(() => {
+  fetchTrends()
+})
+
 const displayItems = computed(() => {
   if (activeFilter.value === 0) return items.value
   const categoryMap = { 1: 'product', 2: 'paper', 3: 'tool', 4: 'company' }
@@ -80,10 +84,6 @@ const displayItems = computed(() => {
   return items.value.filter(item => item.category === category)
 })
 
-onMounted(() => {
-  fetchTrends()
-})
-
 async function fetchTrends() {
   loading.value = true
   try {
@@ -233,11 +233,13 @@ function getSampleData() {
   color: var(--dim1-color);
 }
 
-// 新闻列表
+// 列表
 .trend-list {
   flex: 1;
-  padding: 0 20px;
-  padding-bottom: 20px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  padding: 0 16px 16px;
 }
 
 .trend-card {