@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopLoginView/DesktopLoginViewSource.test.mjs

@@ -0,0 +1,149 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+/** story 文件同样只看生效代码：两处注释都在复述「原来写的是 picsum 外链」，不剥会被当违规。 */
+const stripComments = (text) => text.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^\s*\/\/.*$/gm, "")
+const stories = stripComments(await readFile(new URL("./DesktopLoginView.stories.tsx", import.meta.url), "utf8"))
+const screenStories = stripComments(
+  await readFile(new URL("../../../../screens/Login.stories.tsx", import.meta.url), "utf8"),
+)
+/** 登录样式已 colocate 到组件旁（L2 治理，见 DesktopLoginView.css 头注释）——
+ *  整个文件就是断言段，不再依赖 surface 表的段横幅（横幅已被并行重排移除）。 */
+const loginSegment = await readFile(new URL("./DesktopLoginView.css", import.meta.url), "utf8")
+
+/** 同一段去掉注释后的纯规则文本——负向断言只看真正生效的声明，不看解释性注释。 */
+const loginRules = loginSegment.replace(/\/\*[\s\S]*?\*\//g, "")
+
+/** 段内文本压成单空格单行——biome 的 CSS 格式化把声明各居一行，
+ *  正向断言按单空格断句写，先压平再匹配。 */
+const flatLogin = loginSegment.replace(/\s+/g, " ")
+
+// 裁决 7「登录页相关的用研发的吧」：P6-1 的 --ow-stage-* 平涂舞台版作废，KV 摄影板装回。
+// 本组断言整组翻向——原来断的是「禁背景图禁渐变」，现在断的是「三层到位 ＋ 兜底不是渐变」。
+test("登录 KV 板＝摄影图 ＋ 黑渐变遮罩 ＋ 宣传语三层（裁决 7）", () => {
+  // CSS：三族回位
+  assert.match(flatLogin, /\.login-bg \{[^}]*position: absolute; inset: 0; z-index: 0/)
+  assert.match(flatLogin, /\.login-bg img \{[^}]*object-fit: cover/)
+  assert.match(
+    flatLogin,
+    /\.login-kv-scrim \{[^}]*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%\)/,
+  )
+
+  // TSX：三层 DOM ＋ onError 兜底通路
+  assert.match(source, /const \[backgroundFailed, setBackgroundFailed\] = useState\(false\)/)
+  assert.match(source, /className=\{`owshell login-v2 login-split\$\{showBackground \? "" : " fallback"\}`\}/)
+  assert.match(source, /className="login-bg"/)
+  assert.match(source, /onError=\{\(\) => setBackgroundFailed\(true\)\}/)
+  assert.match(source, /className="login-kv-scrim"/)
+  // backgroundSrc 重新生效：不再是 @deprecated 的兼容空入参
+  assert.doesNotMatch(source, /@deprecated[\s\S]{0,200}backgroundSrc\?: string/)
+})
+
+test("KV 兜底是 --ow-navy 平涂，不是蓝紫渐变；舞台 token 已退出登录段", () => {
+  assert.match(flatLogin, /\.login-v2\.fallback \.login-bg \{ background: var\(--ow-navy\); \}/)
+  assert.match(flatLogin, /\.login-v2 \{[^}]*background: var\(--ow-navy\)/)
+  assert.match(flatLogin, /\.login-kv-board \{[^}]*background: var\(--ow-navy\)/)
+  assert.match(flatLogin, /\.login-slogan \{[^}]*color: var\(--ow-white\)/)
+
+  // V1 的品牌外配色渐变兜底不随回退复活
+  assert.doesNotMatch(loginRules, /#27C2FF|#5029FF|#20203A/)
+  // 随主题翻转的 UI token 不得当 KV 底（浅 navy／暗 graphite）
+  assert.doesNotMatch(loginRules, /--ow-bg-surface-dark/)
+  // 平涂舞台版作废后，--ow-stage-* 在本段应当一个落点都不剩
+  assert.doesNotMatch(loginRules, /--ow-stage-/)
+  // 唯一一处 linear-gradient 就是 scrim（§5 具名例外），别处不得再有
+  assert.equal((loginRules.match(/linear-gradient\(/g) ?? []).length, 1)
+})
+
+test("KV 图走本地 fixture，不走公网外链（离线/CI 下也能验出照片＋遮罩）", () => {
+  assert.doesNotMatch(stories, /picsum\.photos/)
+  assert.match(stories, /const loginKv = "\/fixtures\/login_kv\.jpeg"/)
+  // Screens/Login 每个渲染 KV 板的 story 都要带图，否则整屏一路掉 fallback
+  assert.match(screenStories, /const loginKv = "\/fixtures\/login_kv\.jpeg"/)
+  assert.ok(
+    (screenStories.match(/backgroundSrc=\{loginKv\}/g) ?? []).length >= 3,
+    "三态（及新增 story）都应传本地 fixture KV 图",
+  )
+})
+
+test("login-mark 按 Mark 光学框 0.617 比例定高（aspect-ratio，不写非整数 px）", () => {
+  // 光学框 73.4×45.3（比 0.617）；方框会把标志缩到框内留白。
+  // R2：原先写死 height: 28.4px —— 反算出来的非整数字面量，不在任何度量档上；
+  // 改由光学框本身的 aspect-ratio 定高，渲染结果与 OrbitworkMark size=46 一致。
+  assert.match(flatLogin, /\.login-mark \{[^}]*width: 46px; aspect-ratio: 73\.4 \/ 45\.3/)
+  assert.doesNotMatch(loginSegment, /\.login-mark \{[^}]*height: 28\.4px/)
+  // 同一个 40px 底距不再在 .login-split .login-mark 里重写一遍
+  assert.doesNotMatch(loginSegment, /\.login-split \.login-mark \{/)
+  assert.match(source, /<OrbitworkMark variant="auto" size=\{46\}/)
+})
+
+test("主行动钮走 Button primary，错误走 InlineMessage；浏览器登录已整族删除", () => {
+  assert.match(source, /import \{ InlineMessage \}/)
+  assert.match(source, /variant="primary"\s+size="lg"/)
+  assert.match(source, /<InlineMessage\s+variant="error"/)
+  assert.match(source, /<InlineMessage\s+variant="error"\s+tone="outline"/)
+  // QR 失败态（expired/error）已改为 QR 上的实心覆盖层：提示一行＋错误小字＋主钮，
+  // 不再出 outline 横幅；tone="outline" 现只剩欢迎面密码表单错误行一处落点。
+  assert.match(source, /className="qr-veil failed"/)
+  assert.match(source, /role="alert"/)
+  assert.match(source, /二维码过期/)
+  const uncommentedFailed = stripComments(source)
+  assert.doesNotMatch(uncommentedFailed, /登录已超时|重新发起一次登录|这次没登上/)
+  assert.match(flatLogin, /\.qr-veil\.failed \{ background: var\(--ow-bg\); backdrop-filter: none; padding: 0 24px; \}/)
+  // 自搓 CTA 已退役：不再有 .login-cta 类与其规则
+  assert.doesNotMatch(source, /login-cta/)
+  assert.doesNotMatch(loginRules, /\.login-cta/)
+  // 公司账户浏览器登录（onStartLogin / requesting-auth stage）是内嵌 QR 方案下的
+  // 冗余废状态，已从底盘整族删除：props、stage、欢迎面主钮、表单分隔行一并清除。
+  // 负向断言剥注释：组件 doc 里保留了这两个名字作删除记录，不应算违规。
+  const uncommented = stripComments(source)
+  assert.doesNotMatch(uncommented, /onStartLogin|requesting-auth/)
+  assert.doesNotMatch(uncommented, /使用公司账户登录|正在打开登录页|或使用账号密码/)
+})
+
+test("登录段控件补齐 §6 状态：focus-visible 到位，禁用不用统一透明度", () => {
+  assert.match(flatLogin, /\.lk \{[^}]*color: var\(--ow-link\)/)
+  assert.match(flatLogin, /\.lk:focus-visible \{[^}]*outline: var\(--ow-focus-ring-w\) solid var\(--ow-focus-ring\)/)
+  assert.match(flatLogin, /\.login-qr__head \.back:focus-visible \{[^}]*var\(--ow-focus-ring\)/)
+  assert.match(flatLogin, /\.login-qr__head \.back:disabled \{[^}]*var\(--ow-disabled-text\)/)
+  assert.doesNotMatch(loginRules, /\.back:disabled \{[^}]*opacity/)
+})
+
+// ── W5 终扫 ──────────────────────────────────────────────────────────────
+test("§7 图标：手搓件退役，归口 composite/Icons；QR 面渲染主进程编码的真图", () => {
+  assert.match(
+    source,
+    /import \{ ChevLeft, DingTalk, Feishu, Globe, WeCom \} from "\.\.\/\.\.\/\.\.\/composite\/Icons"/,
+  )
+  assert.doesNotMatch(source, /function (?:BackIcon|CheckIcon)\(/)
+  assert.doesNotMatch(source, /<Check \/>/)
+  // 手搓假 QR（QrCode，固定 seed 的装饰品）与 QrIcon 随真内嵌 QR 退役：
+  // QR 面改渲染主进程用 qrcode 包编码的 PNG data URL（<img className="qr-img">），
+  // 钉钉/飞书/企业微信入口走 composite/Icons 的品牌件 providerBrandIcon 映射。
+  assert.doesNotMatch(source, /function (?:QrCode|QrIcon)\(/)
+  assert.match(source, /<img className="qr-img" src=\{qr\.src\}/)
+  assert.match(source, /function providerBrandIcon\(/)
+  // kind 契约映射：主进程把 protojson 的名字/数字两种线格式归一成枚举名，
+  // 组件按枚举名分派；UNSPECIFIED/未来值回落 Globe 通用件，入口不再隐藏：
+  assert.match(source, /case "IDENTITY_PROVIDER_KIND_DINGTALK": return DingTalk/)
+  assert.match(source, /case "IDENTITY_PROVIDER_KIND_FEISHU": return Feishu/)
+  assert.match(source, /case "IDENTITY_PROVIDER_KIND_WECOM": return WeCom/)
+  assert.match(source, /default: return Globe/)
+  // 未知 kind 的通用入口：Globe 标＋displayName 文本，不再隐藏连接。
+  assert.match(source, /login-provider--generic/)
+  assert.match(source, /Icon === Globe \? <span>\{provider\.displayName\}<\/span>/)
+})
+
+test("§9 动效：登录段无 pop-in 缩放位移；成功屏无勾章，.okc 族已整族移除", () => {
+  assert.doesNotMatch(loginRules, /animation: pop-in/)
+  assert.doesNotMatch(loginRules, /\.okc/)
+})
+
+test("§7 字号：登录段字号全部落 --ow-fs-* 阶，无 13.5 / 11.5 半档裸值", () => {
+  assert.doesNotMatch(loginRules, /font-size: 1[0-9](?:\.[0-9]+)?px/)
+  assert.match(flatLogin, /\.login-sub \{ font: 400 var\(--ow-fs-ui\)/)
+  assert.match(flatLogin, /\.login-foot \{ font: 400 var\(--ow-fs-body-sm\)/)
+  assert.match(flatLogin, /\.qr-hint \.r \{ font: 400 var\(--ow-fs-ui\)/)
+})

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

@@ -0,0 +1,418 @@
+"use client"
+
+import { useState } from "react"
+import "./DesktopLoginView.css"
+import { BeaconSpinner } from "../../../composite/BeaconSpinner"
+import { ChevLeft, DingTalk, Feishu, Globe, WeCom } from "../../../composite/Icons"
+import { OrbitworkMark } from "../../../composite/OrbitworkLogo"
+import { Button } from "../../../primitives"
+import { Field } from "../../../primitives/Field"
+import { InlineMessage } from "../../../primitives/InlineMessage"
+import { Spinner } from "../../../primitives/Spinner"
+
+export type DesktopLoginStage = "welcome" | "qr" | "waiting-confirmation" | "mfa" | "success" | "expired" | "error"
+
+/** 联邦连接（钉钉/飞书/企业微信），由宿主经 Identity identity-providers 发现。 */
+export interface LoginProviderOption {
+  id: string
+  displayName: string
+  /**
+   * 契约 IdentityProviderKind（identity.authentication.v1）的归一化枚举名——
+   * 主进程已把 protojson 的名字/数字两种线格式统一成枚举名，UI 只认枚举名；
+   * UNSPECIFIED/未来值由 providerBrandIcon 回落 Globe 通用入口。
+   */
+  kind?: LoginProviderKind
+}
+
+/** 契约 kind 枚举名（与 packages/services 生成类型同一份字符串联合，本包自持副本）。 */
+export type LoginProviderKind =
+  | "IDENTITY_PROVIDER_KIND_UNSPECIFIED"
+  | "IDENTITY_PROVIDER_KIND_DINGTALK"
+  | "IDENTITY_PROVIDER_KIND_FEISHU"
+  | "IDENTITY_PROVIDER_KIND_WECOM"
+
+/** 正在展示的扫码登录 QR：src 是主进程编码好的 PNG data URL。 */
+export interface DesktopLoginQr {
+  providerId: string
+  providerName: string
+  src: string
+}
+
+export interface DesktopLoginViewProps {
+  stage: DesktopLoginStage
+  /**
+   * 左 KV 板的摄影背景图 URL（宿主传 `rendererAsset("login_kv.jpeg")`）。
+   * 图上压一层 `.login-kv-scrim` 黑渐变保宣传语可读性；`onError` 触发兜底——
+   * 根节点加 `fallback` 类，KV 板换成品牌藏蓝 `--ow-navy` 平涂（不是渐变）。
+   * 不传等同于兜底。裁决 7：登录页采研发的照片版，不走 --ow-stage-* 平涂舞台。
+   */
+  backgroundSrc?: string
+  /**
+   * 自带标志图 URL。缺省用包内 OrbitworkMark（variant="auto"，随 data-theme 走
+   * 品牌四色制两档）——外部图是单档固定色，暗档下不会跟随，能不传就不传。
+   */
+  markSrc?: string
+  /**
+   * KV 板两行宣传语（品牌定制/白标场景）。缺省回落到导出的
+   * DESKTOP_LOGIN_CLAIM / DESKTOP_LOGIN_CLAIM_NOTE 常量。
+   */
+  claim?: string
+  claimNote?: string
+  /** 品牌名：驱动欢迎标题「欢迎使用 {brandName}」与底部读数「{brandName} · {appVersion}」；
+   *  缺省 "Orbitwork"。标志的 alt/label 也随它走。 */
+  brandName?: string
+  expiresText?: string
+  error?: string | null
+  appVersion?: string
+  onBack: () => void
+  /**
+   * 密码登录（Identity signInWithPassword），欢迎面的主路径表单；
+   * 提交由宿主走 IPC，loading 用 passwordSubmitting。
+   */
+  onPasswordLogin?: (identifier: string, password: string) => void
+  passwordSubmitting?: boolean
+  /**
+   * 三方 IM 扫码登录（钉钉/飞书/企业微信）：联邦连接由宿主经 Identity
+   * identity-providers 发现后传入，欢迎面在密码表单下方渲染品牌按钮行；
+   * 点击后经 onQrLogin 走 `auth:begin-qr-login`，QR 图经 `qr` 传回展示。
+   */
+  providers?: LoginProviderOption[]
+  onQrLogin?: (connectionId: string) => void
+  /** 正在发起 QR 登录的 connectionId（按钮 loading）；无活动请求时为 null。 */
+  qrRequesting?: string | null
+  /** 当前展示的 QR：src 是主进程编码好的 PNG data URL（stage 为 qr 系时渲染）。 */
+  qr?: DesktopLoginQr | null
+  /**
+   * MFA 续接：密码登录返回 secondFactor 后宿主把 stage 切到 "mfa"，
+   * 用户输入验证码/恢复码后通过 onCompleteMfa 提交。
+   */
+  onCompleteMfa?: (code: string) => void
+  mfaSubmitting?: boolean
+}
+
+/**
+ * Desktop 登录页的完整受控视图。认证、轮询和导航仍由宿主负责。
+ *
+ * 版面＝左 KV 摄影板 + 右表单 rail：
+ * - KV 板走 `backgroundSrc` 摄影图 ＋ `.login-kv-scrim` 黑渐变遮罩 ＋ 两行宣传语
+ *   （裁决 7「登录页相关的用研发的吧」：P6-1 的 --ow-stage-* 平涂舞台版作废）。
+ *   遮罩是 §5「无渐变」的具名例外——它压的是照片不是 UI 面，登记在
+ *   scripts/ds2-allowlist.json 的 gradient 键；图挂了走 `fallback`，兜底是品牌
+ *   藏蓝 --ow-navy 平涂（不是 V1 那道 #27C2FF→#5029FF 蓝紫渐变）。
+ * - rail 是普通 UI 面（--ow-bg），密码表单错误行走 InlineMessage，样式段在
+ *   styles/desktop-surfaces.css 的 LOGIN FLOW 段。
+ *   QR 失败态（expired/error）的提示与「重新登录」收在 QR 上的实心覆盖层
+ *   （.qr-veil.failed）：主文案一行＋可选错误小字＋主钮，覆盖层实心遮罩不洇边框。
+ *
+ * 现行登录路径＝账号密码表单（主）＋ 三方 IM 扫码（钉钉/飞书/企业微信，裸品牌图标
+ * 点击件）。公司账户浏览器登录（onStartLogin / requesting-auth）已整族删除：
+ * 内嵌 QR 方案下该路径是冗余废状态（docs/integration/desktop-qr-signin.md）。
+ *
+ * 荧黄记账（R2 裁决改写，原写的「全屏唯一一处」在暗档不成立）：本屏暗档有两处荧黄，
+ * 两处都合法、分属两类——
+ * - **行动极 ×1 ＝ 失败态「重新登录」钮**（`Button variant="primary"`，暗档
+ *   --ow-btn-primary-bg ＝ #FFD23E）。欢迎面主路径是 secondary「登录」钮，不占行动极；
+ *   §4 配额用在这里。
+ * - **品牌标志**：欢迎面 `OrbitworkMark` 的卫星点。标志是 §12 锁定件本体，
+ *   荧黄是它的构成而非某一极的落点，**不计入三极配额**（同 OrbitworkLogo / BeaconIcons
+ *   在 ds2-allowlist 里的 yellow 豁免口径）。
+ * KV 板不另放标志——同屏两枚标志会重复品牌记号。
+ * 状态极、位置极本屏 0 处。
+ */
+/**
+ * 登录 KV 板的两行宣传语——**全仓唯一出处**。
+ * R2 复审前它在 DesktopLoginView 的 JSX 与 DesktopLoginChassis 的 props 默认值里各写一份，
+ * 两份分头漂移；现由本处导出（Chassis 已随裁决 7 整件删除，本处仍是唯一出处）。
+ */
+export const DESKTOP_LOGIN_CLAIM = "智能工作，从登录开始"
+export const DESKTOP_LOGIN_CLAIM_NOTE = "连接你的团队与 AI 助手"
+
+export function DesktopLoginView({
+  markSrc,
+  stage,
+  backgroundSrc,
+  claim = DESKTOP_LOGIN_CLAIM,
+  claimNote = DESKTOP_LOGIN_CLAIM_NOTE,
+  brandName = "Orbitwork",
+  expiresText = "",
+  error,
+  appVersion = "v0.1.0",
+  onBack,
+  onPasswordLogin,
+  passwordSubmitting = false,
+  providers = [],
+  onQrLogin,
+  qrRequesting = null,
+  qr = null,
+  onCompleteMfa,
+  mfaSubmitting = false,
+}: DesktopLoginViewProps) {
+  const [backgroundFailed, setBackgroundFailed] = useState(false)
+  const [identifier, setIdentifier] = useState("")
+  const [password, setPassword] = useState("")
+  const [mfaCode, setMfaCode] = useState("")
+  const showBackground = Boolean(backgroundSrc) && !backgroundFailed
+  const isQr = stage !== "welcome"
+  const qrBoxClass = stage === "waiting-confirmation" ? "scanned" : stage === "expired" ? "error" : stage
+  const canGoBack = stage === "qr" || stage === "expired" || stage === "error" || stage === "mfa"
+  const failed = stage === "expired" || stage === "error"
+  const passwordEnabled = Boolean(onPasswordLogin)
+  const canSubmitPassword = identifier.trim().length > 0 && password.length > 0 && !passwordSubmitting
+  const visibleProviders = providers.map((provider) => ({ provider, Icon: providerBrandIcon(provider.kind) }))
+  const providersEnabled = Boolean(onQrLogin) && visibleProviders.length > 0
+
+  const submitPassword = () => {
+    if (!canSubmitPassword) return
+    onPasswordLogin?.(identifier.trim(), password)
+  }
+
+  const submitMfa = () => {
+    if (!onCompleteMfa || mfaCode.trim().length === 0 || mfaSubmitting) return
+    onCompleteMfa(mfaCode.trim())
+  }
+
+  // 失败态「重新登录」：重发当前连接的 QR（failed 只可能从 QR 流程到达）。
+  const retryLogin = () => {
+    if (qr) onQrLogin?.(qr.providerId)
+  }
+
+  return (
+    <div className={`owshell login-v2 login-split${showBackground ? "" : " fallback"}`}>
+      {/* 左侧：KV 摄影板（图 → 黑渐变遮罩 → 宣传语 三层；图挂了 fallback 换藏蓝平涂） */}
+      <div className="login-kv-board">
+        <div className="login-bg">
+          {backgroundSrc ? <img src={backgroundSrc} alt="" onError={() => setBackgroundFailed(true)} /> : null}
+        </div>
+        <div className="login-kv-scrim" />
+        <div className="login-slogan">
+          <div className="slogan-line">{claim}</div>
+          <div className="slogan-note">{claimNote}</div>
+        </div>
+      </div>
+
+      {/* 右侧：登录表单区 */}
+      <div className="login-rail">
+        <div className="login-content">
+          {!isQr ? (
+            <div className="login-pane login-welcome">
+              {markSrc ? (
+                <img src={markSrc} alt={brandName} className="login-mark" />
+              ) : (
+                <OrbitworkMark variant="auto" size={46} label={brandName} className="login-mark" />
+              )}
+              <div className="login-h1">欢迎使用 {brandName}</div>
+              {passwordEnabled ? (
+                <form
+                  className="login-password"
+                  onSubmit={(event) => {
+                    event.preventDefault()
+                    submitPassword()
+                  }}
+                >
+                  {error && stage === "welcome" ? (
+                    <InlineMessage variant="error" tone="outline" className="text-left">
+                      {error}
+                    </InlineMessage>
+                  ) : null}
+                  <Field
+                    value={identifier}
+                    onChange={setIdentifier}
+                    placeholder="用户名 / 邮箱 / 手机号"
+                    autoComplete="username"
+                  />
+                  <Field
+                    type="password"
+                    value={password}
+                    onChange={setPassword}
+                    placeholder="密码"
+                    autoComplete="current-password"
+                  />
+                  <Button
+                    variant="primary"
+                    size="lg"
+                    className="w-full"
+                    type="submit"
+                    disabled={!canSubmitPassword}
+                    loading={passwordSubmitting}
+                  >
+                    登录
+                  </Button>
+                </form>
+              ) : null}
+              {providersEnabled ? (
+                <div className="login-providers">
+                  <div className="login-divider">
+                    <span />
+                    其他登录方式
+                    <span />
+                  </div>
+                  {/* 品牌图标按契约 kind 映射（dingtalk/feishu/wecom → 品牌件），
+                      未知 kind 不渲染该入口——连接列表以后端 identity-providers
+                      为准，不硬编码三家。裸图标点击件：品牌标自足辨识，不套按钮
+                      边框底（hover/focus 态在本 CSS 的 .login-provider 一族），
+                      可访问名取 displayName；发起中换小转子。 */}
+                  <div className="login-provider-row">
+                    {visibleProviders.map(({ provider, Icon }) => {
+                      const loading = qrRequesting === provider.id
+                      return (
+                        <button
+                          key={provider.id}
+                          type="button"
+                          className={`login-provider${Icon === Globe ? " login-provider--generic" : ""}`}
+                          disabled={loading}
+                          aria-label={`使用${provider.displayName}扫码登录`}
+                          aria-busy={loading || undefined}
+                          onClick={() => onQrLogin?.(provider.id)}
+                        >
+                          {loading ? <Spinner className="w-5 h-5" /> : <Icon />}
+                          {Icon === Globe ? <span>{provider.displayName}</span> : null}
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
+              ) : null}
+              <div className="login-foot">
+                登录即代表同意{" "}
+                <Button variant="unstyled" className="lk">
+                  服务条款
+                </Button>{" "}
+                与{" "}
+                <Button variant="unstyled" className="lk">
+                  隐私政策
+                </Button>
+                。
+              </div>
+            </div>
+          ) : stage === "mfa" ? (
+            <form
+              className="login-pane login-mfa"
+              onSubmit={(event) => {
+                event.preventDefault()
+                submitMfa()
+              }}
+            >
+              <div className="login-qr__head">
+                <Button variant="unstyled" className="back" onClick={onBack} disabled={!canGoBack}>
+                  <ChevLeft />
+                  返回
+                </Button>
+                <div className="t">二次验证</div>
+                <span style={{ width: 52 }} />
+              </div>
+              <div className="login-h1">输入验证码</div>
+              <div className="login-sub">该账号开启了二次验证，请输入验证器验证码或恢复码。</div>
+              {error ? (
+                <InlineMessage variant="error" tone="outline" className="text-left">
+                  {error}
+                </InlineMessage>
+              ) : null}
+              <Field
+                value={mfaCode}
+                onChange={setMfaCode}
+                placeholder="6 位验证码或恢复码"
+                autoComplete="one-time-code"
+              />
+              <Button
+                variant="primary"
+                size="lg"
+                className="mt-2 w-full"
+                type="submit"
+                disabled={mfaCode.trim().length === 0}
+                loading={mfaSubmitting}
+              >
+                验证并登录
+              </Button>
+            </form>
+          ) : stage === "success" ? (
+            /* 密码/MFA 登录成功后的过渡屏：独立面板，不复用 QR 布局——
+               旧实现把 success 落在 QR 分支里，密码登录会闪一屏「扫码登录」。 */
+            <div className="login-pane login-welcome">
+              {markSrc ? (
+                <img src={markSrc} alt={brandName} className="login-mark" />
+              ) : (
+                <OrbitworkMark variant="auto" size={46} label={brandName} className="login-mark" />
+              )}
+              <div className="login-h1">登录成功</div>
+              <div className="login-sub">正在为你准备工作区…</div>
+            </div>
+          ) : (
+            <div className="login-pane login-qr">
+              <div className="login-qr__head">
+                <Button variant="unstyled" className="back" onClick={onBack} disabled={!canGoBack}>
+                  <ChevLeft />
+                  返回
+                </Button>
+                <div className="t">{qr ? `${qr.providerName}扫码登录` : "扫码登录"}</div>
+                <span style={{ width: 52 }} />
+              </div>
+
+              <div className={`qr-box ${qrBoxClass}`}>
+                {/* 真 QR：主进程把 Identity 下发的 QR 内容编码成 PNG data URL。
+                    光学件保持恒白底高对比，img 不做主题翻转。 */}
+                {qr ? <img className="qr-img" src={qr.src} alt={`${qr.providerName}登录二维码`} /> : null}
+                {stage === "waiting-confirmation" && (
+                  <div className="qr-veil">
+                    {/* §9 旋转圈退役：26px 手搓自转圆环 → 锁定件 BeaconSpinner size=26
+                        （≥20px 出完整信标，卫星＝--ow-beacon）。遮罩期它是本屏唯一
+                        「正亮着的事」，占状态极·限一处；下面 .msg 出文字编码（§4 R1）。 */}
+                    <BeaconSpinner size={26} aria-label="等待确认" />
+                    <div className="msg">等待确认</div>
+                    <div className="sub">请在手机上完成确认，完成后将自动进入 {brandName}</div>
+                  </div>
+                )}
+                {/* 失效/失败：提示＋重试都收进 QR 上的实心覆盖层（.failed）——
+                    主文案一行（§6 人话一句），error 态附错误原因小字，「重新登录」
+                    是本屏唯一行动极（§4）；实心遮罩不再与 1px 边互相洇染。 */}
+                {failed && (
+                  <div className="qr-veil failed" role="alert">
+                    <div className="msg">{stage === "expired" ? "二维码过期" : "登录失败"}</div>
+                    {stage === "error" && error ? <div className="sub">{error}</div> : null}
+                    <Button variant="primary" size="lg" className="w-full" onClick={retryLogin}>
+                      重新登录
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              <div className="qr-hint">
+                {stage === "qr" && (
+                  <>
+                    <div className="r">
+                      请使用 <b>{qr?.providerName ?? "手机应用"}</b> 扫码登录
+                    </div>
+                    <div className="r sub">{expiresText ? `二维码有效期至 ${expiresText}` : "二维码有效期 3 分钟"}</div>
+                  </>
+                )}
+                {stage === "waiting-confirmation" && (
+                  <>
+                    <div className="r">等待登录确认</div>
+                    <div className="r sub">完成后将自动进入协作中心</div>
+                  </>
+                )}
+                {/* 失败态文案与重试已收进 QR 上的覆盖层，qr-hint 不再重复出横幅。 */}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="login-rail-foot">
+          <div className="login-tag">
+            {brandName} · {appVersion}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Unknown categories use a generic entry instead of hiding a usable connection.
+function providerBrandIcon(kind: LoginProviderOption['kind']) {
+  switch (kind) {
+    case "IDENTITY_PROVIDER_KIND_DINGTALK": return DingTalk
+    case "IDENTITY_PROVIDER_KIND_FEISHU": return Feishu
+    case "IDENTITY_PROVIDER_KIND_WECOM": return WeCom
+    default: return Globe
+  }
+}

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

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DesktopOnboardingTourView } from "./index"
+
+/**
+ * DesktopOnboardingTourView — 首启引导（原型 template.dc.html 2975–2999，文案 3295–3301）。
+ *
+ * 受控件：`steps` / `index` / `anchorRect` 由调用方给。这里用**固定** anchorRect 喂，
+ * 不依赖真锚点——件级 story 要能单独复现几何。
+ */
+const meta = {
+  title: "Desktop/DesktopOnboardingTourView",
+  component: DesktopOnboardingTourView,
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof DesktopOnboardingTourView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 原型 TOUR 五步（template.dc.html 3295–3301），锚点键＝件头注里的锚点契约。
+    不 export——CSF 会把 stories 文件里的每个具名导出当成一张 story。 */
+const TOUR_STEPS = [
+  {
+    id: "new-task",
+    title: "从这里开始一件事",
+    body: "每次新任务都是一段新会话；上面那排胶囊会把要用的专家、技能与连接器一起挂上。",
+  },
+  { id: "projects", title: "会话按项目收纳", body: "同一件事的多轮对话留在一个项目里；正在跑的那条行尾有一颗点。" },
+  { id: "plugins", title: "插件在这里安装", body: "专家、技能、连接器三段，装过的才会出现在输入框的 / 与 @ 里。" },
+  {
+    id: "workbench",
+    title: "产物都落在工作台",
+    body: "会话里做出来的站点、图片、文档先是草稿，满意了再发布成可分享的链接。",
+  },
+  { id: "composer", title: "这里可以边说边挂", body: "/ 调技能与指令，@ 引连接器；⏎ 发送、⇧⏎ 换行。" },
+]
+
+const noop = () => {}
+
+function Stage({ index, rect }: { index: number; rect: { left: number; top: number; width: number; height: number } }) {
+  return (
+    <div style={{ position: "relative", width: "100%", height: 620, background: "var(--ow-bg)" }}>
+      {/* 锚点替身：真机是侧栏导航项 / 输入框，这里画一个同尺寸的方块让环有东西可框。 */}
+      <div
+        style={{
+          position: "absolute",
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height,
+          borderRadius: "var(--ow-radius-sm)",
+          background: "var(--ow-surface-2)",
+        }}
+      />
+      <DesktopOnboardingTourView
+        steps={TOUR_STEPS}
+        index={index}
+        anchorRect={rect}
+        position="absolute"
+        onNext={noop}
+        onPrev={noop}
+        onSkip={noop}
+        onDone={noop}
+      />
+    </div>
+  )
+}
+
+/** 第 1 步：没有「上一步」，主钮「下一步」。 */
+export const FirstStep: Story = {
+  args: { steps: TOUR_STEPS, index: 0, onNext: noop, onSkip: noop },
+  render: () => <Stage index={0} rect={{ left: 16, top: 56, width: 240, height: 32 }} />,
+}
+
+/** 中间步：三钮齐（跳过 / 上一步 / 下一步）。 */
+export const MiddleStep: Story = {
+  args: { steps: TOUR_STEPS, index: 2, onNext: noop, onSkip: noop },
+  render: () => <Stage index={2} rect={{ left: 16, top: 152, width: 240, height: 32 }} />,
+}
+
+/** 末步：主钮换「开始使用」，锚点在输入框——气泡纵向翻到锚点上方。 */
+export const LastStep: Story = {
+  args: { steps: TOUR_STEPS, index: 4, onNext: noop, onSkip: noop },
+  render: () => <Stage index={4} rect={{ left: 320, top: 520, width: 560, height: 64 }} />,
+}
+
+/** 量不到锚点时（宿主那一步的锚点没渲染）：环不出，气泡居中。 */
+export const WithoutAnchor: Story = {
+  args: { steps: TOUR_STEPS, index: 1, onNext: noop, onSkip: noop },
+  render: () => (
+    <div style={{ position: "relative", width: "100%", height: 620, background: "var(--ow-bg)" }}>
+      <DesktopOnboardingTourView
+        steps={TOUR_STEPS}
+        index={1}
+        anchorRect={null}
+        position="absolute"
+        onNext={noop}
+        onPrev={noop}
+        onSkip={noop}
+        onDone={noop}
+      />
+    </div>
+  ),
+}