hookehuyr

feat: 优化收藏和知识库页面的滚动布局

- 收藏页面和知识库页面采用顶部筛选固定、列表区域独立滚动的结构
- 提升用户浏览和筛选体验,保持筛选区域可见性
- 更新 README.md 和 CHANGELOG.md 文档以反映页面优化
......@@ -78,6 +78,8 @@ src/
- 计划书页面支持顶部搜索与标签固定,列表区域独立滚动,便于快速筛选和浏览
- 资料列表页面支持顶部搜索与分类固定,列表区域独立滚动,便于批量浏览与筛选
- 收藏页面支持顶部筛选固定,列表区域独立滚动
- 知识库页面支持顶部筛选固定,列表区域独立滚动
- 资料列表、知识库、收藏、计划书页面统一使用 FilterTabs 组件进行横向筛选
## ✅ 优化建议
......
## [2026-01-31] - 优化知识库页面滚动结构
### 优化
- 知识库页面顶部筛选固定,列表区域独立滚动 (`pages/knowledge-base/index.vue`)
---
**详细信息**
- **影响文件**: src/pages/knowledge-base/index.vue, README.md
- **技术栈**: Vue 3, Taro, TailwindCSS
- **测试状态**: pnpm lint(存在既有警告)
- **备注**:
- 顶部筛选保持可见,列表滑动更顺畅
---
## [2026-01-31] - 优化收藏页面滚动结构
### 优化
- 收藏页面顶部筛选固定,列表区域独立滚动 (`pages/favorites/index.vue`)
---
**详细信息**
- **影响文件**: src/pages/favorites/index.vue, README.md
- **技术栈**: Vue 3, Taro, TailwindCSS
- **测试状态**: pnpm lint(存在既有警告)
- **备注**:
- 顶部筛选保持可见,列表滑动更顺畅
---
## [2026-01-31] - 优化计划书页面滚动与测试数据
### 优化
......
<template>
<view class="min-h-screen bg-gray-50 pb-[200rpx]">
<!-- Header -->
<NavHeader title="我的收藏" />
<view class="h-screen bg-gray-50 flex flex-col">
<view class="bg-gray-50">
<NavHeader title="我的收藏" />
<!-- Tabs Section -->
<view class="bg-white mt-[2rpx] px-[24rpx] py-[20rpx]">
<FilterTabs
v-model="activeTab"
:tabs="tabs"
label-key="title"
value-key="key"
/>
<view class="bg-white mt-[2rpx] px-[24rpx] py-[20rpx]">
<FilterTabs
v-model="activeTab"
:tabs="tabs"
label-key="title"
value-key="key"
/>
</view>
</view>
<!-- List Section -->
<view class="px-[24rpx] py-[24rpx]">
<view class="flex-1 overflow-y-auto px-[24rpx] py-[24rpx] pb-[200rpx]">
<view v-for="(item, index) in filteredList" :key="index"
class="bg-white rounded-[24rpx] p-[24rpx] mb-[24rpx] shadow-sm">
......@@ -121,6 +120,22 @@ const list = ref([
date: '2024-01-12',
type: 'other',
downloadUrl: ''
},
{
id: 5,
title: '重疾险产品知识详解.pptx',
category: '产品知识',
date: '2024-01-13',
type: 'product',
downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/%E8%82%A1%E5%88%A4%E5%90%88%E5%8F%8B%E7%94%A8%E7%9F%A5%E8%AF%86%E8%AF%B4%E6%98%8E20240112110417414.pptx'
},
{
id: 6,
title: '2024年最新保险政策解读.txt',
category: '政策解读',
date: '2024-01-12',
type: 'other',
downloadUrl: ''
}
])
......
<template>
<div class="min-h-screen bg-[#F9FAFB] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<!-- Navigation Header -->
<NavHeader title="产品知识库" />
<!-- Content Area -->
<div class="px-[40rpx] mt-[40rpx]">
<div class="h-screen bg-[#F9FAFB] flex flex-col">
<div class="bg-[#F9FAFB]">
<!-- Navigation Header -->
<NavHeader title="产品知识库" />
<!-- Filter Tabs -->
<FilterTabs v-model="activeTab" :tabs="tabs" wrapper-class="mb-[40rpx]" />
<div class="px-[40rpx] mt-[40rpx]">
<FilterTabs v-model="activeTab" :tabs="tabs" wrapper-class="mb-[40rpx]" />
</div>
</div>
<div class="flex-1 overflow-y-auto px-[40rpx] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<!-- Section Title -->
<div class="text-[#1F2937] text-[32rpx] font-bold mb-[24rpx]">
{{ tabs[activeTab] }}
......