fix: 趋势页筛选按钮改紧凑单行胶囊（第四个不换行）+ 线性图标修复产品图标不显示

client/src/pages/trend/trend.vue

@@ -8,7 +8,7 @@
       <text class="header-desc">每天精选 AI 行业最新动态</text>
     </view>
 
-    <!-- 分类筛选 -->
+    <!-- 分类筛选：紧凑胶囊单行 -->
     <view class="filter-bar">
       <view
         class="filter-item"
@@ -17,7 +17,7 @@
         :key="idx"
         @click="activeFilter = idx"
       >
-        <text class="filter-icon">{{ tag.icon }}</text>
+        <AppIcon :name="tag.icon" :size="12" />
         <text class="filter-label">{{ tag.text }}</text>
       </view>
     </view>
@@ -69,13 +69,14 @@ import { onPullDownRefresh, onShareAppMessage, onShareTimeline } from '@dcloudio
 
 import { ref, computed, onMounted } from 'vue'
 import { trendApi } from '@/utils/api'
+import AppIcon from '@/components/AppIcon.vue'
 
 const filters = ref([
-  { icon: '📰', text: '全部' },
+  { icon: 'sparkle', text: '全部' },
   { icon: 'rocket', text: '产品' },
-  { icon: '📄', text: '论文' },
-  { icon: '🔧', text: '工具' },
-  { icon: '🏢', text: '公司' }
+  { icon: 'book', text: '论文' },
+  { icon: 'settings', text: '工具' },
+  { icon: 'user', text: '公司' }
 ])
 const activeFilter = ref(0)
 const items = ref([])
@@ -239,38 +240,33 @@ onShareAppMessage(() => ({
 .filter-bar {
   padding: 0 20px 12px;
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+  flex-wrap: nowrap;
+  gap: 6px;
 }
 
 .filter-item {
-  padding: 8px 14px 6px;
+  flex-shrink: 0;
+  padding: 6px 11px;
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
-  border-radius: 12px;
-  font-size: 13px;
+  border-radius: 999px;
   color: var(--text-secondary);
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
-  gap: 2px;
-  min-width: 64px;
-}
-
-.filter-icon {
-  font-size: 16px;
-  line-height: 1.2;
+  gap: 4px;
 }
 
 .filter-label {
-  font-size: 11px;
-  line-height: 1.2;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
 }
 
 .filter-item.active {
-  background: rgba(124, 77, 255, 0.15);
-  border-color: rgba(124, 77, 255, 0.3);
-  color: var(--dim1-color);
+  background: var(--color-brand-bg);
+  border-color: var(--color-brand);
+  color: var(--color-brand);
 }
 
 // 列表