feat: 新增 AI 智能助手对话页面（/ai）
- 布局沿用数字孪生页接口：左侧 AI 对话区 + 右侧企业分布面板 - 新增共享 ParkSidePanel 组件（分区/企业名录/详情/实时动态）， 数字孪生与 AI 助手页右侧完全一致 - 新增 AiChatPanel 对话组件：欢迎语 + 消息流 + 快捷提问 + 输入发送， 内置园区知识库模拟回复（入驻/政策/场地/AI 赋能/分区/企业/融资/就业/导师） - 路由与导航循环加入 /ai（数据大屏 → 数字孪生 → AI 助手 → 媒体轮播） - usePageNav 忽略输入框/文本域按键，避免输入方向键误切页面 - 新增 send/eraser/headset/circle-dot 图标，全部遵守 bd- 浅色科技 UI 规范
This commit is contained in:
Pine
@@ -0,0 +1,185 @@
|
||||
import { useState, useRef, useEffect, useCallback } from 'react';
|
||||
import Icon from './Icons';
|
||||
|
||||
/* =========================================================
|
||||
AI 智能助手对话面板（共享）—— 遵循 bd- 浅色科技 UI 规范
|
||||
左侧对话区：消息流 + 快捷提问 + 输入发送（模拟园区知识库回复）
|
||||
========================================================= */
|
||||
|
||||
/* ---------- 快捷提问 ---------- */
|
||||
const QUICK_QUESTIONS = [
|
||||
'如何申请入驻园区？',
|
||||
'园区有哪些政策扶持？',
|
||||
'办公场地怎么收费？',
|
||||
'AI 赋能服务有哪些？',
|
||||
'三个分区有什么区别？',
|
||||
];
|
||||
|
||||
/* ---------- 园区知识库（模拟回复） ---------- */
|
||||
const WELCOME = '您好，我是 OPC 园区 AI 智能助手。\n\n我可以为您解答入驻流程、政策扶持、场地服务、AI 赋能、企业名录等问题。您也可以点击下方快捷提问，或直接输入问题。';
|
||||
|
||||
const RULES = [
|
||||
{
|
||||
match: /入驻|申请|入孵|入园|如何加入|怎样加入/,
|
||||
reply: '入驻流程如下：\n\n1. 提交入驻申请（线上表单或到园区服务中心现场办理）\n2. 项目评审（园区组织专家对项目可行性、团队背景进行评估）\n3. 签订入驻协议，办理入驻手续\n4. 安排办公场地，对接创业导师与孵化服务\n\n目前园区在园项目 158 家，累计孵化企业 208 余家。如需协助，可直接联系园区服务中心。',
|
||||
},
|
||||
{
|
||||
match: /政策|补贴|优惠|扶持|减免|奖励|资助/,
|
||||
reply: '园区政策服务覆盖「七位一体」中的政策维度：\n\n· 场地租金减免：符合条件的大学生创业项目可享受场地优惠\n· 创业补贴：协助对接省、市两级创业补贴与一次性创业资助\n· 税费优惠：对接小微企业所得税减免、增值税优惠等政策\n· 项目申报：指导高企认定（目前在园高新技术企业 32 家）、科技型中小企业备案\n\n更多政策细节可咨询园区政策服务窗口。',
|
||||
},
|
||||
{
|
||||
match: /场地|办公室|工位|租金|收费|面积|多少钱|价格/,
|
||||
reply: '园区总建筑面积 1.2 万㎡，按功能划分为三个区域：\n\n· 加速区（A1–A12）：成长型项目办公室，共 11 间独立办公室 + 1 间园区管理办公室\n· 国际区（I1–I7）：面向国际合作的办公空间（7 间）\n· 成长区（G1–G8）：初创团队成长空间（8 间）\n\n租金按创业项目阶段与政策给予差异化优惠，具体可到园区服务中心咨询，或询问「入驻流程」。',
|
||||
},
|
||||
{
|
||||
match: /AI|模型|算力|tokens|token|工具|智能|赋能|大模型/,
|
||||
reply: '园区 AI 赋能服务是「七位一体」的核心特色：\n\n· 大模型推理：接入 DeepSeek-V3、通义千问、智谱 GLM-4、豆包、讯飞星火等多模型\n· 工具调用：文档生成、数据查询、图像创作、代码执行、语音合成等智能工具\n· 算力与成本：实时提供 token 消耗统计与速率监控，帮助企业控制 AI 使用成本\n\n今日园区 AI 推理任务持续运行，多模型负载均衡调度，服务节点 12/12 在线。',
|
||||
},
|
||||
{
|
||||
match: /加速区|国际区|成长区|分区|区域|区别|布局/,
|
||||
reply: '园区按企业成长阶段划分三个区域：\n\n· 加速区（蓝色）：面向已具备产品与市场验证的成长型项目，提供独立办公室（A1–A12），目前在驻 9 家企业\n· 国际区（青色）：面向国际合作与跨境业务项目（I1–I7），在驻 7 家\n· 成长区（绿色）：面向初创团队的共享成长空间（G1–G8），在驻 8 家\n\n园区管理办公室位于加速区 M 房间，提供一站式服务。',
|
||||
},
|
||||
{
|
||||
match: /企业|公司|名录|名单|入驻企业|有哪些企业|查.*企业/,
|
||||
reply: '园区目前有 39 家入驻企业，分布在三个区域：\n\n· 加速区：云南派音人工智能科技、米勒克尔蓝宝石珠宝、云南宸中低空经济等 9 家\n· 国际区：仰光客厅、中越生物医疗、酷享野农AI农业等 7 家\n· 成长区：Facebook越南跨境电商、昆明云韵体育、云南星瑞航空等 8 家\n\n您也可以直接查看右侧「企业分布」面板，按分区浏览企业名录与房间号。',
|
||||
},
|
||||
{
|
||||
match: /融资|投资|资金|贷款|估值|资本/,
|
||||
reply: '园区融资服务包含：\n\n· 融资对接：定期组织路演与投资机构对接活动\n· 孵化估值：累计孵化企业估值约 5.2 亿元\n· 金融支持：协助对接银行创业贷款、政府创业担保贷款\n· 财务辅导：提供融资方案设计与商业计划书辅导\n\n有融资需求的企业可向园区服务中心提交商业计划书。',
|
||||
},
|
||||
{
|
||||
match: /就业|招聘|岗位|人才|用工/,
|
||||
reply: '园区累计带动就业 2,186 人（其中高校毕业生 1,680 人，实习岗位 506 个）。\n\n· 企业招聘：在驻企业持续发布岗位（今日新增多个岗位）\n· 人才对接：与在昆高校共建实习实训基地\n· 创业带动：园区鼓励以创业带动就业，多个项目已形成稳定用工\n\n具体招聘岗位可关注园区实时动态与入驻企业名录。',
|
||||
},
|
||||
{
|
||||
match: /导师|培训|课程|辅导|孵化服务|孵化器/,
|
||||
reply: '园区配备创业导师 58 位，提供全周期孵化服务：\n\n· 一对一辅导：创业导师定期坐诊，覆盖商业模式、法律财税、市场营销\n· 培训课程：创业训练营、行业专题沙龙、政策解读会\n· 资源对接：技术、供应链、渠道等产业资源链接\n· 公共服务：工商注册、知识产权、法律咨询一站式代办',
|
||||
},
|
||||
{
|
||||
match: /你好|您好|hi|hello|嗨|在吗|hello/,
|
||||
reply: '您好！我是 OPC 园区 AI 智能助手。\n\n可以问我：入驻流程、政策扶持、场地收费、AI 赋能、企业名录、融资服务等问题，很高兴为您服务。',
|
||||
},
|
||||
{
|
||||
match: /谢谢|感谢|好的|明白|ok/,
|
||||
reply: '不客气，随时为您服务。您也可以点击右侧「企业分布」查看入驻企业，或继续向我提问。',
|
||||
},
|
||||
];
|
||||
|
||||
const DEFAULT_REPLY = '园区提供「空间 + 孵化 + 融资 + 政策 + 资源 + AI 赋能 + 综合服务」七位一体服务，在园项目 158 家，累计带动就业 2,186 人，累计营收 2.08 亿元。\n\n您可以这样问我：\n· 如何申请入驻园区？\n· 园区有哪些政策扶持？\n· AI 赋能服务有哪些？';
|
||||
|
||||
function getReply(input) {
|
||||
const text = String(input || '').trim();
|
||||
for (const rule of RULES) {
|
||||
if (rule.match.test(text)) return rule.reply;
|
||||
}
|
||||
return DEFAULT_REPLY;
|
||||
}
|
||||
|
||||
/* ---------- 消息 ---------- */
|
||||
let msgId = 0;
|
||||
const nextId = () => ++msgId;
|
||||
|
||||
export default function AiChatPanel() {
|
||||
const [msgs, setMsgs] = useState(() => [
|
||||
{ id: nextId(), role: 'ai', text: WELCOME },
|
||||
]);
|
||||
const [input, setInput] = useState('');
|
||||
const [typing, setTyping] = useState(false);
|
||||
const scrollRef = useRef(null);
|
||||
const timerRef = useRef(null);
|
||||
|
||||
// 新消息自动滚动到底部
|
||||
useEffect(() => {
|
||||
const el = scrollRef.current;
|
||||
if (el) el.scrollTop = el.scrollHeight;
|
||||
}, [msgs, typing]);
|
||||
|
||||
useEffect(() => () => clearTimeout(timerRef.current), []);
|
||||
|
||||
const send = useCallback((raw) => {
|
||||
const text = String(raw || '').trim();
|
||||
if (!text || typing) return;
|
||||
setInput('');
|
||||
setMsgs((prev) => [...prev, { id: nextId(), role: 'me', text }]);
|
||||
setTyping(true);
|
||||
const reply = getReply(text);
|
||||
timerRef.current = setTimeout(() => {
|
||||
setMsgs((prev) => [...prev, { id: nextId(), role: 'ai', text: reply }]);
|
||||
setTyping(false);
|
||||
}, 700 + Math.random() * 600);
|
||||
}, [typing]);
|
||||
|
||||
const clear = useCallback(() => {
|
||||
clearTimeout(timerRef.current);
|
||||
setTyping(false);
|
||||
setMsgs([{ id: nextId(), role: 'ai', text: WELCOME }]);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="bd-chat">
|
||||
{/* 头部 */}
|
||||
<div className="bd-chat-head">
|
||||
<span className="bd-chat-logo"><Icon name="robot" size={17} /></span>
|
||||
<div className="bd-chat-titles">
|
||||
<b>AI 智能助手</b>
|
||||
<span>OPC 园区知识库 · 随时为您解答</span>
|
||||
</div>
|
||||
<span className="bd-chat-model"><i />DeepSeek-V3</span>
|
||||
<button className="bd-chat-clear" title="清空对话" onClick={clear}>
|
||||
<Icon name="eraser" size={15} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 消息区 */}
|
||||
<div className="bd-chat-msgs" ref={scrollRef}>
|
||||
{msgs.map((m) => (
|
||||
<div className={`bd-msg ${m.role}`} key={m.id}>
|
||||
{m.role === 'ai' && (
|
||||
<span className="bd-msg-avatar"><Icon name="robot" size={13} /></span>
|
||||
)}
|
||||
<div className="bd-msg-bubble">{m.text}</div>
|
||||
</div>
|
||||
))}
|
||||
{typing && (
|
||||
<div className="bd-msg ai">
|
||||
<span className="bd-msg-avatar"><Icon name="robot" size={13} /></span>
|
||||
<div className="bd-msg-bubble bd-typing"><i /><i /><i /></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 快捷提问 */}
|
||||
<div className="bd-chat-quick">
|
||||
{QUICK_QUESTIONS.map((q) => (
|
||||
<button key={q} onClick={() => send(q)}>
|
||||
<Icon name="sparkles" size={12} />
|
||||
{q}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 输入区 */}
|
||||
<div className="bd-chat-input">
|
||||
<input
|
||||
value={input}
|
||||
placeholder="输入你的问题，如：如何申请入驻园区？"
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
|
||||
e.preventDefault();
|
||||
send(input);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="bd-chat-send"
|
||||
disabled={!input.trim() || typing}
|
||||
onClick={() => send(input)}
|
||||
title="发送"
|
||||
>
|
||||
<Icon name="send" size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user