feat: 图标系统与共享组件

- Icons.jsx：Appica SVG 图标统一封装（零 emoji，名称映射） - PageHeader.jsx：两页共享页眉（标题/副标题/时钟/导航） - CompanySearch.jsx：入驻企业 Autocomplete 搜索（Appica）
2026-08-17 18:37:21 +08:00
parent 0d20e1413f
commit cffc1e7a29
3 changed files with 260 additions and 0 deletions
@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Icon from './Icons';
+
+/* =========================================================
+   共享页眉 —— 两个大屏页面（数据大屏 / 数字孪生）统一风格
+   仅通过 props 区分：导航目标、状态文案
+   ========================================================= */
+
+export default function PageHeader({ nav, status = '数据实时' }) {
+  const navigate = useNavigate();
+  const [now, setNow] = useState(new Date());
+
+  useEffect(() => {
+    const iv = setInterval(() => setNow(new Date()), 1000);
+    return () => clearInterval(iv);
+  }, []);
+
+  const dateStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+  const week = ['日', '一', '二', '三', '四', '五', '六'][now.getDay()];
+  const timeStr = now.toLocaleTimeString('zh-CN', { hour12: false });
+
+  return (
+    <header className="bd-header">
+      <div className="bd-header-left">
+        <span className="bd-logo">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round">
+            <path d="M3 21V9l6-5 6 5v12" />
+            <path d="M9 21v-6h6v6" />
+            <path d="M15 9.5V21" />
+          </svg>
+        </span>
+        <div className="bd-header-titles">
+          <h1 className="bd-header-title">昆明市大学生创业园 <span className="bd-header-title-accent">· OPC 智能园区数字运营中心</span></h1>
+          <div className="bd-header-sub">云南省首家政府主办大学生创业孵化园区 · 空间+孵化+融资+政策+资源+AI赋能+综合服务 七位一体</div>
+        </div>
+      </div>
+      <div className="bd-header-right">
+        {nav && (
+          <button
+            className="bd-nav-hint"
+            onClick={() => navigate(nav.to)}
+            title={nav.title}
+          >
+            <Icon name={nav.icon || 'chevron-right'} size={14} />
+            {nav.label}
+          </button>
+        )}
+        <div className="bd-live">
+          <span className="bd-live-dot" />
+          {status}
+        </div>
+        <div className="bd-clock">
+          <div className="bd-clock-time">{timeStr}</div>
+          <div className="bd-clock-date">{dateStr} 周{week}</div>
+        </div>
+      </div>
+    </header>
+  );
+}