基线:鉴权会话+工作组+工作台三区修复+编排工作区+产品设计文档

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m

apps/web/src/shared/desk/module-kit.tsx

@@ -137,11 +137,26 @@ export function SidebarHead({ icon, title, sub }: { icon: string; title: string;
   );
 }
 
-export function ListEmpty({ icon, children }: { icon: string; children: ReactNode }) {
+/**
+ * 列表区空态 —— 侧栏窄,用紧凑版:软色圆里一枚图标 + 主句 + 一小段说明。
+ * 与主面板的 `EmptyState`(整屏光环)同一语气,尺寸各归其位。
+ */
+export function ListEmpty({
+  icon,
+  title,
+  children,
+}: {
+  icon: string;
+  title?: string;
+  children: ReactNode;
+}) {
   return (
-    <div className="jc-list-empty">
-      <Ico name={icon} s={22} />
-      <span>{children}</span>
+    <div className="jc-side-empty">
+      <span className="jc-side-empty-ico">
+        <Ico name={icon} s={18} />
+      </span>
+      {title !== undefined && <b>{title}</b>}
+      <p>{children}</p>
     </div>
   );
 }
@@ -169,3 +184,43 @@ export function NoteBand({ children }: { children: ReactNode }) {
     </div>
   );
 }
+
+/**
+ * 空态整屏 —— 层叠光环 + 图标 + 主副文 + 提示囊(自原型 `EmptyState` 平移)。
+ *
+ * **空态是产品的常态,不是缺陷**:文案一律从用人的角度写「你手上现在没有什么」,
+ * 而不是从开发角度写「这块还没做」—— 后者是给自己看的,前者才是用户要的那句话。
+ */
+export function EmptyState({
+  ico,
+  tone,
+  title,
+  desc,
+  hint,
+}: {
+  ico: string;
+  tone: 'ok' | 'brand';
+  title: string;
+  desc: string;
+  hint?: string | undefined;
+}) {
+  return (
+    <div className={'jc-empty t-' + tone}>
+      <span className="jc-empty-art">
+        <i className="r1" />
+        <i className="r2" />
+        <span className="jc-empty-ico">
+          <Ico name={ico} s={26} />
+        </span>
+      </span>
+      <b>{title}</b>
+      <p>{desc}</p>
+      {hint !== undefined && (
+        <span className="jc-empty-hint">
+          <Ico name="sparkles" s={12} />
+          {hint}
+        </span>
+      )}
+    </div>
+  );
+}