@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopLibraryAuthorizationDialog/index.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { Dialog } from "../../../composite/Dialog"
+import { CheckCircle, Lock, Shield } from "../../../composite/Icons"
+import { OrbitworkMark } from "../../../composite/OrbitworkLogo"
+import { Button } from "../../../primitives"
+
+export type DesktopLibraryAuthorizationScope = {
+  title: string
+  description?: string
+  owner?: string
+  required?: boolean
+}
+
+export interface DesktopLibraryAuthorizationDialogProps {
+  open: boolean
+  appName?: string
+  appIcon?: string | null
+  appDescription?: string
+  scopes?: DesktopLibraryAuthorizationScope[]
+  loading?: boolean
+  submitting?: "approve" | "deny" | null
+  error?: string | null
+  authorizationUrl?: string | null
+  onApprove: () => void
+  onDeny: () => void
+  onClose: () => void
+}
+
+/** In-app consent surface for the first-party library session. */
+export function DesktopLibraryAuthorizationDialog({
+  open,
+  appName = "资料库",
+  appIcon = null,
+  appDescription = "资料库将使用你的 Orbitwork 账号访问内容。",
+  scopes = [],
+  loading = false,
+  submitting = null,
+  error = null,
+  authorizationUrl = null,
+  onApprove,
+  onDeny,
+  onClose,
+}: DesktopLibraryAuthorizationDialogProps): React.ReactElement {
+  const webviewHostRef = useRef<HTMLDivElement>(null)
+  const [appIconFailed, setAppIconFailed] = useState(false)
+  const appIconSource = appIcon?.trim() && !appIconFailed ? appIcon.trim() : null
+
+  useEffect(() => {
+    setAppIconFailed(false)
+  }, [appIcon])
+
+  useEffect(() => {
+    const host = webviewHostRef.current
+    if (!host || !authorizationUrl) return
+    host.replaceChildren()
+    const webview = document.createElement("webview")
+    webview.setAttribute("partition", "persist:library-authorization")
+    webview.setAttribute("webpreferences", "contextIsolation=yes, nodeIntegration=no, sandbox=yes")
+    webview.setAttribute("src", authorizationUrl)
+    host.appendChild(webview)
+    return () => {
+      webview.remove()
+    }
+  }, [authorizationUrl])
+
+  return (
+    <Dialog
+      open={open}
+      title="授权访问"
+      subtitle={`${appName} · Orbitwork 安全授权`}
+      className="desktop-library-authorization-dialog"
+      width={520}
+      padded={false}
+      onClose={submitting === "deny" ? undefined : onClose}
+      closable={submitting !== "deny"}
+    >
+      <div className="desktop-library-consent" aria-busy={loading || submitting !== null}>
+        <div className="desktop-library-consent__flow" aria-hidden="true">
+          <span className="desktop-library-consent__mark desktop-library-consent__mark--orbitwork">
+            <OrbitworkMark size={40} />
+          </span>
+          <span className="desktop-library-consent__arrow">→</span>
+          <span
+            className={`desktop-library-consent__mark desktop-library-consent__mark--accent${appIconSource ? " desktop-library-consent__mark--image" : ""}`}
+          >
+            {appIconSource ? (
+              <img src={appIconSource} alt="" onError={() => setAppIconFailed(true)} />
+            ) : (
+              initial(appName)
+            )}
+          </span>
+        </div>
+        <h2>
+          <strong>{appName}</strong> 请求访问你的账号
+        </h2>
+        <p className="desktop-library-consent__description">{appDescription}</p>
+        <div className="desktop-library-consent__facts">
+          <span>
+            <Lock aria-hidden="true" /> 使用 Orbitwork 账号凭证
+          </span>
+          <span>
+            <Shield aria-hidden="true" /> 仅在资料库请求中生效
+          </span>
+        </div>
+        <section className="desktop-library-consent__scopes" aria-labelledby="desktop-library-consent-scopes">
+          <h3 id="desktop-library-consent-scopes">将授予以下权限</h3>
+          {loading ? (
+            <p className="desktop-library-consent__loading">正在检查登录状态…</p>
+          ) : scopes.length > 0 ? (
+            <ul>
+              {scopes.map((scope) => (
+                <li key={`${scope.owner ?? ""}:${scope.title}`}>
+                  <CheckCircle aria-hidden="true" />
+                  <span>
+                    <strong>{scope.title}</strong>
+                    {scope.owner && <small>{scope.owner}</small>}
+                    {scope.description && <em>{scope.description}</em>}
+                  </span>
+                  {scope.required && <b>必需</b>}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="desktop-library-consent__loading">访问资料库内容</p>
+          )}
+        </section>
+        {authorizationUrl && (
+          <div ref={webviewHostRef} className="desktop-library-consent__webview" aria-hidden="true" />
+        )}
+        {error && (
+          <p className="desktop-library-consent__error" role="alert">
+            {error}
+          </p>
+        )}
+        <p className="desktop-library-consent__foot">
+          <Shield aria-hidden="true" /> 凭证仅保存在本机，仅用于该插件。
+        </p>
+        <div className="desktop-library-consent__actions">
+          <Button variant="ghost" disabled={submitting === "deny"} onClick={onDeny}>
+            {submitting === "deny" ? "处理中…" : "拒绝"}
+          </Button>
+          <Button variant="primary" disabled={loading || submitting !== null} onClick={onApprove}>
+            {submitting === "approve" ? "授权中…" : "同意授权"}
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
+
+function initial(value: string): string {
+  const trimmed = value.trim()
+  return trimmed ? (Array.from(trimmed)[0] ?? "资").toUpperCase() : "资"
+}

package/src/components/domain/desktop/DesktopLibraryPageView/DesktopLibraryPageView.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DesktopLibraryPageView } from "./index"
+
+/**
+ * 合并记（origin/main 9.2 批次，2026-09-03）：研发新增件进库时没带 story，check:stories
+ * 会拦 pre-commit。三态铺齐：启动中 / webview 宿主已挂（webview 本体由宿主 LibraryPage
+ * 注入，story 里只见空宿主）/ 加载失败。
+ */
+const meta = {
+  title: "Desktop/DesktopLibraryPageView",
+  component: DesktopLibraryPageView,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: "100vh", display: "flex" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DesktopLibraryPageView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Starting: Story = {
+  args: {},
+}
+
+export const WebviewHost: Story = {
+  args: {
+    loading: true,
+    webviewHostRef: () => {},
+  },
+}
+
+export const LoadError: Story = {
+  args: {
+    error: "资料库插件未安装或启动失败（exit code 1）",
+  },
+}

package/src/components/domain/desktop/DesktopLibraryPageView/index.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import type { Ref } from "react"
+
+export interface DesktopLibraryPageViewProps {
+  loading?: boolean
+  error?: string | null
+  webviewHostRef?: Ref<HTMLDivElement>
+}
+
+/** Full-bleed surface for the installed library plugin's isolated webview. */
+export function DesktopLibraryPageView({
+  loading = false,
+  error = null,
+  webviewHostRef,
+}: DesktopLibraryPageViewProps): React.ReactElement {
+  return (
+    <section className="desktop-library-page" aria-label="资料库">
+      <div className="desktop-library-page__content">
+        {error ? (
+          <div className="desktop-library-page__state" role="alert">
+            <strong>资料库页面加载失败</strong>
+            <span>{error}</span>
+          </div>
+        ) : webviewHostRef ? (
+          <div ref={webviewHostRef} className="desktop-library-page__webview-host" aria-busy={loading} />
+        ) : (
+          <div className="desktop-library-page__state">
+            <span>资料库页面正在启动…</span>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/src/components/domain/desktop/DesktopLoginView/DesktopLoginView.css

@@ -0,0 +1,75 @@
+/* ============================================================
+ * DesktopLoginView 专属样式（colocated，L2 治理）
+ * ============================================================
+ * 原在 styles/desktop-surfaces.css 的 LOGIN FLOW 段，随组件迁出（import 见
+ * index.tsx）。治理口径：新组件/新页面样式 colocate，不再进全局 surface 表——
+ * 全局表的 DOM 语境耦合是 Storybook/app 渲染漂移的温床。
+ * 排版规范与 surface 表同一口径：单行规则；scripts/normalize-desktop-css.mjs
+ * 的归一规则适用于本文件（手动保持）。KV 板黑渐变遮罩是 §5「无渐变」的具名例外
+ * （压照片不压 UI 面，登记在 scripts/ds2-allowlist.json）。
+ * ============================================================ */
+.login-v2 { position: relative; display: grid; place-items: center; background: var(--ow-navy); color: var(--ow-white); overflow: hidden; }
+.login-v2.login-split { display: flex; place-items: unset; }
+.login-kv-board { position: relative; flex: 1; display: flex; align-items: flex-end; padding: var(--ow-space-16, 64px); overflow: hidden; background: var(--ow-navy); }
+.login-bg { position: absolute; inset: 0; z-index: 0; }
+.login-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.login-v2.fallback .login-bg { background: var(--ow-navy); }
+.login-v2.fallback .login-bg img { display: none; }
+.login-v2.fallback .login-kv-scrim { display: none; }
+.login-kv-scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.7) 100%); pointer-events: none; }
+.login-slogan { position: relative; z-index: 1; max-width: 520px; color: var(--ow-white); }
+.login-slogan .slogan-line { font-size: var(--ow-fs-headline-lg); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 12px; }
+.login-slogan .slogan-note { font-size: var(--ow-fs-subtitle); line-height: 1.5; color: color-mix(in srgb, var(--ow-white) 85%, transparent); }
+.login-rail { position: relative; width: 420px; display: flex; flex-direction: column; background: var(--ow-bg); border-left: var(--ow-border-width-thin, 1px) solid var(--ow-border); }
+.login-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--ow-space-12, 48px) var(--ow-space-12, 48px) var(--ow-space-8, 32px); overflow-y: auto; }
+.login-rail-foot { margin-top: auto; padding: var(--ow-space-8, 32px) var(--ow-space-12, 48px); border-top: var(--ow-border-width-thin, 1px) solid var(--ow-border); }
+.login-rail-foot .login-tag { font-family: var(--ow-font-mono); font-size: var(--ow-fs-mark-md); font-weight: 500; text-transform: uppercase; letter-spacing: 0.13em; color: var(--ow-text-3); }
+.login-pane { display: flex; flex-direction: column; }
+.login-split .login-pane { width: 100%; max-width: 320px; }
+.login-mark { width: 46px; aspect-ratio: 73.4 / 45.3; display: block; margin: 0 auto 40px; }
+.login-h1 { font: 700 var(--ow-fs-title) var(--ow-font-sans); color: var(--ow-text); text-align: center; margin-bottom: 12px; }
+.login-sub { font: 400 var(--ow-fs-ui)/1.6 var(--ow-font-sans); color: var(--ow-text-3); text-align: center; margin: 0 auto var(--ow-space-8, 32px); max-width: 320px; text-wrap: pretty; }
+.lk { border: none; background: transparent; cursor: pointer; padding: 0; border-radius: var(--ow-radius-xs); font: 400 var(--ow-fs-ui)/1 var(--ow-font-sans); color: var(--ow-link); transition: color var(--ow-dur-1) var(--ow-ease-beacon); }
+.lk:hover { color: var(--ow-link-hover); text-decoration: underline; }
+.lk:active { color: var(--ow-link-hover); }
+.lk:focus-visible { outline: var(--ow-focus-ring-w) solid var(--ow-focus-ring); outline-offset: var(--ow-focus-ring-offset); }
+.login-foot { font: 400 var(--ow-fs-body-sm)/1.6 var(--ow-font-sans); color: var(--ow-text-3); text-align: center; margin-top: 16px; }
+.login-foot .lk { font-size: var(--ow-fs-body-sm); }
+.login-password { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
+.login-divider { display: flex; align-items: center; gap: 12px; font: 400 var(--ow-fs-body-sm)/1 var(--ow-font-sans); color: var(--ow-text-3); }
+.login-divider span { flex: 1; height: var(--ow-border-width-thin, 1px); background: var(--ow-border); }
+.login-providers { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
+.login-provider-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
+.login-provider { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: none; background: transparent; border-radius: var(--ow-radius-action); cursor: pointer; transition: background-color var(--ow-dur-1) var(--ow-ease-beacon); }
+.login-provider--generic { display: flex; gap: 8px; width: auto; max-width: 100%; height: auto; min-height: 40px; padding: 8px; color: var(--ow-text); font: inherit; overflow-wrap: anywhere; }
+.login-provider--generic svg { flex-shrink: 0; }
+.login-provider:hover:not(:disabled) { background: var(--ow-btn-ghost-hover); }
+.login-provider:active:not(:disabled) { background: var(--ow-btn-ghost-press); }
+.login-provider:focus-visible { outline: var(--ow-focus-ring-w) solid var(--ow-focus-ring); outline-offset: var(--ow-focus-ring-offset); }
+.login-provider:disabled { cursor: not-allowed; }
+.login-provider svg { width: 20px; height: 20px; display: block; }
+.login-mfa { width: 100%; }
+.login-mfa .login-h1 { margin-top: 8px; }
+.login-mfa .login-sub { margin-bottom: 20px; }
+.login-mfa > * + * { margin-top: 12px; }
+.login-qr__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
+.login-qr__head .back { display: inline-flex; align-items: center; gap: 5px; border: none; background: transparent; cursor: pointer; font: 400 var(--ow-fs-ui)/1 var(--ow-font-sans); color: var(--ow-text-3); padding: 0; }
+.login-qr__head .back:hover:not(:disabled) { color: var(--ow-text); }
+.login-qr__head .back:active:not(:disabled) { color: var(--ow-text-press); }
+.login-qr__head .back:focus-visible { outline: var(--ow-focus-ring-w) solid var(--ow-focus-ring); outline-offset: var(--ow-focus-ring-offset); border-radius: var(--ow-radius-xs); }
+.login-qr__head .back:disabled { color: var(--ow-disabled-text); cursor: not-allowed; }
+.login-qr__head .back svg { width: 16px; height: 16px; }
+.login-qr__head .t { font: 600 var(--ow-fs-ui)/1 var(--ow-font-sans); color: var(--ow-text); }
+.qr-box { position: relative; width: 240px; height: 240px; margin: 0 auto; border: var(--ow-border-width-thin, 1px) solid var(--ow-border-strong); border-radius: var(--ow-radius-xl); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--ow-bg); }
+.qr-box .qr-img { width: 196px; height: 196px; display: block; border-radius: var(--ow-radius-sm); }
+.qr-veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--ow-bg) 90%, transparent); backdrop-filter: blur(2px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; animation: fade var(--ow-dur-2) var(--ow-ease-beacon); }
+.qr-veil .msg { font: 500 var(--ow-fs-ui)/1.3 var(--ow-font-sans); color: var(--ow-text); }
+.qr-veil .sub { font: 400 var(--ow-fs-ui)/1.3 var(--ow-font-sans); color: var(--ow-text-3); }
+/* 失败态（expired/error）实心遮罩：90% 半透明＋blur 的边会和 1px 边框互相洇染
+   （下边框最常见），实心 --ow-bg 让边框完整露出；padding 给覆盖层里的主钮留边。 */
+.qr-veil.failed { background: var(--ow-bg); backdrop-filter: none; padding: 0 24px; }
+/* 成功屏只有标志＋标题＋副题三行，无勾章（.okc 已随成功屏改版移除）。 */
+.qr-hint { text-align: center; margin-top: 18px; }
+.qr-hint .r { font: 400 var(--ow-fs-ui)/1.7 var(--ow-font-sans); color: var(--ow-text); }
+.qr-hint .r b { font-weight: 600; }
+.qr-hint .r.sub { font-size: var(--ow-fs-caption); color: var(--ow-text-3); }

package/src/components/domain/desktop/DesktopLoginView/DesktopLoginView.stories.tsx

@@ -0,0 +1,230 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DesktopLoginView } from "./index"
+
+// KV 背景图走本地 fixture（.storybook/public/fixtures/，见该目录 README）——原来这两处
+// 写的是 https://picsum.photos/...，离线/CI 下取不到，img onError 一路掉进 fallback，
+// 「照片 ＋ 黑渐变遮罩」这套（裁决 7 装回的正是它）在 Storybook 里根本看不到。
+const loginKv = "/fixtures/login_kv.jpeg"
+
+// Story 版假 QR：宿主运行时由主进程用 qrcode 包编码 Identity 下发的 QR 内容，
+// 这里只示意 <img> 落位（光学件恒白底高对比，不随主题翻转）。
+const mockQrSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" shape-rendering="crispEdges"><rect width="25" height="25" fill="#ffffff"/><g fill="#141414"><rect x="0" y="0" width="7" height="7"/><rect x="1" y="1" width="5" height="5" fill="#ffffff"/><rect x="2" y="2" width="3" height="3"/><rect x="18" y="0" width="7" height="7"/><rect x="19" y="1" width="5" height="5" fill="#ffffff"/><rect x="20" y="2" width="3" height="3"/><rect x="0" y="18" width="7" height="7"/><rect x="1" y="19" width="5" height="5" fill="#ffffff"/><rect x="2" y="20" width="3" height="3"/><rect x="9" y="4" width="2" height="2"/><rect x="13" y="2" width="3" height="3"/><rect x="9" y="9" width="4" height="4"/><rect x="15" y="10" width="2" height="2"/><rect x="19" y="9" width="3" height="3"/><rect x="4" y="9" width="2" height="2"/><rect x="10" y="15" width="3" height="3"/><rect x="15" y="15" width="4" height="4"/><rect x="21" y="16" width="2" height="2"/><rect x="9" y="21" width="2" height="2"/><rect x="13" y="20" width="3" height="3"/><rect x="19" y="21" width="3" height="3"/><rect x="5" y="13" width="2" height="2"/></g></svg>`
+const mockQrSrc = `data:image/svg+xml,${encodeURIComponent(mockQrSvg)}`
+
+// 联邦连接以后端 identity-providers 为准；story 使用不透明 UUID，平台展示只取 kind。
+const threeProviders = [
+  { id: "019a12ab-1234-7123-8123-123456789001", displayName: "钉钉", kind: "IDENTITY_PROVIDER_KIND_DINGTALK" as const },
+  { id: "019a12ab-1234-7123-8123-123456789002", displayName: "飞书", kind: "IDENTITY_PROVIDER_KIND_FEISHU" as const },
+  { id: "019a12ab-1234-7123-8123-123456789003", displayName: "企业微信", kind: "IDENTITY_PROVIDER_KIND_WECOM" as const },
+]
+
+const meta = {
+  title: "Desktop/DesktopLoginView",
+  component: DesktopLoginView,
+  parameters: {
+    layout: "fullscreen",
+  },
+  args: {
+    // 默认背景图（本地 fixture）
+    backgroundSrc: loginKv,
+  },
+} satisfies Meta<typeof DesktopLoginView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 现行产品形态：账号密码表单（主）＋「其他登录方式」品牌按钮行（钉钉/飞书/企业微信）。 */
+export const Welcome: Story = {
+  args: {
+    stage: "welcome",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    onPasswordLogin: (identifier, password) => console.log("Password login", identifier, password.length),
+    providers: threeProviders,
+    onQrLogin: (id) => console.log("QR login", id),
+  },
+}
+
+/** 仅密码表单：联邦连接发现失败或租户未启用任何 IM 登录时的退化形态。 */
+export const PasswordForm: Story = {
+  args: {
+    stage: "welcome",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    onPasswordLogin: (identifier, password) => console.log("Password login", identifier, password.length),
+  },
+}
+
+/** 未知认证源仍显示通用图标和名称。 */
+export const UnknownProvider: Story = {
+  args: {
+    stage: "welcome",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    onPasswordLogin: (identifier, password) => console.log("Password login", identifier, password.length),
+    providers: [{ id: "okta", displayName: "Okta" }],
+    onQrLogin: (id) => console.log("QR login", id),
+  },
+}
+
+export const PasswordSubmitting: Story = {
+  args: {
+    stage: "welcome",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    onPasswordLogin: (identifier, password) => console.log("Password login", identifier, password.length),
+    passwordSubmitting: true,
+    providers: threeProviders,
+    onQrLogin: (id) => console.log("QR login", id),
+  },
+}
+
+/** 正在发起 QR 登录（beginQrLogin IPC 进行中），被点的品牌钮走小转子。 */
+export const QrRequesting: Story = {
+  args: {
+    stage: "welcome",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    onPasswordLogin: (identifier, password) => console.log("Password login", identifier, password.length),
+    providers: threeProviders,
+    onQrLogin: (id) => console.log("QR login", id),
+    qrRequesting: "019a12ab-1234-7123-8123-123456789002",
+  },
+}
+
+/** QR 展示中：主进程编码的二维码图落位 .qr-box，等待手机扫码。 */
+export const QrScanning: Story = {
+  args: {
+    stage: "qr",
+    appVersion: "v0.1.0",
+    expiresText: "15:30",
+    onBack: () => console.log("Back"),
+    providers: threeProviders,
+    onQrLogin: (id) => console.log("QR login", id),
+    qr: { providerId: "019a12ab-1234-7123-8123-123456789001", providerName: "钉钉", src: mockQrSrc },
+  },
+}
+
+/** 已扫码待确认：轮询返回 scanned 后 QR 上盖 waiting-confirmation 遮罩。 */
+export const QrWaitingConfirm: Story = {
+  args: {
+    stage: "waiting-confirmation",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    providers: threeProviders,
+    onQrLogin: (id) => console.log("QR login", id),
+    qr: { providerId: "019a12ab-1234-7123-8123-123456789002", providerName: "飞书", src: mockQrSrc },
+  },
+}
+
+/** QR 过期：实心遮罩覆盖 QR，「二维码过期」＋「重新登录」上下左右居中在码上。 */
+export const QrExpired: Story = {
+  args: {
+    stage: "expired",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    providers: threeProviders,
+    onQrLogin: (id) => console.log("QR login", id),
+    qr: { providerId: "019a12ab-1234-7123-8123-123456789003", providerName: "企业微信", src: mockQrSrc },
+  },
+}
+
+export const Success: Story = {
+  args: {
+    stage: "success",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    providers: threeProviders,
+    onQrLogin: (id) => console.log("QR login", id),
+    qr: { providerId: "019a12ab-1234-7123-8123-123456789001", providerName: "钉钉", src: mockQrSrc },
+  },
+}
+
+export const QrFailed: Story = {
+  args: {
+    stage: "error",
+    error: "网络连接失败，请检查网络后重试",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    providers: threeProviders,
+    onQrLogin: (id) => console.log("QR login", id),
+    qr: { providerId: "019a12ab-1234-7123-8123-123456789001", providerName: "钉钉", src: mockQrSrc },
+  },
+}
+
+export const WithBackground: Story = {
+  args: {
+    stage: "welcome",
+    backgroundSrc: loginKv,
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    onPasswordLogin: (identifier, password) => console.log("Password login", identifier, password.length),
+    providers: threeProviders,
+    onQrLogin: (id) => console.log("QR login", id),
+  },
+}
+
+/** 兜底态：backgroundSrc 空（等同图挂 onError），KV 板走 --ow-navy 品牌藏蓝平涂——
+ *  不是 V1 那道 #27C2FF→#5029FF 蓝紫渐变。
+ *  写 "" 而不是 undefined：Storybook 的 args 合并对 undefined 是「回落 meta 默认」，
+ *  写 undefined 覆盖不掉上面 meta.args 里的 loginKv。 */
+export const FallbackNoBackground: Story = {
+  args: {
+    stage: "welcome",
+    backgroundSrc: "",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    onPasswordLogin: (identifier, password) => console.log("Password login", identifier, password.length),
+    providers: threeProviders,
+    onQrLogin: (id) => console.log("QR login", id),
+  },
+}
+
+export const WithCustomMark: Story = {
+  args: {
+    stage: "welcome",
+    markSrc: "https://api.dicebear.com/7.x/shapes/svg?seed=orbitwork",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    onPasswordLogin: (identifier, password) => console.log("Password login", identifier, password.length),
+    providers: threeProviders,
+    onQrLogin: (id) => console.log("QR login", id),
+  },
+}
+
+/** 品牌定制（白标）：宣传语两行、品牌名、标志图全走 props——
+ * 缺省才回落到包内常量与 OrbitworkMark。 */
+export const CustomBranding: Story = {
+  args: {
+    stage: "welcome",
+    claim: "让每一次协作，都有迹可循",
+    claimNote: "团队的知识、任务与 AI 助手，尽在一处",
+    brandName: "Acme",
+    markSrc: "https://api.dicebear.com/7.x/shapes/svg?seed=acme",
+    appVersion: "v2.3.1",
+    onBack: () => console.log("Back"),
+    onPasswordLogin: (identifier, password) => console.log("Password login", identifier, password.length),
+    providers: threeProviders,
+    onQrLogin: (id) => console.log("QR login", id),
+  },
+}
+
+/** MFA 续接：密码正确但账号开启二次验证，输入验证器验证码或恢复码。 */
+export const MfaChallenge: Story = {
+  args: {
+    stage: "mfa",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    onCompleteMfa: (code) => console.log("Complete MFA", code),
+  },
+}
+
+export const MfaError: Story = {
+  args: {
+    stage: "mfa",
+    error: "验证码不正确，请重新输入账号密码后再试。",
+    appVersion: "v0.1.0",
+    onBack: () => console.log("Back"),
+    onCompleteMfa: (code) => console.log("Complete MFA", code),
+  },
+}