✨ feat(silver-wisdom): implement silver wisdom knowledge module

- add mock data for silver wisdom content with 6 knowledge items
- create custom hooks for data fetching, filtering and recommendations
- develop wisdom list page with categorization, search and detailed card UI
- implement ink wash painting style design system for better visual experience
- add loading states, error handling and empty states for better user experience

src/client/mobile/data/mockSilverWisdomData.ts

@@ -0,0 +1,156 @@
+// 银龄智库模拟数据
+export interface SilverWisdomItem {
+  id: number;
+  title: string;
+  content: string;
+  category: string;
+  author: {
+    name: string;
+    avatar: string;
+    title: string;
+    organization: string;
+  };
+  coverImage: string;
+  viewCount: number;
+  likeCount: number;
+  commentCount: number;
+  readTime: number; // 阅读时间（分钟）
+  tags: string[];
+  publishDate: string;
+  isFeatured: boolean;
+}
+
+// 6组银龄智库知识内容模拟数据
+export const mockSilverWisdomData: SilverWisdomItem[] = [
+  {
+    id: 1,
+    title: "中医养生智慧：老年人四季调养指南",
+    content: "春季养肝、夏季养心、秋季养肺、冬季养肾，顺应自然规律的养生法则。老年人应特别注意饮食调理、情志调节和适度运动。分享我40年中医临床总结的有效养生方法，包括穴位按摩、食疗方剂和日常保健技巧。",
+    category: "健康养生",
+    author: {
+      name: "张老中医",
+      avatar: "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=400&h=400&fit=crop&crop=face",
+      title: "资深中医专家",
+      organization: "北京中医学院附属医院"
+    },
+    coverImage: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=800&h=400&fit=crop",
+    viewCount: 2345,
+    likeCount: 156,
+    commentCount: 23,
+    readTime: 8,
+    tags: ["中医养生", "四季调养", "老年人健康", "食疗"],
+    publishDate: "2024-07-20",
+    isFeatured: true
+  },
+  {
+    id: 2,
+    title: "退休教师分享：如何保持大脑活力的10个方法",
+    content: "作为从教40年的老教师，我总结了一套保持大脑活力的方法。包括每日阅读、写作练习、棋类游戏、学习新技能、社交活动等。这些简单易行的方法帮助我在70岁仍然思维敏捷，记忆力良好。",
+    category: "认知训练",
+    author: {
+      name: "李老师",
+      avatar: "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?w=400&h=400&fit=crop&crop=face",
+      title: "退休特级教师",
+      organization: "北京市第一中学"
+    },
+    coverImage: "https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=800&h=400&fit=crop",
+    viewCount: 1876,
+    likeCount: 198,
+    commentCount: 31,
+    readTime: 6,
+    tags: ["大脑训练", "认知保健", "退休生活", "学习技巧"],
+    publishDate: "2024-07-19",
+    isFeatured: true
+  },
+  {
+    id: 3,
+    title: "园艺疗愈：退休生活的绿色疗法",
+    content: "退休后的园艺生活不仅是一种爱好，更是一种疗愈方式。通过种植花草、培育盆景，我找到了内心的平静和生活的意义。分享适合老年人的园艺项目、种植技巧和园艺对身心健康的益处。",
+    category: "生活艺术",
+    author: {
+      name: "王园艺师",
+      avatar: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=400&fit=crop&crop=face",
+      title: "资深园艺专家",
+      organization: "中国园艺学会"
+    },
+    coverImage: "https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?w=800&h=400&fit=crop",
+    viewCount: 1543,
+    likeCount: 134,
+    commentCount: 18,
+    readTime: 7,
+    tags: ["园艺疗愈", "退休生活", "花卉种植", "盆景艺术"],
+    publishDate: "2024-07-18",
+    isFeatured: false
+  },
+  {
+    id: 4,
+    title: "金融投资智慧：退休资金的稳健配置策略",
+    content: "基于我30年银行从业经验，为退休朋友分享资金配置的智慧。如何在保证资金安全的前提下获得稳定收益，如何防范金融诈骗，以及适合老年人的理财产品选择和风险评估。",
+    category: "理财规划",
+    author: {
+      name: "赵金融",
+      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face",
+      title: "退休银行家",
+      organization: "中国工商银行"
+    },
+    coverImage: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=800&h=400&fit=crop",
+    viewCount: 2891,
+    likeCount: 245,
+    commentCount: 42,
+    readTime: 10,
+    tags: ["退休理财", "资金配置", "风险防范", "稳健投资"],
+    publishDate: "2024-07-17",
+    isFeatured: true
+  },
+  {
+    id: 5,
+    title: "传统书法的艺术传承：老年人书法学习指南",
+    content: "书法不仅是一门艺术，更是一种修身养性的方式。作为从事书法教学50年的老教师，我想分享书法对老年人身心健康的益处、学习书法的正确方法、如何选择合适的工具和如何坚持每日练习。",
+    category: "艺术修养",
+    author: {
+      name: "陈书法家",
+      avatar: "https://images.unsplash.com/photo-1557862921-37829c790f19?w=400&h=400&fit=crop&crop=face",
+      title: "著名书法家",
+      organization: "中国书法家协会"
+    },
+    coverImage: "https://images.unsplash.com/photo-1547891654-e66ed7ebb968?w=800&h=400&fit=crop",
+    viewCount: 3124,
+    likeCount: 289,
+    commentCount: 56,
+    readTime: 9,
+    tags: ["书法艺术", "传统文化", "老年学习", "修身养性"],
+    publishDate: "2024-07-16",
+    isFeatured: true
+  },
+  {
+    id: 6,
+    title: "数字时代：老年人如何安全使用智能手机",
+    content: "面对智能手机和移动互联网，很多老年朋友感到困惑。作为IT专家，我将分享如何安全、便捷地使用智能手机，包括常用app使用、网络安全注意事项、防诈骗技巧，以及适合老年人的智能工具推荐。",
+    category: "科技应用",
+    author: {
+      name: "刘工程师",
+      avatar: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?w=400&h=400&fit=crop&crop=face",
+      title: "退休IT专家",
+      organization: "华为技术研究院"
+    },
+    coverImage: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&h=400&fit=crop",
+    viewCount: 3657,
+    likeCount: 412,
+    commentCount: 78,
+    readTime: 12,
+    tags: ["智能手机", "网络安全", "数字生活", "科技应用"],
+    publishDate: "2024-07-15",
+    isFeatured: false
+  }
+];
+
+// 知识分类列表
+export const wisdomCategories = [
+  { value: 'all', label: '全部', icon: '📚' },
+  { value: '健康养生', label: '健康养生', icon: '🏥' },
+  { value: '认知训练', label: '认知训练', icon: '🧠' },
+  { value: '生活艺术', label: '生活艺术', icon: '🎨' },
+  { value: '理财规划', label: '理财规划', icon: '💰' },
+  { value: '艺术修养', label: '艺术修养', icon: '🎭' },
+  { value: '科技应用', label: '科技应用', icon: '📱' }
+];

src/client/mobile/hooks/useSilverWisdomData.ts

@@ -0,0 +1,106 @@
+import { useState, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { mockSilverWisdomData, SilverWisdomItem, wisdomCategories } from '../data/mockSilverWisdomData';
+
+export const useSilverWisdomData = (searchQuery?: string, category?: string) => {
+  const [selectedCategory, setSelectedCategory] = useState<string>(category || 'all');
+
+  // 使用模拟数据的查询
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ['silver-wisdom', searchQuery, selectedCategory],
+    queryFn: async () => {
+      // 模拟API延迟
+      await new Promise(resolve => setTimeout(resolve, 800));
+      
+      let filteredData = mockSilverWisdomData;
+
+      // 按分类筛选
+      if (selectedCategory && selectedCategory !== 'all') {
+        filteredData = filteredData.filter(item => item.category === selectedCategory);
+      }
+
+      // 按搜索关键词筛选
+      if (searchQuery?.trim()) {
+        const query = searchQuery.toLowerCase();
+        filteredData = filteredData.filter(item => 
+          item.title.toLowerCase().includes(query) ||
+          item.content.toLowerCase().includes(query) ||
+          item.author.name.toLowerCase().includes(query) ||
+          item.tags.some(tag => tag.toLowerCase().includes(query)) ||
+          item.category.toLowerCase().includes(query)
+        );
+      }
+
+      // 按精选和发布时间排序
+      return filteredData.sort((a, b) => {
+        if (a.isFeatured !== b.isFeatured) {
+          return a.isFeatured ? -1 : 1;
+        }
+        return new Date(b.publishDate).getTime() - new Date(a.publishDate).getTime();
+      });
+    },
+    staleTime: 5 * 60 * 1000, // 5分钟
+    gcTime: 10 * 60 * 1000,  // 10分钟
+  });
+
+  // 统计信息
+  const stats = useMemo(() => {
+    const items = data || mockSilverWisdomData;
+    return {
+      totalCount: items.length,
+      categoryCounts: wisdomCategories.reduce((acc, cat) => {
+        if (cat.value !== 'all') {
+          acc[cat.value] = items.filter(item => item.category === cat.value).length;
+        }
+        return acc;
+      }, {} as Record<string, number>),
+      totalViews: items.reduce((sum, item) => sum + item.viewCount, 0),
+      totalLikes: items.reduce((sum, item) => sum + item.likeCount, 0)
+    };
+  }, [data]);
+
+  return {
+    wisdomItems: data || [],
+    categories: wisdomCategories,
+    selectedCategory,
+    setSelectedCategory,
+    stats,
+    isLoading,
+    isError,
+    error
+  };
+};
+
+// 获取单个知识详情
+export const useSilverWisdomDetail = (id: number) => {
+  return useQuery({
+    queryKey: ['silver-wisdom-detail', id],
+    queryFn: async () => {
+      await new Promise(resolve => setTimeout(resolve, 500));
+      const item = mockSilverWisdomData.find(item => item.id === id);
+      if (!item) {
+        throw new Error('知识内容不存在');
+      }
+      return item;
+    }
+  });
+};
+
+// 获取推荐内容
+export const useRecommendedWisdom = (excludeId?: number) => {
+  return useQuery({
+    queryKey: ['recommended-wisdom', excludeId],
+    queryFn: async () => {
+      await new Promise(resolve => setTimeout(resolve, 500));
+      let items = [...mockSilverWisdomData];
+      
+      if (excludeId) {
+        items = items.filter(item => item.id !== excludeId);
+      }
+      
+      return items
+        .sort((a, b) => b.viewCount - a.viewCount)
+        .slice(0, 4);
+    }
+  });
+};

src/client/mobile/pages/SilverWisdomPage.tsx

@@ -1,27 +1,499 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useSilverWisdomData } from '../hooks/useSilverWisdomData';
+import { SilverWisdomItem } from '../data/mockSilverWisdomData';
+import {
+  MagnifyingGlassIcon,
+  UserIcon,
+  EyeIcon,
+  HeartIcon,
+  ChatBubbleLeftIcon,
+  ClockIcon,
+  TagIcon,
+  BookOpenIcon
+} from '@heroicons/react/24/outline';
+import { HeartIcon as HeartSolidIcon } from '@heroicons/react/24/solid';
+
+// 中国水墨风格色彩系统
+const COLORS = {
+  ink: {
+    light: '#f5f3f0',     // 宣纸背景色
+    medium: '#d4c4a8',    // 淡墨
+    dark: '#8b7355',      // 浓墨
+    deep: '#3a2f26',      // 焦墨
+  },
+  accent: {
+    red: '#a85c5c',    // 朱砂
+    blue: '#4a6b7c',   // 花青
+    green: '#5c7c5c',  // 石绿
+  },
+  text: {
+    primary: '#2f1f0f',   // 墨色文字
+    secondary: '#5d4e3b', // 淡墨文字
+    light: '#8b7355',     // 极淡文字
+  }
+};
+
+// 字体样式
+const FONT_STYLES = {
+  title: 'font-serif text-3xl font-bold tracking-wide',
+  sectionTitle: 'font-serif text-2xl font-semibold tracking-wide',
+  body: 'font-sans text-base leading-relaxed',
+  caption: 'font-sans text-sm',
+  small: 'font-sans text-xs',
+};
+
+// 分类标签颜色映射
+const categoryColors: Record<string, string> = {
+  '健康养生': 'bg-green-50 text-green-800 border-green-200',
+  '认知训练': 'bg-blue-50 text-blue-800 border-blue-200',
+  '生活艺术': 'bg-purple-50 text-purple-800 border-purple-200',
+  '理财规划': 'bg-orange-50 text-orange-800 border-orange-200',
+  '艺术修养': 'bg-pink-50 text-pink-800 border-pink-200',
+  '科技应用': 'bg-indigo-50 text-indigo-800 border-indigo-200',
+};
+
+// 工具函数：格式化数字
+const formatNumber = (num: number) => {
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1) + 'k';
+  }
+  return num.toString();
+};
+
+// 工具函数：格式化日期
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffTime = Math.abs(now.getTime() - date.getTime());
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  
+  if (diffDays === 1) return '昨天';
+  if (diffDays <= 7) return `${diffDays}天前`;
+  return date.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' });
+};
 
 const SilverWisdomPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeSearch, setActiveSearch] = useState('');
+  
+  const {
+    wisdomItems,
+    categories,
+    selectedCategory,
+    setSelectedCategory,
+    stats,
+    isLoading,
+    isError,
+    error
+  } = useSilverWisdomData(activeSearch);
+
+  // 处理搜索
+  const handleSearch = () => {
+    if (searchQuery.trim()) {
+      setActiveSearch(searchQuery.trim());
+    } else {
+      setActiveSearch('');
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  // 清除搜索
+  const clearSearch = () => {
+    setSearchQuery('');
+    setActiveSearch('');
+  };
+
+  // 格式化数字
+  const formatNumber = (num: number) => {
+    if (num >= 1000) {
+      return (num / 1000).toFixed(1) + 'k';
+    }
+    return num.toString();
+  };
+
+  // 格式化日期
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffTime = Math.abs(now.getTime() - date.getTime());
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    
+    if (diffDays === 1) return '昨天';
+    if (diffDays <= 7) return `${diffDays}天前`;
+    return date.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' });
+  };
+
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: COLORS.ink.light }}>
+      {/* 头部导航 - 水墨风格 */}
+      <header 
+        className="shadow-sm sticky top-0 z-10 border-b border-opacity-20 px-4 py-4"
+        style={{ 
+          backgroundColor: COLORS.ink.light, 
+          borderColor: COLORS.ink.medium 
+        }}
+      >
+        <div className="flex items-center justify-between">
+          <h1 
+            className={FONT_STYLES.sectionTitle}
+            style={{ color: COLORS.text.primary }}
+          >
+            银龄智库
+          </h1>
+          <UserIcon 
+            className="w-6 h-6 cursor-pointer transition-colors duration-300 hover:text-orange-600"
+            style={{ color: COLORS.ink.dark }}
+            onClick={() => navigate('/profile')} 
+          />
+        </div>
+      </header>
+
+      {/* 搜索栏 */}
+      <div className="px-4 py-4">
+        <div 
+          className="flex items-center rounded-full px-4 py-3 shadow-sm border transition-all duration-300 focus-within:shadow-md"
+          style={{ 
+            backgroundColor: 'rgba(255,255,255,0.7)',
+            borderColor: COLORS.ink.medium 
+          }}
+        >
+          <MagnifyingGlassIcon 
+            className="w-5 h-5 mr-3"
+            style={{ color: COLORS.ink.dark }} 
+          />
+          <input
+            type="text"
+            placeholder="搜索银龄智慧..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyPress={handleKeyPress}
+            className="flex-1 bg-transparent outline-none font-sans"
+            style={{ color: COLORS.text.primary }}
+          />
+          {searchQuery && (
+            <button
+              onClick={clearSearch}
+              className="ml-2 text-sm"
+              style={{ color: COLORS.text.light }}
+            >
+              清除
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* 分类筛选 */}
+      <div className="px-4 mb-4">
+        <div className="flex space-x-2 overflow-x-auto pb-2 scrollbar-hide">
+          {categories.map((category) => (
+            <button
+              key={category.value}
+              onClick={() => setSelectedCategory(category.value)}
+              className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 whitespace-nowrap ${
+                selectedCategory === category.value
+                  ? 'shadow-md'
+                  : 'hover:shadow-md'
+              }`}
+              style={{
+                backgroundColor: selectedCategory === category.value 
+                  ? COLORS.ink.dark 
+                  : 'rgba(255,255,255,0.7)',
+                color: selectedCategory === category.value ? 'white' : COLORS.text.primary,
+                border: `1px solid ${COLORS.ink.medium}`
+              }}
+            >
+              {category.icon} {category.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 统计卡片 */}
+      <div className="px-4 mb-4">
+        <div className="grid grid-cols-4 gap-2">
+          <div 
+            className="rounded-xl p-3 text-center shadow-sm backdrop-blur-sm"
+            style={{ 
+              backgroundColor: 'rgba(255,255,255,0.8)',
+              border: `1px solid ${COLORS.ink.medium}`
+            }}
+          >
+            <BookOpenIcon className="w-6 h-6 mx-auto mb-1" style={{ color: COLORS.accent.blue }} />
+            <div className="font-serif text-lg font-bold" style={{ color: COLORS.accent.blue }}>
+              {stats.totalCount}
+            </div>
+            <div className={`${FONT_STYLES.small}`} style={{ color: COLORS.text.secondary }}>
+              智慧文章
+            </div>
+          </div>
+          <div 
+            className="rounded-xl p-3 text-center shadow-sm backdrop-blur-sm"
+            style={{ 
+              backgroundColor: 'rgba(255,255,255,0.8)',
+              border: `1px solid ${COLORS.ink.medium}`
+            }}
+          >
+            <EyeIcon className="w-6 h-6 mx-auto mb-1" style={{ color: COLORS.accent.green }} />
+            <div className="font-serif text-lg font-bold" style={{ color: COLORS.accent.green }}>
+              {formatNumber(stats.totalViews)}
+            </div>
+            <div className={`${FONT_STYLES.small}`} style={{ color: COLORS.text.secondary }}>
+              总阅读量
+            </div>
+          </div>
+          <div 
+            className="rounded-xl p-3 text-center shadow-sm backdrop-blur-sm"
+            style={{ 
+              backgroundColor: 'rgba(255,255,255,0.8)',
+              border: `1px solid ${COLORS.ink.medium}`
+            }}
+          >
+            <HeartIcon className="w-6 h-6 mx-auto mb-1" style={{ color: COLORS.accent.red }} />
+            <div className="font-serif text-lg font-bold" style={{ color: COLORS.accent.red }}>
+              {formatNumber(stats.totalLikes)}
+            </div>
+            <div className={`${FONT_STYLES.small}`} style={{ color: COLORS.text.secondary }}>
+              喜欢数
+            </div>
+          </div>
+          <div 
+            className="rounded-xl p-3 text-center shadow-sm backdrop-blur-sm"
+            style={{ 
+              backgroundColor: 'rgba(255,255,255,0.8)',
+              border: `1px solid ${COLORS.ink.medium}`
+            }}
+          >
+            <UserIcon className="w-6 h-6 mx-auto mb-1" style={{ color: COLORS.ink.dark }} />
+            <div className="font-serif text-lg font-bold" style={{ color: COLORS.ink.dark }}>
+              6
+            </div>
+            <div className={`${FONT_STYLES.small}`} style={{ color: COLORS.text.secondary }}>
+              专家作者
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 主要内容区域 */}
+      <div className="px-4 pb-20">
+        {isLoading ? (
+          // 加载骨架屏
+          <div className="space-y-4">
+            {[...Array(3)].map((_, i) => (
+              <SilverWisdomSkeleton key={i} />
+            ))}
+          </div>
+        ) : isError ? (
+          // 错误状态
+          <div className="text-center py-16">
+            <BookOpenIcon className="w-16 h-16 mx-auto mb-4" style={{ color: COLORS.ink.medium }} />
+            <h3 className={`${FONT_STYLES.caption} font-semibold mb-2`} style={{ color: COLORS.text.secondary }}>
+              加载失败
+            </h3>
+            <p className={`${FONT_STYLES.small}`} style={{ color: COLORS.text.light }}>
+              {(error as Error)?.message || '请稍后重试'}
+            </p>
+          </div>
+        ) : wisdomItems.length > 0 ? (
+          // 知识列表
+          <div className="space-y-4">
+            {wisdomItems.map((item) => (
+              <WisdomCard
+                key={item.id}
+                item={item}
+                onClick={() => navigate(`/silver-wisdom/${item.id}`)}
+              />
+            ))}
+          </div>
+        ) : (
+          // 空状态
+          <div className="text-center py-16">
+            <MagnifyingGlassIcon className="w-16 h-16 mx-auto mb-4" style={{ color: COLORS.ink.medium }} />
+            <h3 className={`${FONT_STYLES.caption} font-semibold mb-2`} style={{ color: COLORS.text.secondary }}>
+              {activeSearch ? '搜索结果为空' : '暂无相关内容'}
+            </h3>
+            <p className={`${FONT_STYLES.small}`} style={{ color: COLORS.text.light }}>
+              {activeSearch ? '尝试调整搜索关键词或分类' : '请稍后重试'}
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* 底部提示 */}
+      <div className="fixed bottom-20 left-0 right-0 px-4">
+        <div 
+          className="rounded-lg p-3 text-center text-sm font-sans"
+          style={{ 
+            backgroundColor: 'rgba(74, 107, 124, 0.1)',
+            color: COLORS.accent.blue,
+            border: `1px solid ${COLORS.accent.blue}`
+          }}
+        >
+          💡 点击卡片查看详细内容，收藏您喜欢的智慧分享
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// 知识卡片组件
+const WisdomCard: React.FC<{
+  item: SilverWisdomItem;
+  onClick: () => void;
+}> = ({ item, onClick }) => {
   return (
-    <div className="min-h-screen bg-gray-50 p-4">
-      <div className="text-center">
-        <h1 className="text-2xl font-bold text-gray-900 mb-4">银龄智库</h1>
-        <p className="text-gray-600">智慧分享，经验传承</p>
-        
-        <div className="mt-8 space-y-4">
-          <div className="bg-white p-6 rounded-lg shadow">
-            <h3 className="text-lg font-semibold mb-2">专家经验</h3>
-            <p className="text-gray-600">汇集各行业专家的宝贵经验和知识</p>
-          </div>
-          
-          <div className="bg-white p-6 rounded-lg shadow">
-            <h3 className="text-lg font-semibold mb-2">技能培训</h3>
-            <p className="text-gray-600">提供专业技能培训和指导</p>
-          </div>
-          
-          <div className="bg-white p-6 rounded-lg shadow">
-            <h3 className="text-lg font-semibold mb-2">分享交流</h3>
-            <p className="text-gray-600">创建知识分享和交流的平台</p>
+    <div
+      className="rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer overflow-hidden backdrop-blur-sm"
+      style={{ 
+        backgroundColor: 'rgba(255,255,255,0.8)',
+        border: `1px solid ${COLORS.ink.medium}`
+      }}
+      onClick={onClick}
+    >
+      {/* 封面图片 */}
+      <div className="relative">
+        <img
+          src={item.coverImage}
+          alt={item.title}
+          className="w-full h-48 object-cover"
+        />
+        {item.isFeatured && (
+          <div 
+            className="absolute top-2 right-2 px-2 py-1 rounded text-xs font-medium"
+            style={{ 
+              backgroundColor: COLORS.accent.red,
+              color: 'white'
+            }}
+          >
+            精选
+          </div>
+        )}
+        <div 
+          className="absolute bottom-2 left-2 px-2 py-1 rounded text-xs font-medium"
+          style={{ 
+            backgroundColor: 'rgba(255,255,255,0.9)',
+            color: COLORS.text.primary
+          }}
+        >
+          {item.readTime}分钟阅读
+        </div>
+      </div>
+
+      {/* 内容区域 */}
+      <div className="p-4">
+        {/* 分类标签 */}
+        <div className="flex items-center justify-between mb-2">
+          <span 
+            className={`px-2 py-1 rounded-full text-xs ${categoryColors[item.category] || 'bg-gray-100 text-gray-800 border-gray-200'}`}
+          >
+            {item.category}
+          </span>
+          <span className={`${FONT_STYLES.small}`} style={{ color: COLORS.text.light }}>
+            {item.publishDate}
+          </span>
+        </div>
+
+        {/* 标题 */}
+        <h3 
+          className={`${FONT_STYLES.body} font-bold line-clamp-2 mb-2`}
+          style={{ color: COLORS.text.primary }}
+        >
+          {item.title}
+        </h3>
+
+        {/* 简介 */}
+        <p 
+          className={`${FONT_STYLES.caption} line-clamp-3 mb-3`}
+          style={{ color: COLORS.text.secondary }}
+        >
+          {item.content}
+        </p>
+
+        {/* 作者信息 */}
+        <div className="flex items-center mb-3">
+          <img
+            src={item.author.avatar}
+            alt={item.author.name}
+            className="w-8 h-8 rounded-full border-2 mr-2"
+            style={{ borderColor: COLORS.ink.medium }}
+          />
+          <div>
+            <p className={`${FONT_STYLES.small} font-medium`} style={{ color: COLORS.text.primary }}>
+              {item.author.name}
+            </p>
+            <p className={`${FONT_STYLES.small}`} style={{ color: COLORS.text.light }}>
+              {item.author.title}
+            </p>
+          </div>
+        </div>
+
+        {/* 标签 */}
+        <div className="flex flex-wrap gap-1 mb-3">
+          {item.tags.slice(0, 3).map((tag, index) => (
+            <span 
+              key={index}
+              className={`px-2 py-1 rounded-full text-xs ${categoryColors[item.category] || 'bg-gray-100 text-gray-800 border-gray-200'}`}
+            >
+              {tag}
+            </span>
+          ))}
+          {item.tags.length > 3 && (
+            <span 
+              className={`px-2 py-1 rounded-full text-xs`}
+              style={{ 
+                backgroundColor: COLORS.ink.light,
+                color: COLORS.text.secondary,
+                border: `1px solid ${COLORS.ink.medium}`
+              }}
+            >
+              +{item.tags.length - 3}
+            </span>
+          )}
+        </div>
+
+        {/* 统计信息 */}
+        <div className="flex items-center justify-between text-xs">
+          <div className="flex items-center space-x-3">
+            <span className="flex items-center" style={{ color: COLORS.text.light }}>
+              <EyeIcon className="w-4 h-4 mr-1" />
+              {formatNumber(item.viewCount)}
+            </span>
+            <span className="flex items-center" style={{ color: COLORS.text.light }}>
+              <HeartIcon className="w-4 h-4 mr-1" />
+              {formatNumber(item.likeCount)}
+            </span>
+            <span className="flex items-center" style={{ color: COLORS.text.light }}>
+              <ChatBubbleLeftIcon className="w-4 h-4 mr-1" />
+              {formatNumber(item.commentCount)}
+            </span>
           </div>
+          <span className="flex items-center" style={{ color: COLORS.text.light }}>
+            <ClockIcon className="w-4 h-4 mr-1" />
+            {formatDate(item.publishDate)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// 加载骨架屏
+const SilverWisdomSkeleton: React.FC = () => {
+  return (
+    <div className="rounded-xl overflow-hidden" style={{ backgroundColor: 'rgba(255,255,255,0.8)', border: `1px solid ${COLORS.ink.medium}` }}>
+      <div className="w-full h-48" style={{ backgroundColor: COLORS.ink.medium }}></div>
+      <div className="p-4">
+        <div className="h-4 rounded" style={{ backgroundColor: COLORS.ink.medium, width: '60%' }}></div>
+        <div className="mt-2 space-y-2">
+          <div className="h-3 rounded" style={{ backgroundColor: COLORS.ink.light }}></div>
+          <div className="h-3 rounded" style={{ backgroundColor: COLORS.ink.light, width: '80%' }}></div>
         </div>
       </div>
     </div>