From 47f6214056e6887e345bdb85f004f19cdfaa63a3 Mon Sep 17 00:00:00 2001
From: Drsakura <Drsakura@users.noreply.github.com>
Date: Thu, 10 Sep 2026 16:58:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=93=81=E7=89=8C=E6=A0=87=E8=AF=86?=
 =?UTF-8?q?=E7=94=A8=E4=BA=91+=E6=95=B0=E6=8D=AE=E5=BA=93=E7=9F=A2?=
 =?UTF-8?q?=E9=87=8F=E5=9B=BE=E6=A0=87=EF=BC=88favicon=20+=20=E9=A1=B5?=
 =?UTF-8?q?=E7=9C=89=E5=93=81=E7=89=8C=E6=A0=87=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Icons.jsx 新增 CloudDbIcon：照 icons8-云 重绘为矢量，左云随主题色、右圆柱用品牌蓝
- GlobalHeader 品牌区前置该图标，原「系统在线」绿点改为挂在其右下角
- index.html 增加 rel=icon / mask-icon 指向 public/favicon.svg
- luxury.css 补品牌样式，并让 :not() 选择器排除 .brand-mark 避免样式误伤
---
 frontend/index.html                      |  2 ++
 frontend/public/favicon.svg              | 11 +++++++++++
 frontend/src/components/GlobalHeader.jsx |  4 ++--
 frontend/src/components/Icons.jsx        | 17 +++++++++++++++++
 frontend/src/styles/luxury.css           |  7 ++++++-
 5 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 frontend/public/favicon.svg

diff --git a/frontend/index.html b/frontend/index.html
index 4b71cdf..77ac0bc 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,6 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>happy出口通</title>
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="mask-icon" href="/favicon.svg" color="#2aa7dc" />
   <script>
     try {
       const theme = localStorage.getItem('tms-theme') === 'light' ? 'light' : 'dark';
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
new file mode 100644
index 0000000..4bcec85
--- /dev/null
+++ b/frontend/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <!-- happy出口通 品牌标识：云 + 数据库圆柱（矢量绘制，非位图素材） -->
+  <g transform="translate(-0.1 5.8) scale(0.54)" stroke="#7c93a4" stroke-width="3.7">
+    <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/>
+  </g>
+  <g transform="translate(12 5.1) scale(0.54)" stroke="#2aa7dc" stroke-width="3.7">
+    <ellipse cx="12" cy="5.5" rx="8.5" ry="3.2"/>
+    <path d="M3.5 5.5V19.5A8.5 3.2 0 0 0 20.5 19.5V5.5"/>
+    <path d="M3.5 12.5A8.5 3.2 0 0 0 20.5 12.5"/>
+  </g>
+</svg>
diff --git a/frontend/src/components/GlobalHeader.jsx b/frontend/src/components/GlobalHeader.jsx
index 7364484..27ea351 100644
--- a/frontend/src/components/GlobalHeader.jsx
+++ b/frontend/src/components/GlobalHeader.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import axios from 'axios'
-import { BotIcon, ClockIcon, PlusCircleIcon, SearchIcon } from './Icons'
+import { BotIcon, ClockIcon, CloudDbIcon, PlusCircleIcon, SearchIcon } from './Icons'
 
 function GlobalHeader({ onOpenAssistant }) {
   const [now, setNow] = useState(new Date())
@@ -49,7 +49,7 @@ function GlobalHeader({ onOpenAssistant }) {
 
   return (
     <header className="global-header">
-      <div className="global-header-brand"><span className="header-status-dot" /><div><strong>happy出口通</strong><span>EXPORT OPERATIONS CONSOLE</span></div></div>
+      <div className="global-header-brand"><span className="brand-mark" title="happy出口通"><CloudDbIcon size={28} /><span className="header-status-dot" /></span><div><strong>happy出口通</strong><span>EXPORT OPERATIONS CONSOLE</span></div></div>
       <div className={`global-search ${searchOpen ? 'is-open' : ''}`}>
         <SearchIcon size={17} />
         <input ref={searchRef} aria-label="搜索 everything" value={query} onFocus={() => setSearchOpen(true)} onChange={event => setQuery(event.target.value)} placeholder="搜索 everything" autoComplete="off" />
diff --git a/frontend/src/components/Icons.jsx b/frontend/src/components/Icons.jsx
index 9051181..7997429 100644
--- a/frontend/src/components/Icons.jsx
+++ b/frontend/src/components/Icons.jsx
@@ -25,6 +25,23 @@ export const FactoryIcon = ({ size = 20, className = '' }) => (
   </svg>
 )
 
+/* 品牌标识：云 + 数据库圆柱（照 icons8-云 重绘为矢量）
+   左半边云跟随主题色，右半边圆柱固定品牌蓝；坐标用 24 网格，内部 0.48 缩放。 */
+export const CloudDbIcon = ({ size = 20, className = '' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
+    {/* 云：闭合圆头轮廓 */}
+    <g transform="translate(1 6) scale(0.48)" stroke="currentColor" strokeWidth="3.54">
+      <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
+    </g>
+    {/* 数据库圆柱：顶盖椭圆 + 桶身 + 中间分层线 */}
+    <g transform="translate(12.4 5.4) scale(0.48)" style={{ stroke: 'var(--primary)' }} strokeWidth="3.54">
+      <ellipse cx="12" cy="5.5" rx="8.5" ry="3.2" />
+      <path d="M3.5 5.5V19.5A8.5 3.2 0 0 0 20.5 19.5V5.5" />
+      <path d="M3.5 12.5A8.5 3.2 0 0 0 20.5 12.5" />
+    </g>
+  </svg>
+)
+
 export const DownloadIcon = ({ size = 20, className = '' }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
     <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
diff --git a/frontend/src/styles/luxury.css b/frontend/src/styles/luxury.css
index e0caf7d..bc8f8af 100644
--- a/frontend/src/styles/luxury.css
+++ b/frontend/src/styles/luxury.css
@@ -226,7 +226,7 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
 .global-header-brand { display: flex; align-items: center; gap: 10px; min-width: 238px; }
 .global-header-brand strong, .global-header-brand span { display: block; }
 .global-header-brand strong { font-size: 13px; letter-spacing: .02em; }
-.global-header-brand span:not(.header-status-dot) { color: var(--text-tertiary); font: 9px var(--font-mono); letter-spacing: .12em; margin-top: 3px; }
+.global-header-brand span:not(.header-status-dot):not(.brand-mark) { color: var(--text-tertiary); font: 9px var(--font-mono); letter-spacing: .12em; margin-top: 3px; }
 .header-status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
 .global-search { display: flex; align-items: center; gap: 9px; width: min(420px, 35vw); min-height: 38px; padding: 0 11px; color: var(--text-tertiary); background: var(--surface-deep); border: 1px solid var(--border-light); border-radius: 11px; transition: border-color 150ms, box-shadow 150ms; }
 .global-search:focus-within { border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--accent-glow); }
@@ -352,3 +352,8 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
 
 /* Preserve the dense industrial table's column hierarchy on smaller desktops. */
 .table-wrap table { min-width: 980px; }
+
+/* ---- 品牌标识：云 + 数据库（矢量重绘，随主题变色） ---- */
+.global-header-brand .brand-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--text-primary); }
+.global-header-brand .brand-mark svg { display: block; }
+.global-header-brand .brand-mark .header-status-dot { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--bg-primary), 0 0 10px var(--success); }