feat(ui): 增加关于弹窗（PineSound 品牌）

- AboutDialog：品牌 Logo/产品名/版本/技术栈/版权，Esc 或点击遮罩关闭
- PageHeader 右上角新增「ⓘ 关于 PineSound」入口（info 图标）
- 样式：about-* 系列（毛玻璃遮罩 + 渐变品牌块），跟随 DPM 配色

src/components/PageHeader.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import Icon from './Icons';
 import MediaHeaderControls from './MediaHeaderControls';
+import AboutDialog from './AboutDialog';
 import { PAGE_ORDER, usePageIndex } from '../utils/pageNav';
 import { Avatar, AvatarImage, AvatarFallback } from '@appica/ui-react/avatar'
 
@@ -21,6 +22,7 @@ export default function PageHeader() {
   const navigate = useNavigate();
   const location = useLocation();
   const [now, setNow] = useState(new Date());
+  const [aboutOpen, setAboutOpen] = useState(false);
   const pageIdx = usePageIndex();
 
   useEffect(() => {
@@ -74,11 +76,23 @@ export default function PageHeader() {
           <span className="bd-live-dot" />
           {status}
         </div>
+        <button
+          className="bd-about-btn"
+          type="button"
+          title="关于 PineSound"
+          aria-label="关于 PineSound"
+          onClick={() => setAboutOpen(true)}
+        >
+          <Icon name="info" size={14} />
+        </button>
         <div className="bd-clock">
           <div className="bd-clock-time">{timeStr}</div>
           <div className="bd-clock-date">{dateStr} 周{week}</div>
         </div>
       </div>
+
+      {/* 关于 PineSound */}
+      <AboutDialog open={aboutOpen} onClose={() => setAboutOpen(false)} />
     </header>
   );
 }