交互原型大版本

art-agent/frontend/src/components/sidebar/project-card.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import Link from "next/link";
+import { useApp } from "@/lib/app-context";
+
+/**
+ * 侧边栏项目信息卡（Phase 1）。
+ *
+ * 展示当前项目名、绑定的默认风格缩略图（占位），以及快捷入口：
+ * 风格库 / 角色库 / 项目设置。数据来自 placeholder-store 的占位数据。
+ */
+export function ProjectCard() {
+  const { activeProject, stylePacks } = useApp();
+
+  if (!activeProject) return null;
+
+  const defaultStyle = activeProject.defaultStyleId
+    ? stylePacks.find((s) => s.id === activeProject.defaultStyleId)
+    : stylePacks[0];
+
+  return (
+    <div className="mx-3 mb-2 rounded-xl placeholder-card p-3">
+      <div className="flex items-center justify-between mb-2">
+        <span className="typo-micro" style={{ textTransform: "none" }}>
+          当前项目
+        </span>
+        <span className="phase-chip">P1</span>
+      </div>
+
+      <div className="flex items-center gap-2.5 mb-2.5">
+        <div className="w-10 h-10 rounded-lg flex-shrink-0 flex items-center justify-center
+                        bg-gradient-to-br from-[var(--accent)]/15 to-[var(--accent-secondary)]/15
+                        border border-[var(--border-glow)]">
+          {defaultStyle ? (
+            <span className="text-[10px] text-[var(--accent)] font-semibold tracking-tight px-1 text-center">
+              {defaultStyle.name.slice(0, 2)}
+            </span>
+          ) : (
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.8">
+              <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-7l-2-2H5a2 2 0 00-2 2z" />
+            </svg>
+          )}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-sm text-[var(--text-primary)] font-medium truncate">
+            {activeProject.name}
+          </div>
+          <div className="text-[10px] text-[var(--text-secondary)] truncate">
+            {activeProject.type}
+            {defaultStyle && <> · {defaultStyle.name}</>}
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-1.5">
+        <Link
+          href="/styles"
+          className="flex flex-col items-center justify-center gap-1 py-1.5 rounded-md
+                     bg-[var(--bg-tertiary)]/60 text-[10px] text-[var(--text-secondary)]
+                     hover:text-[var(--accent)] hover:bg-[var(--accent)]/8
+                     cursor-pointer transition-colors"
+          title="风格库"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <circle cx="13.5" cy="6.5" r=".5" />
+            <circle cx="17.5" cy="10.5" r=".5" />
+            <circle cx="8.5" cy="7.5" r=".5" />
+            <circle cx="6.5" cy="12.5" r=".5" />
+            <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.55 0 1-.45 1-1v-3.5c0-.55.45-1 1-1h2c2.76 0 5-2.24 5-5 0-5.5-4.5-9.5-10-9.5z" />
+          </svg>
+          风格
+        </Link>
+        <Link
+          href="/characters"
+          className="flex flex-col items-center justify-center gap-1 py-1.5 rounded-md
+                     bg-[var(--bg-tertiary)]/60 text-[10px] text-[var(--text-secondary)]
+                     hover:text-[var(--accent)] hover:bg-[var(--accent)]/8
+                     cursor-pointer transition-colors"
+          title="角色库"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+            <circle cx="12" cy="7" r="4" />
+          </svg>
+          角色
+        </Link>
+        <Link
+          href="/settings"
+          className="flex flex-col items-center justify-center gap-1 py-1.5 rounded-md
+                     bg-[var(--bg-tertiary)]/60 text-[10px] text-[var(--text-secondary)]
+                     hover:text-[var(--accent)] hover:bg-[var(--accent)]/8
+                     cursor-pointer transition-colors"
+          title="项目设置"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <circle cx="12" cy="12" r="3" />
+            <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" />
+          </svg>
+          设置
+        </Link>
+      </div>
+    </div>
+  );
+}

art-agent/frontend/src/components/sidebar/sidebar.tsx

@@ -3,6 +3,7 @@
 import { useApp } from "@/lib/app-context";
 import { TagFilter } from "./tag-filter";
 import { SessionList } from "./session-list";
+import { ProjectCard } from "./project-card";
 
 export function Sidebar() {
   const { sidebarCollapsed, setSidebarCollapsed } = useApp();
@@ -53,6 +54,7 @@ export function Sidebar() {
 
         <TagFilter />
         <SessionList />
+        <ProjectCard />
       </aside>
     </>
   );