统一 Airshelf 界面组件与图标

电商AI平台/assets/shell.js

@@ -1,5 +1,5 @@
 /* ============================================================
-   流·Studio · Shell renderer V2.1
+   Airshelf · Shell renderer V2.1
    渲染 sidebar / topbar / 网格背景装饰 / Toast / Modal helpers
    每个页面调用 Shell.render({ active, crumbs, balance, topActions })
 
@@ -7,38 +7,40 @@
    - sidebar 搜索 ⌘K → "Ctrl K" Inter Bold 平铺(无 kbd 边框)
    ============================================================ */
 
+const ShellIcon = (name, opts) => window.IconKit ? window.IconKit.svg(name, opts) : '';
+
 const NAV = [
   {
     id: 'dashboard', label: '工作台', href: 'index.html',
-    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12 12 3l9 9"/><path d="M5 10v10h14V10"/></svg>'
+    icon: ShellIcon('home')
   },
   {
     id: 'products', label: '商品库', href: 'products.html', badge: '7',
-    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m3 7 9-4 9 4-9 4-9-4z"/><path d="m3 12 9 4 9-4M3 17l9 4 9-4"/></svg>'
+    icon: ShellIcon('package')
   },
   {
     id: 'projects', label: '视频项目', href: 'projects.html', badge: '8',
-    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="16"/><path d="M7 4v16M16 4v16M3 9h18M3 15h18"/></svg>'
+    icon: ShellIcon('clapperboard')
   },
   {
     id: 'asset-factory', label: '图片生成', href: 'asset-factory.html',
-    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.7 4.6L18 9l-4.3 1.4L12 15l-1.7-4.6L6 9l4.3-1.4L12 3z"/><path d="M19 16l.85 2.3L22 19l-2.15.7L19 22l-.85-2.3L16 19l2.15-.7L19 16z"/></svg>'
+    icon: ShellIcon('sparkles')
   },
   {
     id: 'library', label: '资产库', href: 'library.html',
-    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="6" height="16"/><rect x="11" y="4" width="4" height="16"/><rect x="17" y="6" width="4" height="14"/></svg>'
+    icon: ShellIcon('images')
   },
   {
     id: 'team', label: '团队', href: 'team.html',
-    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 19c0-3 2.7-5 6-5s6 2 6 5M14 19c.5-2.4 2.4-4 5-4 .8 0 1.5.2 2 .5"/></svg>'
+    icon: ShellIcon('users')
   },
   {
     id: 'account', label: '消费', href: 'account.html',
-    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M16 14h2"/></svg>'
+    icon: ShellIcon('creditCard')
   },
   {
     id: 'settings', label: '设置', href: 'settings.html',
-    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8 2 2 0 0 1-2.8 2.8 1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5 2 2 0 0 1-4 0 1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3 2 2 0 0 1-2.8-2.8 1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1 2 2 0 0 1 0-4 1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8 2 2 0 0 1 2.8-2.8 1.7 1.7 0 0 0 1.8.3 1.7 1.7 0 0 0 1-1.5 2 2 0 0 1 4 0 1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3 2 2 0 0 1 2.8 2.8 1.7 1.7 0 0 0-.3 1.8 1.7 1.7 0 0 0 1.5 1 2 2 0 0 1 0 4 1.7 1.7 0 0 0-1.5 1.1Z"/></svg>'
+    icon: ShellIcon('settings')
   }
 ];
 
@@ -55,11 +57,11 @@ window.Shell = {
     const sidebar = `
       <aside class="sidebar">
         <div class="brand">
-          <div class="flame"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2c1 3 4 5 4 9a4 4 0 0 1-4 4 4 4 0 0 1-4-4 5 5 0 0 1 1.5-3.5C10.5 6 11.5 4 12 2zm-1 13c0 2 1 3 1 5 1-1 3-2 3-5 0-1.5-1-2-2-3-1 1-2 2-2 3z"/></svg></div>
-          <div><div class="name">流·Studio</div></div>
+          <div class="brand-mark">${ShellIcon('airshelf', { size: 22 })}</div>
+          <div><div class="name">Airshelf</div></div>
         </div>
         <div class="search-box" onclick="document.getElementById('global-search').focus()">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+          ${ShellIcon('search')}
           <input id="global-search" placeholder="搜索"/>
           <span class="kbd">Ctrl K</span>
         </div>
@@ -90,16 +92,16 @@ window.Shell = {
         ${crumbHtml}
         <div class="right">
           <span class="balance-chip" onclick="location.href='account.html'">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9 10h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/></svg>
+            ${ShellIcon('creditCard')}
             余额 <strong>${balance}</strong>
           </span>
           <button class="queue-chip" onclick="Shell.toast('任务队列', '3 个进行中')" hidden>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
+            ${ShellIcon('list')}
             任务队列
             <span class="count">3</span>
           </button>
           <button class="icon-btn" onclick="location.href='messages.html'" title="消息中心">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 0 0 4 0"/></svg>
+            ${ShellIcon('bell')}
             <span class="count-noti">12</span>
           </button>
           <div class="topbar-avatar" onclick="Shell.toast('账户菜单', '李 · li@shop.com')" title="账户">
@@ -120,7 +122,7 @@ window.Shell = {
 
     const toastHtml = `
       <div class="toast" id="__toast">
-        <div class="ic-t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
+        <div class="ic-t">${ShellIcon('check')}</div>
         <div class="txt" id="__toast-txt">操作成功<span class="mono">[ 200 OK ]</span></div>
       </div>
     `;
@@ -129,7 +131,7 @@ window.Shell = {
     const lightboxHtml = `
       <div class="np-lightbox" id="np-lightbox" onclick="Shell._closeLightbox()">
         <button class="lb-x" type="button" onclick="event.stopPropagation();Shell._closeLightbox()">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+          ${ShellIcon('x')}
         </button>
         <img id="np-lightbox-img" alt="">
         <span class="lb-name" id="np-lightbox-name"></span>