Pine
7da9749953
- 布局沿用数字孪生页接口：左侧 AI 对话区 + 右侧企业分布面板 - 新增共享 ParkSidePanel 组件（分区/企业名录/详情/实时动态）， 数字孪生与 AI 助手页右侧完全一致 - 新增 AiChatPanel 对话组件：欢迎语 + 消息流 + 快捷提问 + 输入发送， 内置园区知识库模拟回复（入驻/政策/场地/AI 赋能/分区/企业/融资/就业/导师） - 路由与导航循环加入 /ai（数据大屏 → 数字孪生 → AI 助手 → 媒体轮播） - usePageNav 忽略输入框/文本域按键，避免输入方向键误切页面 - 新增 send/eraser/headset/circle-dot 图标，全部遵守 bd- 浅色科技 UI 规范
52 lines
1.8 KiB
JavaScript
52 lines
1.8 KiB
JavaScript
import { useEffect } from 'react';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
|
|
/* =========================================================
|
|
页面循环导航 —— 左右方向键切换大屏页面
|
|
顺序：数据大屏 → 数字孪生 → AI 助手 → 媒体轮播（循环）
|
|
管理后台不参与循环切换，仅在登录后进入
|
|
← 向左切换 · → 向右切换
|
|
========================================================= */
|
|
|
|
export const PAGE_ORDER = [
|
|
{ path: '/', label: '数据大屏' },
|
|
{ path: '/twin', label: '数字孪生' },
|
|
{ path: '/ai', label: 'AI 助手' },
|
|
{ path: '/screen', label: '媒体轮播' },
|
|
];
|
|
|
|
/**
|
|
* 左右方向键循环切换页面。
|
|
* 在任意页面使用；当前路径不在 PAGE_ORDER 中时不响应。
|
|
* 输入框/文本域内按键不触发页面切换（避免影响输入）。
|
|
*/
|
|
export function usePageNav() {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
useEffect(() => {
|
|
const onKey = (e) => {
|
|
const t = e.target;
|
|
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
|
|
const idx = PAGE_ORDER.findIndex((p) => p.path === location.pathname);
|
|
if (idx === -1) return;
|
|
const n = PAGE_ORDER.length;
|
|
if (e.key === 'ArrowRight') {
|
|
navigate(PAGE_ORDER[(idx + 1) % n].path);
|
|
} else if (e.key === 'ArrowLeft') {
|
|
navigate(PAGE_ORDER[(idx - 1 + n) % n].path);
|
|
}
|
|
};
|
|
window.addEventListener('keydown', onKey);
|
|
return () => window.removeEventListener('keydown', onKey);
|
|
}, [navigate, location.pathname]);
|
|
|
|
return null;
|
|
}
|
|
|
|
/** 获取当前页在循环中的位置（-1 表示不在循环中） */
|
|
export function usePageIndex() {
|
|
const location = useLocation();
|
|
return PAGE_ORDER.findIndex((p) => p.path === location.pathname);
|
|
}
|