Add assistant creation flows with prompt and workflow modes.

Build the prompt-mode creation form, add a workflow page, and reorganize sidebar navigation into assistant sub-routes.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/layout/Sidebar.tsx

@@ -5,6 +5,7 @@ import {
   Boxes,
   ChevronLeft,
   Clock3,
+  FileText,
   Home,
   PlayCircle,
   User,
@@ -13,20 +14,6 @@ import {
 } from "lucide-react";
 import type { NavKey } from "./AppShell";
 
-const navItems: Array<{
-  key: NavKey;
-  label: string;
-  icon: React.ComponentType<{ size?: number }>;
-}> = [
-  { key: "home", label: "控制台", icon: Home },
-  { key: "assistants", label: "创建助手", icon: Bot },
-  { key: "components", label: "组件库", icon: Boxes },
-  { key: "history", label: "历史记录", icon: Clock3 },
-  { key: "test", label: "测试助手", icon: PlayCircle },
-  { key: "workflow", label: "工作流", icon: Workflow },
-  { key: "profile", label: "个人中心", icon: User },
-];
-
 type SidebarProps = {
   active: NavKey;
   collapsed: boolean;
@@ -34,12 +21,37 @@ type SidebarProps = {
   onToggle: () => void;
 };
 
+const mainItems: Array<{
+  key: NavKey;
+  label: string;
+  icon: React.ComponentType<{ size?: number }>;
+}> = [
+  { key: "home", label: "控制台", icon: Home },
+  { key: "components", label: "组件库", icon: Boxes },
+  { key: "history", label: "历史记录", icon: Clock3 },
+  { key: "test", label: "测试助手", icon: PlayCircle },
+  { key: "workflow", label: "工作流", icon: Workflow },
+  { key: "profile", label: "个人中心", icon: User },
+];
+
+const assistantSubItems: Array<{
+  key: NavKey;
+  label: string;
+  icon: React.ComponentType<{ size?: number }>;
+}> = [
+  { key: "assistant-prompt", label: "提示词模式", icon: FileText },
+  { key: "assistant-workflow", label: "工作流模式", icon: Workflow },
+];
+
 export function Sidebar({
   active,
   collapsed,
   onNavigate,
   onToggle,
 }: SidebarProps) {
+  const assistantActive =
+    active === "assistant-prompt" || active === "assistant-workflow";
+
   return (
     <aside
       className={[
@@ -60,28 +72,58 @@ export function Sidebar({
         )}
       </div>
 
-      <nav className="flex-1 space-y-1 px-3 py-4">
-        {navItems.map((item) => {
-          const Icon = item.icon;
-          const isActive = active === item.key;
+      <nav className="flex-1 space-y-2 px-3 py-4">
+        <NavButton
+          active={active === "home"}
+          collapsed={collapsed}
+          icon={Home}
+          label="控制台"
+          onClick={() => onNavigate("home")}
+        />
 
-          return (
-            <button
-              key={item.key}
-              onClick={() => onNavigate(item.key)}
-              className={[
-                "flex h-11 w-full items-center gap-3 rounded-xl px-3 text-sm transition",
-                isActive
-                  ? "bg-blue-500/15 text-blue-400"
-                  : "text-[#9aa6bd] hover:bg-white/5 hover:text-white",
-                collapsed ? "justify-center" : "",
-              ].join(" ")}
-            >
-              <Icon size={18} />
-              {!collapsed && <span>{item.label}</span>}
-            </button>
-          );
-        })}
+        <div>
+          <div
+            className={[
+              "flex h-11 w-full items-center gap-3 rounded-xl px-3 text-sm",
+              assistantActive
+                ? "bg-blue-500/10 text-blue-300"
+                : "text-[#9aa6bd]",
+              collapsed ? "justify-center" : "",
+            ].join(" ")}
+          >
+            <Bot size={18} />
+            {!collapsed && <span>创建助手</span>}
+          </div>
+
+          <div
+            className={[
+              "mt-1 space-y-1",
+              collapsed ? "pl-0" : "pl-6",
+            ].join(" ")}
+          >
+            {assistantSubItems.map((item) => (
+              <SubNavButton
+                key={item.key}
+                active={active === item.key}
+                collapsed={collapsed}
+                icon={item.icon}
+                label={item.label}
+                onClick={() => onNavigate(item.key)}
+              />
+            ))}
+          </div>
+        </div>
+
+        {mainItems.slice(1).map((item) => (
+          <NavButton
+            key={item.key}
+            active={active === item.key}
+            collapsed={collapsed}
+            icon={item.icon}
+            label={item.label}
+            onClick={() => onNavigate(item.key)}
+          />
+        ))}
       </nav>
 
       <div className="border-t border-[#161d2c] p-3">
@@ -97,4 +139,66 @@ export function Sidebar({
       </div>
     </aside>
   );
+}
+
+function NavButton({
+  active,
+  collapsed,
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  collapsed: boolean;
+  icon: React.ComponentType<{ size?: number }>;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      title={collapsed ? label : undefined}
+      className={[
+        "flex h-11 w-full items-center gap-3 rounded-xl px-3 text-sm transition",
+        active
+          ? "bg-blue-500/15 text-blue-400"
+          : "text-[#9aa6bd] hover:bg-white/5 hover:text-white",
+        collapsed ? "justify-center" : "",
+      ].join(" ")}
+    >
+      <Icon size={18} />
+      {!collapsed && <span>{label}</span>}
+    </button>
+  );
+}
+
+function SubNavButton({
+  active,
+  collapsed,
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  collapsed: boolean;
+  icon: React.ComponentType<{ size?: number }>;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      title={collapsed ? label : undefined}
+      className={[
+        "flex h-10 w-full items-center gap-3 rounded-xl px-3 text-sm transition",
+        active
+          ? "bg-blue-500/15 text-blue-400"
+          : "text-[#7f8aa3] hover:bg-white/5 hover:text-white",
+        collapsed ? "justify-center" : "",
+      ].join(" ")}
+    >
+      <Icon size={16} />
+      {!collapsed && <span>{label}</span>}
+    </button>
+  );
 }