fix-frontend-3-items-complete

frontend/src/components/layout/FrontLayout.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Outlet, NavLink, useNavigate } from 'react-router-dom';
 import { useAuth } from '@/contexts/AuthContext';
+import { useBalance } from '@/hooks/useBalance';
 import './FrontLayout.css';
 
 const navGroups = [
@@ -100,10 +101,14 @@ const FrontLayout: React.FC = () => {
         <nav className="sidebar-nav">
           {!collapsed && balance !== null && (
             <div className="nav-item balance-item">
-              <span className="nav-icon">&#36;</span>
-              <span className="nav-label">余额: &#36; {balance.toFixed(2)}</span>
+              <span className="nav-icon">$</span>
+              <span className="nav-label">余额: $ {balance.toFixed(2)}</span>
             </div>
           )}
+                    <NavLink to="/agent-canvas" className={({ isActive }) => `nav-item ${isActive ? "active" : ""}`} title="Agent 编排">
+            <span className="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4m10-10h-4M6 12H2"/><path d="m4.93 4.93 2.83 2.83m8.48 8.48 2.83 2.83M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83"/></svg></span>
+            {!collapsed && <span className="nav-label">Agent 编排</span>}
+          </NavLink>
           <NavLink to="/" className={({ isActive }) => `nav-item nav-home-link`} end>
             <span className="nav-item-icon">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>