feat: 新增资料知识库页面

- 添加知识库页面路由配置及页面组件
- 实现基于标签的产品分类展示功能
- 使用 Tailwind CSS 构建响应式卡片布局
- 集成统一导航头和底部标签栏组件
- 更新项目变更日志记录新功能

@@ -10,6 +10,12 @@ All notable changes to this project will be documented in this file.
 - 重构图标使用方式：创建 `src/components/IconFont.vue` 组件封装 NutUI 图标库，支持通过字符串 `name` 属性配置图标，彻底移除 `markRaw` 逻辑，简化代码结构并符合用户偏好，同时保留了 SVG 图标的高清与高性能特性。
 - 重构图标使用方式：创建 `src/components/IconFont.vue` 组件封装 NutUI 图标库，支持通过字符串 `name` 属性配置图标，彻底移除 `markRaw` 逻辑，简化代码结构并符合用户偏好，同时保留了 SVG 图标的高清与高性能特性。
 
 
 ### Added
 ### Added
+- 新增 "资料知识库" 页面 (`src/pages/knowledge-base`)，还原设计稿布局
+- 使用 Tailwind CSS 实现页面样式，包括自定义 Tabs 和卡片布局
+- 调整卡片布局，将图片移至顶部，优化视觉体验
+- 集成 `NavHeader` 和 `TabBar` 组件，保持全站风格统一
+- 配置新页面路由至 `src/app.config.js`
+- 使用随机图片填充内容，模拟真实数据展示
 - 创建通用导航头组件 `src/components/NavHeader.vue`，统一页面头部样式
 - 创建通用导航头组件 `src/components/NavHeader.vue`，统一页面头部样式
 - 重构 "入职相关"、"签单相关"、"家办相关" 页面，使用 `NavHeader` 组件替代硬编码的头部结构
 - 重构 "入职相关"、"签单相关"、"家办相关" 页面，使用 `NavHeader` 组件替代硬编码的头部结构
 - 新增 "家办相关" 页面 (`src/pages/family-office`)，复用 "入职相关" 页面布局与样式
 - 新增 "家办相关" 页面 (`src/pages/family-office`)，复用 "入职相关" 页面布局与样式

@@ -10,6 +10,7 @@ const pages = [
   'pages/auth/index',
   'pages/auth/index',
   'pages/onboarding/index',
   'pages/onboarding/index',
   'pages/family-office/index',
   'pages/family-office/index',
+  'pages/knowledge-base/index',
   'pages/signing/index',
   'pages/signing/index',
 ]
 ]
 
 

+export default definePageConfig({
+  navigationBarTitleText: '资料知识库',
+  navigationStyle: 'custom'
+})

+<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]">
+
+      <!-- Filter Tabs -->
+      <div class="flex overflow-x-auto no-scrollbar mb-[40rpx] space-x-[24rpx]">
+        <div v-for="(tab, index) in tabs" :key="index"
+          class="px-[32rpx] py-[16rpx] rounded-full text-[28rpx] whitespace-nowrap transition-colors"
+          :class="activeTab === index ? 'bg-[#2563EB] text-white' : 'bg-[#F3F4F6] text-[#6B7280]'"
+          @click="activeTab = index">
+          {{ tab }}
+        </div>
+      </div>
+
+      <!-- Section Title -->
+      <div class="text-[#1F2937] text-[32rpx] font-bold mb-[24rpx]">
+        {{ tabs[activeTab] }}
+      </div>
+
+      <!-- Product Grid -->
+      <div class="flex flex-wrap justify-between">
+        <!-- Card Item -->
+        <div v-for="(item, index) in filteredProducts" :key="index"
+          class="w-[48%] bg-white rounded-[24rpx] overflow-hidden mb-[24rpx] shadow-sm flex flex-col">
+          <!-- Image Container -->
+          <div class="relative w-full h-[200rpx]">
+            <img :src="item.image" class="w-full h-full object-cover bg-gray-100" referrerpolicy="no-referrer" />
+            <!-- Tag -->
+            <div v-if="item.tag"
+              class="absolute top-[12rpx] right-[12rpx] bg-red-500 text-white text-[20rpx] px-[12rpx] py-[4rpx] rounded-full">
+              {{ item.tag }}
+            </div>
+          </div>
+
+          <!-- Content -->
+          <div class="p-[20rpx] flex flex-col flex-1">
+            <!-- Title -->
+            <div class="text-[#1F2937] text-[28rpx] font-medium leading-[1.4] line-clamp-2 mb-[16rpx]">
+              {{ item.title }}
+            </div>
+
+            <!-- Desc -->
+            <div class="mt-auto self-start bg-[#F3F4F6] text-[#6B7280] text-[22rpx] px-[12rpx] py-[4rpx] rounded-full">
+              {{ item.desc }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tab Bar -->
+    <TabBar current="home" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import NavHeader from '@/components/NavHeader.vue'
+import TabBar from '@/components/TabBar.vue'
+
+const activeTab = ref(0)
+const tabs = ['全部产品', '人寿保险', '医疗保险', '意外保险']
+
+/**
+ * Mock Data Generation
+ * @returns {Array} List of products
+ */
+const generateProducts = () => {
+  return [
+    { title: '终身寿险尊享版', tag: '热卖', desc: '5年超值', image: `https://picsum.photos/seed/1/200/200` },
+    { title: '百万医疗保险计划', desc: '收益率3.5%', image: `https://picsum.photos/seed/2/200/200` },
+    { title: '意外伤害保障计划', desc: '保证收益万能', image: `https://picsum.photos/seed/3/200/200` },
+    { title: '分红型年金保险', tag: '热卖', desc: '保证收益万能', image: `https://picsum.photos/seed/4/200/200` },
+    { title: '重大疾病保险', desc: '收益率4.2%', image: `https://picsum.photos/seed/5/200/200` },
+    { title: '少儿教育金保险', tag: '热卖', desc: '教育专属', image: `https://picsum.photos/seed/6/200/200` },
+    { title: '高端医疗服务', desc: '尊享服务', image: `https://picsum.photos/seed/7/200/200` },
+    { title: '家庭财产保险', desc: '全家无忧', image: `https://picsum.photos/seed/8/200/200` },
+  ]
+}
+
+const products = ref(generateProducts())
+
+const filteredProducts = computed(() => {
+  if (activeTab.value === 0) return products.value
+  // Mock filtering
+  return products.value.filter((_, i) => (i + activeTab.value) % 2 === 0)
+})
+</script>
+
+<style>
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>