diff --git a/src/views/Community/components/CompactSearchBox.js b/src/views/Community/components/CompactSearchBox.js
new file mode 100644
index 00000000..34fec201
--- /dev/null
+++ b/src/views/Community/components/CompactSearchBox.js
@@ -0,0 +1,610 @@
+// src/views/Community/components/CompactSearchBox.js
+// 紧凑版搜索和筛选组件 - 优化布局
+
+import React, { useState, useMemo, useEffect, useCallback, useRef } from 'react';
+import {
+    Input, Cascader, Button, Space, Tag, AutoComplete, Select as AntSelect,
+    Tooltip
+} from 'antd';
+import {
+    SearchOutlined, CloseCircleOutlined, StockOutlined, FilterOutlined,
+    CalendarOutlined, SortAscendingOutlined
+} from '@ant-design/icons';
+import dayjs from 'dayjs';
+import debounce from 'lodash/debounce';
+import { useSelector, useDispatch } from 'react-redux';
+import { fetchIndustryData, selectIndustryData, selectIndustryLoading } from '../../../store/slices/industrySlice';
+import { stockService } from '../../../services/stockService';
+import { logger } from '../../../utils/logger';
+import TradingTimeFilter from './TradingTimeFilter';
+
+const { Option } = AntSelect;
+
+const CompactSearchBox = ({
+    onSearch,
+    onSearchFocus,
+    filters = {},
+    mode,
+    pageSize,
+    trackingFunctions = {}
+}) => {
+    // 状态
+    const [stockOptions, setStockOptions] = useState([]);
+    const [allStocks, setAllStocks] = useState([]);
+    const [industryValue, setIndustryValue] = useState([]);
+    const [sort, setSort] = useState('new');
+    const [importance, setImportance] = useState([]);
+    const [tradingTimeRange, setTradingTimeRange] = useState(null);
+    const [inputValue, setInputValue] = useState('');
+
+    // Redux
+    const dispatch = useDispatch();
+    const industryData = useSelector(selectIndustryData);
+    const industryLoading = useSelector(selectIndustryLoading);
+
+    // 防抖搜索
+    const debouncedSearchRef = useRef(null);
+
+    const triggerSearch = useCallback((params) => {
+        logger.debug('CompactSearchBox', '触发搜索', { params });
+        onSearch(params);
+    }, [onSearch]);
+
+    useEffect(() => {
+        debouncedSearchRef.current = debounce((params) => {
+            triggerSearch(params);
+        }, 300);
+
+        return () => {
+            if (debouncedSearchRef.current) {
+                debouncedSearchRef.current.cancel();
+            }
+        };
+    }, [triggerSearch]);
+
+    // 加载股票数据
+    useEffect(() => {
+        const loadStocks = async () => {
+            const response = await stockService.getAllStocks();
+            if (response.success && response.data) {
+                setAllStocks(response.data);
+            }
+        };
+        loadStocks();
+    }, []);
+
+    // 初始化筛选条件
+    const findIndustryPath = useCallback((targetCode, data, currentPath = []) => {
+        if (!data || data.length === 0) return null;
+
+        for (const item of data) {
+            const newPath = [...currentPath, item.value];
+
+            if (item.value === targetCode) {
+                return newPath;
+            }
+
+            if (item.children && item.children.length > 0) {
+                const found = findIndustryPath(targetCode, item.children, newPath);
+                if (found) return found;
+            }
+        }
+        return null;
+    }, []);
+
+    useEffect(() => {
+        if (!filters) return;
+
+        if (filters.sort) setSort(filters.sort);
+
+        if (filters.importance) {
+            const importanceArray = filters.importance === 'all'
+                ? []
+                : filters.importance.split(',').map(v => v.trim()).filter(Boolean);
+            setImportance(importanceArray);
+        } else {
+            setImportance([]);
+        }
+
+        if (filters.industry_code && industryData && industryData.length > 0 && (!industryValue || industryValue.length === 0)) {
+            const path = findIndustryPath(filters.industry_code, industryData);
+            if (path) {
+                setIndustryValue(path);
+            }
+        } else if (!filters.industry_code && industryValue && industryValue.length > 0) {
+            setIndustryValue([]);
+        }
+
+        if (filters.q) {
+            setInputValue(filters.q);
+        } else if (!filters.q) {
+            setInputValue('');
+        }
+
+        const hasTimeInFilters = filters.start_date || filters.end_date || filters.recent_days;
+
+        if (hasTimeInFilters && (!tradingTimeRange || !tradingTimeRange.key)) {
+            let inferredKey = 'custom';
+            let inferredLabel = '';
+
+            if (filters.recent_days) {
+                if (filters.recent_days === '7') {
+                    inferredKey = 'week';
+                    inferredLabel = '近一周';
+                } else if (filters.recent_days === '30') {
+                    inferredKey = 'month';
+                    inferredLabel = '近一月';
+                } else {
+                    inferredLabel = `近${filters.recent_days}天`;
+                }
+            } else if (filters.start_date && filters.end_date) {
+                inferredLabel = `${dayjs(filters.start_date).format('MM-DD HH:mm')} - ${dayjs(filters.end_date).format('MM-DD HH:mm')}`;
+            }
+
+            const timeRange = {
+                start_date: filters.start_date || '',
+                end_date: filters.end_date || '',
+                recent_days: filters.recent_days || '',
+                label: inferredLabel,
+                key: inferredKey
+            };
+            setTradingTimeRange(timeRange);
+        } else if (!hasTimeInFilters && tradingTimeRange) {
+            setTradingTimeRange(null);
+        }
+    }, [filters, industryData, findIndustryPath, industryValue, tradingTimeRange]);
+
+    // 搜索股票
+    const handleSearch = (value) => {
+        if (!value || !allStocks || allStocks.length === 0) {
+            setStockOptions([]);
+            return;
+        }
+
+        const results = stockService.fuzzySearch(value, allStocks, 10);
+        const options = results.map(stock => ({
+            value: stock.code,
+            label: (
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <StockOutlined style={{ color: '#1890ff' }} />
+                    <span style={{ fontWeight: 500, color: '#333' }}>{stock.code}</span>
+                    <span style={{ color: '#666' }}>{stock.name}</span>
+                </div>
+            ),
+            stockInfo: stock
+        }));
+
+        setStockOptions(options);
+    };
+
+    const buildFilterParams = useCallback((overrides = {}) => {
+        const sortValue = overrides.sort ?? sort;
+        let actualSort = sortValue;
+        let returnType;
+
+        if (sortValue === 'returns_avg') {
+            actualSort = 'returns';
+            returnType = 'avg';
+        } else if (sortValue === 'returns_week') {
+            actualSort = 'returns';
+            returnType = 'week';
+        }
+
+        let importanceValue = overrides.importance ?? importance;
+        if (Array.isArray(importanceValue)) {
+            importanceValue = importanceValue.length === 0
+                ? 'all'
+                : importanceValue.join(',');
+        }
+
+        const result = {
+            sort: actualSort,
+            importance: importanceValue,
+            q: (overrides.q ?? filters.q) ?? '',
+            industry_code: overrides.industry_code ?? (industryValue?.[industryValue.length - 1] || ''),
+            start_date: overrides.start_date ?? (tradingTimeRange?.start_date || ''),
+            end_date: overrides.end_date ?? (tradingTimeRange?.end_date || ''),
+            recent_days: overrides.recent_days ?? (tradingTimeRange?.recent_days || ''),
+            ...overrides,
+            page: 1,
+        };
+
+        delete result.per_page;
+
+        if (returnType) {
+            result.return_type = returnType;
+        }
+
+        if (mode !== undefined && mode !== null) {
+            result.mode = mode;
+        }
+        if (pageSize !== undefined && pageSize !== null) {
+            result.per_page = pageSize;
+        }
+
+        return result;
+    }, [sort, importance, filters.q, industryValue, tradingTimeRange, mode, pageSize]);
+
+    const handleStockSelect = (_value, option) => {
+        const stockInfo = option.stockInfo;
+        if (stockInfo) {
+            if (trackingFunctions.trackRelatedStockClicked) {
+                trackingFunctions.trackRelatedStockClicked({
+                    stockCode: stockInfo.code,
+                    stockName: stockInfo.name,
+                    source: 'search_box_autocomplete',
+                    timestamp: new Date().toISOString(),
+                });
+            }
+
+            setInputValue(`${stockInfo.code} ${stockInfo.name}`);
+
+            const params = buildFilterParams({
+                q: stockInfo.code,
+                industry_code: ''
+            });
+            triggerSearch(params);
+        }
+    };
+
+    const handleImportanceChange = (value) => {
+        setImportance(value);
+
+        if (debouncedSearchRef.current) {
+            debouncedSearchRef.current.cancel();
+        }
+
+        const importanceStr = value.length === 0 ? 'all' : value.join(',');
+
+        if (trackingFunctions.trackNewsFilterApplied) {
+            trackingFunctions.trackNewsFilterApplied({
+                filterType: 'importance',
+                filterValue: importanceStr,
+                timestamp: new Date().toISOString(),
+            });
+        }
+
+        const params = buildFilterParams({ importance: importanceStr });
+        triggerSearch(params);
+    };
+
+    const handleSortChange = (value) => {
+        setSort(value);
+
+        if (debouncedSearchRef.current) {
+            debouncedSearchRef.current.cancel();
+        }
+
+        if (trackingFunctions.trackNewsSorted) {
+            trackingFunctions.trackNewsSorted({
+                sortBy: value,
+                previousSortBy: sort,
+                timestamp: new Date().toISOString(),
+            });
+        }
+
+        const params = buildFilterParams({ sort: value });
+        triggerSearch(params);
+    };
+
+    const handleIndustryChange = (value) => {
+        setIndustryValue(value);
+
+        if (debouncedSearchRef.current) {
+            debouncedSearchRef.current.cancel();
+        }
+
+        if (trackingFunctions.trackNewsFilterApplied) {
+            trackingFunctions.trackNewsFilterApplied({
+                filterType: 'industry',
+                filterValue: value?.[value.length - 1] || '',
+                timestamp: new Date().toISOString(),
+            });
+        }
+
+        const params = buildFilterParams({
+            industry_code: value?.[value.length - 1] || ''
+        });
+        triggerSearch(params);
+    };
+
+    const handleTradingTimeChange = (timeConfig) => {
+        if (!timeConfig) {
+            setTradingTimeRange(null);
+
+            if (trackingFunctions.trackNewsFilterApplied) {
+                trackingFunctions.trackNewsFilterApplied({
+                    filterType: 'time_range',
+                    filterValue: 'cleared',
+                    timestamp: new Date().toISOString(),
+                });
+            }
+
+            const params = buildFilterParams({
+                start_date: '',
+                end_date: '',
+                recent_days: ''
+            });
+            triggerSearch(params);
+            return;
+        }
+
+        const { range, type, label, key } = timeConfig;
+        let params = {};
+
+        if (type === 'recent_days') {
+            params.recent_days = range;
+            params.start_date = '';
+            params.end_date = '';
+        } else {
+            params.start_date = range[0].format('YYYY-MM-DD HH:mm:ss');
+            params.end_date = range[1].format('YYYY-MM-DD HH:mm:ss');
+            params.recent_days = '';
+        }
+
+        setTradingTimeRange({ ...params, label, key });
+
+        if (trackingFunctions.trackNewsFilterApplied) {
+            trackingFunctions.trackNewsFilterApplied({
+                filterType: 'time_range',
+                filterValue: label,
+                timeRangeType: type,
+                timestamp: new Date().toISOString(),
+            });
+        }
+
+        const searchParams = buildFilterParams({ ...params, mode });
+        triggerSearch(searchParams);
+    };
+
+    const handleMainSearch = () => {
+        if (debouncedSearchRef.current) {
+            debouncedSearchRef.current.cancel();
+        }
+
+        const params = buildFilterParams({
+            q: inputValue,
+            industry_code: ''
+        });
+
+        if (trackingFunctions.trackNewsSearched && inputValue) {
+            trackingFunctions.trackNewsSearched({
+                searchQuery: inputValue,
+                searchType: 'main_search',
+                filters: params,
+                timestamp: new Date().toISOString(),
+            });
+        }
+
+        triggerSearch(params);
+    };
+
+    const handleInputChange = (value) => {
+        setInputValue(value);
+    };
+
+    const handleReset = () => {
+        setInputValue('');
+        setStockOptions([]);
+        setIndustryValue([]);
+        setSort('new');
+        setImportance([]);
+        setTradingTimeRange(null);
+
+        if (trackingFunctions.trackNewsFilterApplied) {
+            trackingFunctions.trackNewsFilterApplied({
+                filterType: 'reset',
+                filterValue: 'all_filters_cleared',
+                timestamp: new Date().toISOString(),
+            });
+        }
+
+        const resetParams = {
+            q: '',
+            industry_code: '',
+            sort: 'new',
+            importance: 'all',
+            start_date: '',
+            end_date: '',
+            recent_days: '',
+            page: 1,
+            _forceRefresh: Date.now()
+        };
+
+        onSearch(resetParams);
+    };
+
+    const handleCascaderFocus = async () => {
+        if (!industryData || industryData.length === 0) {
+            dispatch(fetchIndustryData());
+        }
+    };
+
+    return (
+        <div style={{ padding: '12px 16px', background: '#fafafa', borderRadius: '8px' }}>
+            {/* 单行紧凑布局 */}
+            <Space wrap style={{ width: '100%' }} size="small">
+                {/* 搜索框 */}
+                <AutoComplete
+                    value={inputValue}
+                    onChange={handleInputChange}
+                    onSearch={handleSearch}
+                    onSelect={handleStockSelect}
+                    onFocus={onSearchFocus}
+                    options={stockOptions}
+                    placeholder="搜索股票/话题..."
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                            handleMainSearch();
+                        }
+                    }}
+                    style={{ width: 220 }}
+                    size="small"
+                >
+                    <Input
+                        prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
+                        size="small"
+                    />
+                </AutoComplete>
+
+                {/* 时间筛选 */}
+                <Tooltip title="时间筛选">
+                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                        <CalendarOutlined style={{ color: '#8c8c8c', fontSize: 12 }} />
+                        <TradingTimeFilter
+                            value={tradingTimeRange?.key || null}
+                            onChange={handleTradingTimeChange}
+                            compact
+                        />
+                    </div>
+                </Tooltip>
+
+                {/* 行业筛选 */}
+                <Tooltip title="行业分类">
+                    <Cascader
+                        value={industryValue}
+                        onChange={handleIndustryChange}
+                        onFocus={handleCascaderFocus}
+                        options={industryData || []}
+                        placeholder="行业"
+                        changeOnSelect
+                        showSearch={{
+                            filter: (inputValue, path) =>
+                                path.some(option =>
+                                    option.label.toLowerCase().includes(inputValue.toLowerCase())
+                                )
+                        }}
+                        allowClear
+                        expandTrigger="hover"
+                        displayRender={(labels) => labels[labels.length - 1] || '行业'}
+                        disabled={industryLoading}
+                        style={{ width: 100 }}
+                        size="small"
+                        suffixIcon={<FilterOutlined style={{ fontSize: 12 }} />}
+                    />
+                </Tooltip>
+
+                {/* 重要性筛选 */}
+                <Tooltip title="重要性筛选">
+                    <AntSelect
+                        mode="multiple"
+                        value={importance}
+                        onChange={handleImportanceChange}
+                        style={{ width: 100 }}
+                        size="small"
+                        placeholder="重要性"
+                        maxTagCount={0}
+                        maxTagPlaceholder={(omittedValues) => `已选 ${omittedValues.length} 项`}
+                    >
+                        <Option value="S">极高</Option>
+                        <Option value="A">高</Option>
+                        <Option value="B">中</Option>
+                        <Option value="C">低</Option>
+                    </AntSelect>
+                </Tooltip>
+
+                {/* 排序 */}
+                <Tooltip title="排序方式">
+                    <AntSelect
+                        value={sort}
+                        onChange={handleSortChange}
+                        style={{ width: 110 }}
+                        size="small"
+                        suffixIcon={<SortAscendingOutlined style={{ fontSize: 12 }} />}
+                    >
+                        <Option value="new">最新</Option>
+                        <Option value="hot">最热</Option>
+                        <Option value="importance">重要性</Option>
+                        <Option value="returns_avg">平均收益</Option>
+                        <Option value="returns_week">周收益</Option>
+                    </AntSelect>
+                </Tooltip>
+
+                {/* 重置按钮 */}
+                <Tooltip title="重置所有筛选">
+                    <Button
+                        icon={<CloseCircleOutlined />}
+                        onClick={handleReset}
+                        size="small"
+                        danger
+                        type="text"
+                    >
+                        重置
+                    </Button>
+                </Tooltip>
+            </Space>
+
+            {/* 激活的筛选标签（如果有的话） */}
+            {(inputValue || industryValue.length > 0 || importance.length > 0 || tradingTimeRange || sort !== 'new') && (
+                <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+                    {inputValue && (
+                        <Tag closable onClose={() => {
+                            setInputValue('');
+                            const params = buildFilterParams({ q: '' });
+                            triggerSearch(params);
+                        }} color="blue">
+                            搜索: {inputValue}
+                        </Tag>
+                    )}
+                    {tradingTimeRange && (
+                        <Tag closable onClose={() => {
+                            setTradingTimeRange(null);
+                            const params = buildFilterParams({
+                                start_date: '',
+                                end_date: '',
+                                recent_days: ''
+                            });
+                            triggerSearch(params);
+                        }} color="green">
+                            {tradingTimeRange.label}
+                        </Tag>
+                    )}
+                    {industryValue.length > 0 && industryData && (
+                        <Tag closable onClose={() => {
+                            setIndustryValue([]);
+                            const params = buildFilterParams({ industry_code: '' });
+                            triggerSearch(params);
+                        }} color="orange">
+                            行业: {(() => {
+                                const findLabel = (code, data) => {
+                                    for (const item of data) {
+                                        if (code.startsWith(item.value)) {
+                                            if (item.value === code) {
+                                                return item.label;
+                                            } else {
+                                                return findLabel(code, item.children);
+                                            }
+                                        }
+                                    }
+                                    return null;
+                                };
+                                const lastLevelCode = industryValue[industryValue.length - 1];
+                                return findLabel(lastLevelCode, industryData);
+                            })()}
+                        </Tag>
+                    )}
+                    {importance.length > 0 && (
+                        <Tag closable onClose={() => {
+                            setImportance([]);
+                            const params = buildFilterParams({ importance: 'all' });
+                            triggerSearch(params);
+                        }} color="purple">
+                            重要性: {importance.map(imp => ({ 'S': '极高', 'A': '高', 'B': '中', 'C': '低' }[imp] || imp)).join(', ')}
+                        </Tag>
+                    )}
+                    {sort && sort !== 'new' && (
+                        <Tag closable onClose={() => {
+                            setSort('new');
+                            const params = buildFilterParams({ sort: 'new' });
+                            triggerSearch(params);
+                        }} color="cyan">
+                            排序: {({ 'hot': '最热', 'importance': '重要性', 'returns_avg': '平均收益', 'returns_week': '周收益' }[sort] || sort)}
+                        </Tag>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CompactSearchBox;
diff --git a/src/views/Community/components/DynamicNewsCard.js b/src/views/Community/components/DynamicNewsCard.js
index 2afb12c1..116e0fca 100644
--- a/src/views/Community/components/DynamicNewsCard.js
+++ b/src/views/Community/components/DynamicNewsCard.js
@@ -35,7 +35,7 @@ import EventScrollList from './DynamicNewsCard/EventScrollList';
 import ModeToggleButtons from './DynamicNewsCard/ModeToggleButtons';
 import PaginationControl from './DynamicNewsCard/PaginationControl';
 import DynamicNewsDetailPanel from './DynamicNewsDetail';
-import UnifiedSearchBox from './UnifiedSearchBox';
+import CompactSearchBox from './CompactSearchBox';
 import {
   fetchDynamicNews,
   toggleEventFollow,
@@ -597,12 +597,11 @@ const [currentMode, setCurrentMode] = useState('vertical');
           </VStack>
         </Flex>
 
-        {/* 搜索和筛选组件 */}
+        {/* 搜索和筛选组件 - 紧凑版 */}
         <Box mt={4}>
-          <UnifiedSearchBox
+          <CompactSearchBox
             onSearch={onSearch}
             onSearchFocus={onSearchFocus}
-            popularKeywords={popularKeywords}
             filters={filters}
             mode={mode}
             pageSize={pageSize}
diff --git a/src/views/Community/components/HeroPanel.js b/src/views/Community/components/HeroPanel.js
new file mode 100644
index 00000000..7fd0625a
--- /dev/null
+++ b/src/views/Community/components/HeroPanel.js
@@ -0,0 +1,463 @@
+// src/views/Community/components/HeroPanel.js
+// 顶部说明面板组件：产品功能介绍 + 沪深指数折线图 + 热门概念词云图
+
+import React, { useEffect, useState, useMemo } from 'react';
+import {
+  Box,
+  Card,
+  CardBody,
+  Flex,
+  VStack,
+  HStack,
+  Text,
+  Heading,
+  useColorModeValue,
+  SimpleGrid,
+  Icon,
+  Stat,
+  StatLabel,
+  StatNumber,
+  StatHelpText,
+  StatArrow,
+  Spinner,
+  Center,
+} from '@chakra-ui/react';
+import { TrendingUp, Activity, Globe, Zap } from 'lucide-react';
+import ReactECharts from 'echarts-for-react';
+import { logger } from '../../../utils/logger';
+
+/**
+ * 获取指数行情数据
+ */
+const fetchIndexKline = async (indexCode) => {
+  try {
+    const response = await fetch(`/api/index/${indexCode}/kline`);
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    logger.error('HeroPanel', 'fetchIndexKline', error);
+    return null;
+  }
+};
+
+/**
+ * 获取热门概念数据（用于词云图）
+ */
+const fetchPopularConcepts = async () => {
+  try {
+    const response = await fetch('/concept-api/search', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query: '',
+        size: 50,  // 获取前50个概念用于词云
+        page: 1,
+        sort_by: 'change_pct'
+      })
+    });
+
+    const data = await response.json();
+    if (data.results) {
+      return data.results.map(item => ({
+        name: item.concept,
+        value: Math.abs(item.price_info?.avg_change_pct || 1),  // 使用涨跌幅绝对值作为权重
+        change_pct: item.price_info?.avg_change_pct || 0,
+      }));
+    }
+    return [];
+  } catch (error) {
+    logger.error('HeroPanel', 'fetchPopularConcepts', error);
+    return [];
+  }
+};
+
+/**
+ * 迷你折线图组件
+ */
+const MiniIndexChart = ({ indexCode, indexName }) => {
+  const [chartData, setChartData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [latestData, setLatestData] = useState(null);
+
+  const chartBg = useColorModeValue('transparent', 'transparent');
+  const lineColor = useColorModeValue('#FFD700', '#FFD700');  // 金色
+  const areaColor = useColorModeValue('rgba(255, 215, 0, 0.15)', 'rgba(255, 215, 0, 0.1)');
+
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      const data = await fetchIndexKline(indexCode);
+
+      if (data && data.data && data.data.length > 0) {
+        // 取最近一个交易日的数据
+        const latest = data.data[data.data.length - 1];
+        setLatestData({
+          close: latest[2],
+          change: ((latest[2] - latest[1]) / latest[1] * 100).toFixed(2),
+          isPositive: latest[2] >= latest[1]
+        });
+
+        // 准备图表数据（最近60个交易日）
+        const recentData = data.data.slice(-60);
+        setChartData({
+          dates: recentData.map(item => item[0]),
+          values: recentData.map(item => item[2])
+        });
+      }
+      setLoading(false);
+    };
+
+    loadData();
+  }, [indexCode]);
+
+  const chartOption = useMemo(() => {
+    if (!chartData) return {};
+
+    return {
+      backgroundColor: chartBg,
+      grid: {
+        left: 5,
+        right: 5,
+        top: 5,
+        bottom: 20,
+        containLabel: false
+      },
+      xAxis: {
+        type: 'category',
+        data: chartData.dates,
+        show: false
+      },
+      yAxis: {
+        type: 'value',
+        show: false,
+        scale: true
+      },
+      series: [{
+        type: 'line',
+        data: chartData.values,
+        smooth: true,
+        symbol: 'none',
+        lineStyle: {
+          color: lineColor,
+          width: 2,
+          shadowColor: lineColor,
+          shadowBlur: 8,
+          shadowOffsetY: 2
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: areaColor
+            }, {
+              offset: 1,
+              color: 'rgba(255, 215, 0, 0)'
+            }]
+          }
+        }
+      }]
+    };
+  }, [chartData, chartBg, lineColor, areaColor]);
+
+  if (loading) {
+    return (
+      <Center h="120px">
+        <Spinner size="sm" color="gold" />
+      </Center>
+    );
+  }
+
+  return (
+    <VStack spacing={2} align="stretch" h="120px">
+      <HStack justify="space-between">
+        <VStack align="start" spacing={0}>
+          <Text fontSize="xs" color="whiteAlpha.700">{indexName}</Text>
+          <Text fontSize="lg" fontWeight="bold" color="white">
+            {latestData?.close.toFixed(2)}
+          </Text>
+        </VStack>
+        <HStack spacing={1}>
+          <StatArrow type={latestData?.isPositive ? 'increase' : 'decrease'} />
+          <Text
+            fontSize="sm"
+            fontWeight="bold"
+            color={latestData?.isPositive ? 'green.300' : 'red.300'}
+          >
+            {latestData?.isPositive ? '+' : ''}{latestData?.change}%
+          </Text>
+        </HStack>
+      </HStack>
+      <Box flex="1">
+        <ReactECharts
+          option={chartOption}
+          style={{ height: '80px', width: '100%' }}
+          opts={{ renderer: 'canvas' }}
+        />
+      </Box>
+    </VStack>
+  );
+};
+
+/**
+ * 概念词云图组件
+ */
+const ConceptWordCloud = () => {
+  const [concepts, setConcepts] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const chartBg = useColorModeValue('transparent', 'transparent');
+
+  useEffect(() => {
+    const loadConcepts = async () => {
+      setLoading(true);
+      const data = await fetchPopularConcepts();
+      setConcepts(data);
+      setLoading(false);
+    };
+
+    loadConcepts();
+  }, []);
+
+  const chartOption = useMemo(() => {
+    if (concepts.length === 0) return {};
+
+    return {
+      backgroundColor: chartBg,
+      tooltip: {
+        show: true,
+        formatter: (params) => {
+          const changePct = params.data.change_pct;
+          const sign = changePct > 0 ? '+' : '';
+          return `${params.name}<br/>涨跌: ${sign}${changePct.toFixed(2)}%`;
+        }
+      },
+      series: [{
+        type: 'wordCloud',
+        shape: 'circle',
+        left: 'center',
+        top: 'center',
+        width: '100%',
+        height: '100%',
+        right: null,
+        bottom: null,
+        sizeRange: [12, 40],
+        rotationRange: [-45, 45],
+        rotationStep: 45,
+        gridSize: 8,
+        drawOutOfBound: false,
+        layoutAnimation: true,
+        textStyle: {
+          fontFamily: 'sans-serif',
+          fontWeight: 'bold',
+          color: function (params) {
+            // 根据涨跌幅设置颜色
+            const changePct = params.data.change_pct;
+            if (changePct > 5) return '#ff4d4f';      // 大涨：红色
+            if (changePct > 3) return '#ff7875';      // 中涨：浅红
+            if (changePct > 0) return '#ffa940';      // 小涨：橙色
+            if (changePct === 0) return '#FFD700';    // 平盘：金色
+            if (changePct > -3) return '#95de64';     // 小跌：浅绿
+            if (changePct > -5) return '#52c41a';     // 中跌：绿色
+            return '#13c2c2';                          // 大跌：青色
+          }
+        },
+        emphasis: {
+          focus: 'self',
+          textStyle: {
+            shadowBlur: 10,
+            shadowColor: '#FFD700',
+            fontSize: 20
+          }
+        },
+        data: concepts
+      }]
+    };
+  }, [concepts, chartBg]);
+
+  if (loading) {
+    return (
+      <Center h="200px">
+        <Spinner size="md" color="gold" />
+      </Center>
+    );
+  }
+
+  return (
+    <ReactECharts
+      option={chartOption}
+      style={{ height: '200px', width: '100%' }}
+      opts={{ renderer: 'canvas' }}
+    />
+  );
+};
+
+/**
+ * 产品特性图标组件
+ */
+const FeatureIcon = ({ icon, title, description }) => {
+  return (
+    <HStack spacing={3} align="start">
+      <Box
+        p={2}
+        borderRadius="lg"
+        bg="whiteAlpha.200"
+        color="gold"
+      >
+        <Icon as={icon} boxSize={5} />
+      </Box>
+      <VStack align="start" spacing={0}>
+        <Text fontSize="sm" fontWeight="bold" color="white">
+          {title}
+        </Text>
+        <Text fontSize="xs" color="whiteAlpha.700">
+          {description}
+        </Text>
+      </VStack>
+    </HStack>
+  );
+};
+
+/**
+ * 顶部说明面板主组件
+ */
+const HeroPanel = () => {
+  const gradientBg = 'linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%)';
+  const cardBorder = '1px solid';
+  const borderColor = useColorModeValue('rgba(255, 215, 0, 0.3)', 'rgba(255, 215, 0, 0.2)');
+
+  return (
+    <Card
+      bg={gradientBg}
+      borderColor={borderColor}
+      borderWidth={cardBorder}
+      boxShadow="0 8px 32px rgba(0, 0, 0, 0.4)"
+      mb={6}
+      overflow="hidden"
+      position="relative"
+    >
+      {/* 装饰性背景图案 */}
+      <Box
+        position="absolute"
+        top="-20%"
+        right="-10%"
+        width="500px"
+        height="500px"
+        borderRadius="full"
+        bg="radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%)"
+        pointerEvents="none"
+      />
+
+      <CardBody p={6}>
+        <SimpleGrid columns={{ base: 1, lg: 3 }} spacing={6}>
+          {/* 左侧：产品介绍 */}
+          <Box>
+            <VStack align="start" spacing={4}>
+              <Heading size="lg" color="white" fontWeight="extrabold">
+                <Text
+                  bgGradient="linear(to-r, #FFD700, #FFA500)"
+                  bgClip="text"
+                >
+                  价值前沿
+                </Text>
+              </Heading>
+              <Text fontSize="sm" color="whiteAlpha.800" lineHeight="1.8">
+                实时捕捉市场动态，智能分析投资机会。
+                <br />
+                整合多维数据源，为您提供专业的投资决策支持。
+              </Text>
+
+              <VStack spacing={3} align="stretch" w="100%">
+                <FeatureIcon
+                  icon={Activity}
+                  title="实时监控"
+                  description="7×24小时追踪市场动态"
+                />
+                <FeatureIcon
+                  icon={TrendingUp}
+                  title="智能分析"
+                  description="AI驱动的概念板块分析"
+                />
+                <FeatureIcon
+                  icon={Globe}
+                  title="全面覆盖"
+                  description="A股全市场深度数据"
+                />
+                <FeatureIcon
+                  icon={Zap}
+                  title="极速响应"
+                  description="毫秒级数据更新推送"
+                />
+              </VStack>
+            </VStack>
+          </Box>
+
+          {/* 中间：沪深指数折线图 */}
+          <Box>
+            <VStack spacing={4} h="100%">
+              <Box
+                w="100%"
+                p={4}
+                bg="whiteAlpha.100"
+                borderRadius="xl"
+                borderWidth="1px"
+                borderColor="whiteAlpha.200"
+                backdropFilter="blur(10px)"
+              >
+                <MiniIndexChart indexCode="000001" indexName="上证指数" />
+              </Box>
+              <Box
+                w="100%"
+                p={4}
+                bg="whiteAlpha.100"
+                borderRadius="xl"
+                borderWidth="1px"
+                borderColor="whiteAlpha.200"
+                backdropFilter="blur(10px)"
+              >
+                <MiniIndexChart indexCode="399001" indexName="深证成指" />
+              </Box>
+            </VStack>
+          </Box>
+
+          {/* 右侧：热门概念词云图 */}
+          <Box>
+            <VStack align="start" spacing={3} h="100%">
+              <HStack>
+                <Text fontSize="md" fontWeight="bold" color="white">
+                  🔥 热门概念
+                </Text>
+                <Text fontSize="xs" color="whiteAlpha.600">
+                  实时更新
+                </Text>
+              </HStack>
+              <Box
+                w="100%"
+                flex="1"
+                bg="whiteAlpha.100"
+                borderRadius="xl"
+                borderWidth="1px"
+                borderColor="whiteAlpha.200"
+                backdropFilter="blur(10px)"
+                p={3}
+              >
+                <ConceptWordCloud />
+              </Box>
+              <Text fontSize="xs" color="whiteAlpha.600" textAlign="center" w="100%">
+                字体大小表示热度 · 颜色表示涨跌幅
+              </Text>
+            </VStack>
+          </Box>
+        </SimpleGrid>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default HeroPanel;
diff --git a/src/views/Community/index.js b/src/views/Community/index.js
index ff0a43c0..88ad6a92 100644
--- a/src/views/Community/index.js
+++ b/src/views/Community/index.js
@@ -24,6 +24,7 @@ import {
 // 导入组件
 import DynamicNewsCard from './components/DynamicNewsCard';
 import HotEventsSection from './components/HotEventsSection';
+import HeroPanel from './components/HeroPanel';
 
 // 导入自定义 Hooks
 import { useEventData } from './hooks/useEventData';
@@ -175,11 +176,9 @@ const Community = () => {
             </HStack>
           </Alert>
         )}
-        {/* 热点事件区域 */}
-        <HotEventsSection
-          events={hotEvents}
-          onEventClick={communityEvents.trackNewsArticleClicked}
-        />
+
+        {/* 顶部说明面板：产品介绍 + 沪深指数 + 热门概念词云 */}
+        <HeroPanel />
 
         {/* 实时要闻·动态追踪 - 横向滚动 */}
         <DynamicNewsCard
@@ -198,6 +197,12 @@ const Community = () => {
             trackRelatedStockClicked: communityEvents.trackRelatedStockClicked,
           }}
         />
+
+        {/* 热点事件区域 - 移至底部 */}
+        <HotEventsSection
+          events={hotEvents}
+          onEventClick={communityEvents.trackNewsArticleClicked}
+        />
       </Container>
     </Box>
   );