feat: refresh frontend visual design

frontend-web/src/components/site-shell.tsx

@@ -105,20 +105,47 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <div className="shell-grid">
+    <div className="shell-grid shell-grid-studio">
       <aside className="shell-sidebar">
-        <div className="brand-block">
+        <div className="brand-block brand-block-studio">
+          <div className="brand-visual" aria-hidden="true">
+            <span className="brand-orb brand-orb-primary" />
+            <span className="brand-orb brand-orb-secondary" />
+          </div>
           <span className="brand-kicker">AI VIDEO STUDIO</span>
           <h1>AIVideo</h1>
-          <p>把模型路由、素材管理和任务轮询收进一个暗色工作台，专门给创作流程用。</p>
+          <p>把模型路由、素材管理和任务轮询收进一个电影感工作台，让创作动作像调度镜头一样顺滑。</p>
+          <div className="brand-pill-row">
+            <span className="brand-pill">Source mode</span>
+            <span className="brand-pill">Mock providers</span>
+            <span className="brand-pill">Local assets</span>
+          </div>
           <div className="brand-status">
             <span className="status-dot" />
             创作链路在线
           </div>
         </div>
 
+        <div className="sidebar-note">
+          <div className="sidebar-note-label">Pipeline Focus</div>
+          <div className="sidebar-metrics">
+            <div className="sidebar-metric">
+              <strong>Prompt</strong>
+              <span>镜头、动作、光感</span>
+            </div>
+            <div className="sidebar-metric">
+              <strong>Assets</strong>
+              <span>图片、视频、音频参考</span>
+            </div>
+            <div className="sidebar-metric">
+              <strong>Tasks</strong>
+              <span>轮询、冻结、结果落盘</span>
+            </div>
+          </div>
+        </div>
+
         <nav className="sidebar-nav">
-          {navigation.map((item) => {
+          {navigation.map((item, index) => {
             const Icon = item.icon;
             return (
               <Link
@@ -133,6 +160,7 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
                   <span>{item.label}</span>
                   <small>{item.description}</small>
                 </div>
+                <div className="nav-index">{String(index + 1).padStart(2, "0")}</div>
               </Link>
             );
           })}
@@ -148,6 +176,16 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
             <div className="profile-name">{data.nickname || data.username}</div>
             <div className="profile-meta">{data.email}</div>
           </div>
+          <div className="profile-card-stats">
+            <div className="profile-stat">
+              <span>身份</span>
+              <strong>Creator</strong>
+            </div>
+            <div className="profile-stat">
+              <span>ID</span>
+              <strong>{(data.publicId || "AIVIDEO").slice(-8)}</strong>
+            </div>
+          </div>
           <button
             className="ghost-button"
             onClick={async () => {
@@ -163,7 +201,7 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
 
       <main className="shell-main">
         <header className="shell-header">
-          <div>
+          <div className="shell-header-content">
             <div className="header-kicker">Creative Ops Console</div>
             <h2>{title.label}</h2>
             <p className="shell-header-copy">{title.description}</p>
@@ -173,7 +211,8 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
               <Activity size={14} />
               会话正常
             </div>
-            <div className="header-chip">{data.publicId}</div>
+            <div className="header-chip">{data.publicId || "UNAVAILABLE"}</div>
+            <div className="header-chip">本地素材 / 本地存储 / mock 供应商</div>
           </div>
         </header>
         <section className="shell-content">{children}</section>