vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新Company页面的UI为FUI风格

Browse Source
This commit is contained in:
zzlgreat
2025-12-22 12:58:01 +08:00
parent 897067a94e
commit 307d80c808
3 changed files with 234 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/mocks/handlers/event.js
View File

@@ -1588,7 +1588,7 @@ export const eventHandlers = [
// ==================== 主线模式相关 ====================
// 获取按主线（lv1/lv2概念）分组的事件列表
// 获取按主线（lv1/lv2/lv3概念）分组的事件列表
http.get('/api/events/mainline', async ({ request }) => {
await delay(500);
@@ -1596,7 +1596,7 @@ export const eventHandlers = [
const recentDays = parseInt(url.searchParams.get('recent_days') || '7', 10);
const importance = url.searchParams.get('importance') || 'all';
const limitPerMainline = parseInt(url.searchParams.get('limit') || '20', 10);
// 分组方式: 'lv1' | 'lv2' | 具体的 lv2_id（如 'L2_AI_INFRA'）
// 分组方式: 'lv1' | 'lv2' | 'lv3' | 具体的概念ID（如 'L1_TMT', 'L2_AI_INFRA', 'L3_AI_CHIP'）
const groupBy = url.searchParams.get('group_by') || 'lv2';
console.log('[Mock Event] 获取主线数据:', { recentDays, importance, limitPerMainline, groupBy });
@@ -1605,73 +1605,113 @@ export const eventHandlers = [
// 生成 mock 事件数据
const allEvents = generateDynamicNewsEvents(100);
// 定义 lv2 主线分类
// 定义完整的 lv1 -> lv2 -> lv3 层级结构
const mainlineDefinitions = [
{ lv2_id: 'L2_AI_INFRA', lv2_name: 'AI基础设施 (算力/CPO/PCB)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['算力', 'AI', '人工智能', 'CPO', 'PCB', '光模块', '大模型', '智能体'] },
{ lv2_id: 'L2_SEMICONDUCTOR', lv2_name: '半导体 (设计/制造/封测)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['半导体', '芯片', '光刻', 'IC', '晶圆', '封装', '测试'] },
{ lv2_id: 'L2_ROBOT', lv2_name: '机器人 (人形机器人/工业机器人)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['机器人', '人形', '自动化', '工业机器人', '具身智能'] },
{ lv2_id: 'L2_CONSUMER_ELEC', lv2_name: '消费电子 (手机/XR/可穿戴)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['手机', 'XR', 'VR', 'AR', '可穿戴', '华为', '苹果', '消费电子'] },
{ lv2_id: 'L2_TELECOM', lv2_name: '通信、互联网与软件', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['通信', '5G', '6G', '互联网', '软件', '云计算', 'SaaS', '数字化'] },
{ lv2_id: 'L2_NEW_ENERGY', lv2_name: '新能源 (光伏/储能/电池)', lv1_id: 'L1_NEW_ENERGY_ENV', lv1_name: '新能源与智能汽车 (New Energy & Auto)', keywords: ['光伏', '储能', '电池', '锂电', '新能源', '风电', '清洁能源'] },
{ lv2_id: 'L2_EV', lv2_name: '智能网联汽车', lv1_id: 'L1_NEW_ENERGY_ENV', lv1_name: '新能源与智能汽车 (New Energy & Auto)', keywords: ['新能源汽车', '电动车', '智能驾驶', '汽车', '整车', '零部件', '智能网联'] },
{ lv2_id: 'L2_LOW_ALTITUDE', lv2_name: '低空经济 (无人机/eVTOL)', lv1_id: 'L1_ADVANCED_MFG', lv1_name: '先进制造', keywords: ['低空', '无人机', 'eVTOL', '飞行', '空域'] },
{ lv2_id: 'L2_MILITARY', lv2_name: '军工 (航空航天/国防)', lv1_id: 'L1_ADVANCED_MFG', lv1_name: '先进制造', keywords: ['军工', '国防', '航空', '航天', '卫星', '导弹'] },
{ lv2_id: 'L2_PHARMA', lv2_name: '医药医疗 (创新药/器械)', lv1_id: 'L1_PHARMA', lv1_name: '医药健康', keywords: ['医药', '医疗', '创新药', '器械', '生物', 'CXO'] },
{ lv2_id: 'L2_FINANCE', lv2_name: '金融 (银行/券商/保险)', lv1_id: 'L1_FINANCE', lv1_name: '金融', keywords: ['金融', '银行', '券商', '保险', '证券'] },
{ lv3_id: 'L3_AI_CHIP', lv3_name: 'AI芯片与算力', lv2_id: 'L2_AI_INFRA', lv2_name: 'AI基础设施 (算力/CPO/PCB)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['算力', 'AI芯片', 'GPU', '英伟达', '华为昇腾', '寒武纪'] },
{ lv3_id: 'L3_AI_SERVER', lv3_name: '服务器与数据中心', lv2_id: 'L2_AI_INFRA', lv2_name: 'AI基础设施 (算力/CPO/PCB)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['服务器', '数据中心', '智算中心', '液冷'] },
{ lv3_id: 'L3_OPTICAL', lv3_name: '光通信与CPO', lv2_id: 'L2_AI_INFRA', lv2_name: 'AI基础设施 (算力/CPO/PCB)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['CPO', '光通信', '光模块', '光芯片'] },
{ lv3_id: 'L3_PCB', lv3_name: 'PCB与封装', lv2_id: 'L2_AI_INFRA', lv2_name: 'AI基础设施 (算力/CPO/PCB)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['PCB', '封装', 'AI PCB'] },
{ lv3_id: 'L3_AI_APP', lv3_name: 'AI应用与大模型', lv2_id: 'L2_AI_INFRA', lv2_name: 'AI基础设施 (算力/CPO/PCB)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['大模型', '智能体', 'AI', '人工智能', 'DeepSeek', 'KIMI', 'ChatGPT'] },
{ lv3_id: 'L3_CHIP_DESIGN', lv3_name: '芯片设计', lv2_id: 'L2_SEMICONDUCTOR', lv2_name: '半导体 (设计/制造/封测)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['芯片设计', '半导体', 'IC设计'] },
{ lv3_id: 'L3_CHIP_MFG', lv3_name: '芯片制造', lv2_id: 'L2_SEMICONDUCTOR', lv2_name: '半导体 (设计/制造/封测)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['晶圆', '光刻', '芯片制造', '中芯国际'] },
{ lv3_id: 'L3_HUMANOID', lv3_name: '人形机器人', lv2_id: 'L2_ROBOT', lv2_name: '机器人 (人形机器人/工业机器人)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['人形机器人', '具身智能', '特斯拉机器人'] },
{ lv3_id: 'L3_INDUSTRIAL_ROBOT', lv3_name: '工业机器人', lv2_id: 'L2_ROBOT', lv2_name: '机器人 (人形机器人/工业机器人)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['工业机器人', '自动化', '机器人'] },
{ lv3_id: 'L3_MOBILE', lv3_name: '智能手机', lv2_id: 'L2_CONSUMER_ELEC', lv2_name: '消费电子 (手机/XR/可穿戴)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['手机', '华为', '苹果', '小米', '折叠屏'] },
{ lv3_id: 'L3_XR', lv3_name: 'XR与可穿戴', lv2_id: 'L2_CONSUMER_ELEC', lv2_name: '消费电子 (手机/XR/可穿戴)', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['XR', 'VR', 'AR', '可穿戴', 'MR', 'Vision Pro'] },
{ lv3_id: 'L3_5G', lv3_name: '5G/6G通信', lv2_id: 'L2_TELECOM', lv2_name: '通信、互联网与软件', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['5G', '6G', '通信', '基站'] },
{ lv3_id: 'L3_CLOUD', lv3_name: '云计算与软件', lv2_id: 'L2_TELECOM', lv2_name: '通信、互联网与软件', lv1_id: 'L1_TMT', lv1_name: 'TMT (科技/媒体/通信)', keywords: ['云计算', '软件', 'SaaS', '互联网', '数字化'] },
{ lv3_id: 'L3_PV', lv3_name: '光伏', lv2_id: 'L2_NEW_ENERGY', lv2_name: '新能源 (光伏/储能/电池)', lv1_id: 'L1_NEW_ENERGY_ENV', lv1_name: '新能源与智能汽车', keywords: ['光伏', '太阳能', '硅片', '组件'] },
{ lv3_id: 'L3_STORAGE', lv3_name: '储能与电池', lv2_id: 'L2_NEW_ENERGY', lv2_name: '新能源 (光伏/储能/电池)', lv1_id: 'L1_NEW_ENERGY_ENV', lv1_name: '新能源与智能汽车', keywords: ['储能', '电池', '锂电', '固态电池', '新能源'] },
{ lv3_id: 'L3_EV_OEM', lv3_name: '新能源整车', lv2_id: 'L2_EV', lv2_name: '智能网联汽车', lv1_id: 'L1_NEW_ENERGY_ENV', lv1_name: '新能源与智能汽车', keywords: ['新能源汽车', '电动车', '比亚迪', '特斯拉', '整车'] },
{ lv3_id: 'L3_AUTO_DRIVE', lv3_name: '智能驾驶', lv2_id: 'L2_EV', lv2_name: '智能网联汽车', lv1_id: 'L1_NEW_ENERGY_ENV', lv1_name: '新能源与智能汽车', keywords: ['智能驾驶', '自动驾驶', '智能网联', '车路协同'] },
{ lv3_id: 'L3_DRONE', lv3_name: '无人机', lv2_id: 'L2_LOW_ALTITUDE', lv2_name: '低空经济 (无人机/eVTOL)', lv1_id: 'L1_ADVANCED_MFG', lv1_name: '先进制造', keywords: ['无人机', '低空', '空域'] },
{ lv3_id: 'L3_EVTOL', lv3_name: 'eVTOL', lv2_id: 'L2_LOW_ALTITUDE', lv2_name: '低空经济 (无人机/eVTOL)', lv1_id: 'L1_ADVANCED_MFG', lv1_name: '先进制造', keywords: ['eVTOL', '飞行汽车', '空中出租车'] },
{ lv3_id: 'L3_AEROSPACE', lv3_name: '航空航天', lv2_id: 'L2_MILITARY', lv2_name: '军工 (航空航天/国防)', lv1_id: 'L1_ADVANCED_MFG', lv1_name: '先进制造', keywords: ['航空', '航天', '卫星', '火箭', '军工'] },
{ lv3_id: 'L3_DEFENSE', lv3_name: '国防军工', lv2_id: 'L2_MILITARY', lv2_name: '军工 (航空航天/国防)', lv1_id: 'L1_ADVANCED_MFG', lv1_name: '先进制造', keywords: ['国防', '导弹', '军工装备'] },
{ lv3_id: 'L3_DRUG', lv3_name: '创新药', lv2_id: 'L2_PHARMA', lv2_name: '医药医疗 (创新药/器械)', lv1_id: 'L1_PHARMA', lv1_name: '医药健康', keywords: ['创新药', '医药', '生物', 'CXO'] },
{ lv3_id: 'L3_DEVICE', lv3_name: '医疗器械', lv2_id: 'L2_PHARMA', lv2_name: '医药医疗 (创新药/器械)', lv1_id: 'L1_PHARMA', lv1_name: '医药健康', keywords: ['医疗器械', '医疗', '器械'] },
{ lv3_id: 'L3_BANK', lv3_name: '银行', lv2_id: 'L2_FINANCE', lv2_name: '金融 (银行/券商/保险)', lv1_id: 'L1_FINANCE', lv1_name: '金融', keywords: ['银行', '金融'] },
{ lv3_id: 'L3_BROKER', lv3_name: '券商', lv2_id: 'L2_FINANCE', lv2_name: '金融 (银行/券商/保险)', lv1_id: 'L1_FINANCE', lv1_name: '金融', keywords: ['券商', '证券'] },
];
// 生成 lv2 选项列表供前端下拉框使用
const lv2Options = mainlineDefinitions.map(m => ({
lv2_id: m.lv2_id,
lv2_name: m.lv2_name,
lv1_name: m.lv1_name,
}));
// 生成层级选项供前端下拉框使用
const hierarchyOptions = {
lv1: [...new Map(mainlineDefinitions.map(m => [m.lv1_id, { id: m.lv1_id, name: m.lv1_name }])).values()],
lv2: [...new Map(mainlineDefinitions.map(m => [m.lv2_id, { id: m.lv2_id, name: m.lv2_name, lv1_id: m.lv1_id, lv1_name: m.lv1_name }])).values()],
lv3: mainlineDefinitions.map(m => ({ id: m.lv3_id, name: m.lv3_name, lv2_id: m.lv2_id, lv2_name: m.lv2_name, lv1_id: m.lv1_id, lv1_name: m.lv1_name })),
};
// 按主线分组事件
const mainlineGroups = {};
// 判断是否为具体的 lv2_id
const isSpecificLv2 = groupBy.startsWith('L2_');
// 判断分组方式
const isSpecificId = groupBy.startsWith('L1_') || groupBy.startsWith('L2_') || groupBy.startsWith('L3_');
allEvents.forEach(event => {
// 从事件的 keywords (related_concepts) 中查找匹配的主线
const keywords = event.keywords || event.related_concepts || [];
const conceptNames = keywords.map(k => k.concept || k.name || k).join(' ');
const titleAndDesc = `${event.title || ''} ${event.description || ''}`;
const textToMatch = `${conceptNames} ${titleAndDesc}`.toLowerCase();
// 匹配主线
mainlineDefinitions.forEach(mainline => {
const matched = mainline.keywords.some(kw => textToMatch.includes(kw.toLowerCase()));
if (matched) {
// 根据分组方式决定分组键
let groupKey, groupData;
if (isSpecificLv2) {
// 具体 lv2 概念：只显示该概念下的事件，不分组
if (mainline.lv2_id !== groupBy) return;
groupKey = mainline.lv2_id;
groupData = {
lv2_id: mainline.lv2_id,
lv2_name: mainline.lv2_name,
lv1_name: mainline.lv1_name,
events: []
};
if (isSpecificId) {
// 筛选特定概念ID
if (groupBy.startsWith('L1_') && mainline.lv1_id === groupBy) {
groupKey = mainline.lv2_id;
groupData = {
group_id: mainline.lv2_id,
group_name: mainline.lv2_name,
parent_name: mainline.lv1_name,
events: []
};
} else if (groupBy.startsWith('L2_') && mainline.lv2_id === groupBy) {
groupKey = mainline.lv3_id;
groupData = {
group_id: mainline.lv3_id,
group_name: mainline.lv3_name,
parent_name: mainline.lv2_name,
grandparent_name: mainline.lv1_name,
events: []
};
} else if (groupBy.startsWith('L3_') && mainline.lv3_id === groupBy) {
groupKey = mainline.lv3_id;
groupData = {
group_id: mainline.lv3_id,
group_name: mainline.lv3_name,
parent_name: mainline.lv2_name,
grandparent_name: mainline.lv1_name,
events: []
};
} else {
return;
}
} else if (groupBy === 'lv1') {
// 按一级概念分组
groupKey = mainline.lv1_id;
groupData = {
lv1_id: mainline.lv1_id,
lv1_name: mainline.lv1_name,
group_id: mainline.lv1_id,
group_name: mainline.lv1_name,
events: []
};
} else if (groupBy === 'lv3') {
groupKey = mainline.lv3_id;
groupData = {
group_id: mainline.lv3_id,
group_name: mainline.lv3_name,
parent_name: mainline.lv2_name,
grandparent_name: mainline.lv1_name,
events: []
};
} else {
// 默认按二级概念分组
// 默认 lv2
groupKey = mainline.lv2_id;
groupData = {
lv2_id: mainline.lv2_id,
lv2_name: mainline.lv2_name,
lv1_name: mainline.lv1_name,
group_id: mainline.lv2_id,
group_name: mainline.lv2_name,
parent_name: mainline.lv1_name,
events: []
};
}
@@ -1679,7 +1719,6 @@ export const eventHandlers = [
if (!mainlineGroups[groupKey]) {
mainlineGroups[groupKey] = groupData;
}
// 避免重复添加
if (!mainlineGroups[groupKey].events.find(e => e.id === event.id)) {
mainlineGroups[groupKey].events.push(event);
}
@@ -1687,7 +1726,6 @@ export const eventHandlers = [
});
});
// 转换为数组，限制每组数量，按事件数量排序
const mainlines = Object.values(mainlineGroups)
.map(group => ({
...group,
@@ -1697,7 +1735,6 @@ export const eventHandlers = [
.filter(group => group.event_count > 0)
.sort((a, b) => b.event_count - a.event_count);
// 统计未分组的事件
const groupedEventIds = new Set();
mainlines.forEach(m => m.events.forEach(e => groupedEventIds.add(e.id)));
const ungroupedCount = allEvents.filter(e => !groupedEventIds.has(e.id)).length;
@@ -1717,7 +1754,7 @@ export const eventHandlers = [
mainline_count: mainlines.length,
ungrouped_count: ungroupedCount,
group_by: groupBy,
lv2_options: lv2Options,
hierarchy_options: hierarchyOptions,
}
});
} catch (error) {

82
src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
View File

@@ -136,7 +136,7 @@ const MainlineCard = React.memo(
noOfLines={1}
flex={1}
>
{mainline.lv2_name || mainline.lv1_name || "其他"}
{mainline.group_name || mainline.lv2_name || mainline.lv1_name || "其他"}
</Text>
{/* 涨跌幅显示 - 在概念名称旁边 */}
{mainline.avg_change_pct != null && (
@@ -160,14 +160,15 @@ const MainlineCard = React.memo(
{mainline.event_count}
</Badge>
</HStack>
{/* 只有当同时存在 lv1_name 和 lv2_name 时才显示副标题 */}
{mainline.lv1_name && mainline.lv2_name && (
{/* 显示上级概念名称作为副标题 */}
{mainline.parent_name && (
<Text
fontSize="xs"
color={COLORS.secondaryTextColor}
noOfLines={1}
>
{mainline.lv1_name}
{mainline.grandparent_name ? `${mainline.grandparent_name} > ` : ""}
{mainline.parent_name}
</Text>
)}
</VStack>
@@ -283,10 +284,10 @@ const MainlineTimelineViewComponent = forwardRef(
const [error, setError] = useState(null);
const [mainlineData, setMainlineData] = useState(null);
const [expandedGroups, setExpandedGroups] = useState({});
// 概念级别选择: 'lv1' | 'lv2' | 具体的 lv2_id
// 概念级别选择: 'lv1' | 'lv2' | 'lv3' | 具体概念ID（如 L1_TMT, L2_AI_INFRA, L3_AI_CHIP）
const [groupBy, setGroupBy] = useState("lv2");
// lv2 概念选项（从 API 获取）
const [lv2Options, setLv2Options] = useState([]);
// 层级选项（从 API 获取）
const [hierarchyOptions, setHierarchyOptions] = useState({ lv1: [], lv2: [], lv3: [] });
// 根据主线类型获取配色
const getColorScheme = useCallback((lv2Name) => {
@@ -406,15 +407,16 @@ const MainlineTimelineViewComponent = forwardRef(
mainlines: sortedMainlines,
});
// 保存 lv2 选项供下拉框使用
if (result.data.lv2_options) {
setLv2Options(result.data.lv2_options);
// 保存层级选项供下拉框使用
if (result.data.hierarchy_options) {
setHierarchyOptions(result.data.hierarchy_options);
}
// 初始化展开状态（默认全部展开）
const initialExpanded = {};
sortedMainlines.forEach((mainline) => {
initialExpanded[mainline.lv2_id || mainline.lv1_id] = true;
const groupId = mainline.group_id || mainline.lv2_id || mainline.lv1_id;
initialExpanded[groupId] = true;
});
setExpandedGroups(initialExpanded);
} else {
@@ -563,24 +565,55 @@ const MainlineTimelineViewComponent = forwardRef(
onChange={setGroupBy}
size="small"
style={{
width: 160,
width: 200,
backgroundColor: "transparent",
}}
popupClassName="dark-select-dropdown"
dropdownStyle={{
backgroundColor: "#252a34",
borderColor: "#3a3f4b",
maxHeight: 400,
}}
showSearch
optionFilterProp="label"
options={[
{ value: "lv1", label: "按一级概念" },
{ value: "lv2", label: "按二级概念" },
...(lv2Options.length > 0
{
label: "分组方式",
options: [
{ value: "lv1", label: "按一级概念（大类）" },
{ value: "lv2", label: "按二级概念（细分）" },
{ value: "lv3", label: "按三级概念（更细）" },
],
},
...(hierarchyOptions.lv1?.length > 0
? [
{
label: "具体概念",
options: lv2Options.map((opt) => ({
value: opt.lv2_id,
label: opt.lv2_name,
label: "一级概念（展开）",
options: hierarchyOptions.lv1.map((opt) => ({
value: opt.id,
label: opt.name,
})),
},
]
: []),
...(hierarchyOptions.lv2?.length > 0
? [
{
label: "二级概念（展开）",
options: hierarchyOptions.lv2.map((opt) => ({
value: opt.id,
label: `${opt.name}`,
})),
},
]
: []),
...(hierarchyOptions.lv3?.length > 0
? [
{
label: "三级概念（展开）",
options: hierarchyOptions.lv3.map((opt) => ({
value: opt.id,
label: `${opt.name}`,
})),
},
]
@@ -656,9 +689,16 @@ const MainlineTimelineViewComponent = forwardRef(
}}
>
{mainlines.map((mainline) => {
const groupId = mainline.lv2_id || mainline.lv1_id || "ungrouped";
const groupId =
mainline.group_id ||
mainline.lv2_id ||
mainline.lv1_id ||
"ungrouped";
const groupName =
mainline.lv2_name || mainline.lv1_name || "其他";
mainline.group_name ||
mainline.lv2_name ||
mainline.lv1_name ||
"其他";
return (
<MainlineCard
key={groupId}