@csntgao/uni-base 0.1.0

package/packages/web-components/src/account-context.ts

@@ -0,0 +1,1540 @@
+import { LitElement, css, html, nothing } from 'lit'
+import type {
+  ApplicationLaunchResult,
+  ApplicationSwitcherConfig,
+} from './application-switcher-transport'
+import { UniplatApplicationSwitcher } from './application-switcher'
+import {
+  INTERNAL_ORGANIZATION_ONBOARDING_TAG,
+  type InternalOrganizationOnboarding,
+} from './organization-onboarding'
+import type { OrganizationOnboardingTransport } from './organization-onboarding-transport'
+import type { EnterpriseVerificationStatus } from './organization-selector'
+import { prototypeIcon, type PrototypeIconName } from './prototype-icons'
+import { normalizeSafeImageUrl } from './safe-image-url'
+import { UNIPLAT_APPLICATION_TICKET_FRAGMENT_KEY } from './uniplat-base-application-ticket'
+import type { UniplatUserMenu, UserMenuConfig } from './user-menu'
+
+const INTERNAL_APPLICATION_SWITCHER_TAG = 'uniplat-internal-application-switcher'
+
+if (
+  typeof customElements !== 'undefined' &&
+  !customElements.get(INTERNAL_APPLICATION_SWITCHER_TAG)
+) {
+  customElements.define(INTERNAL_APPLICATION_SWITCHER_TAG, UniplatApplicationSwitcher)
+}
+
+export type AccountContextOrganizationType = 'enterprise' | 'team'
+
+export interface AccountContextOrganization {
+  id: string
+  name: string
+  type: AccountContextOrganizationType
+  /**
+   * @deprecated The Host must pass the server-projected organizations for applicationName.
+   * This compatibility field is ignored.
+   */
+  applicationNames?: readonly string[]
+  avatarText?: string
+  employeeDisplayName?: string
+  employeeAvatarText?: string
+  employeeAvatarUrl?: string
+  /** Enterprise name shown in the employee-information dialog. */
+  companyName?: string
+  /** Current employee's department within this organization. */
+  employeeDepartmentName?: string
+  /** Current employee's employment state, for example `active`. */
+  employeeEmploymentStatus?: string
+  verificationStatus?: EnterpriseVerificationStatus
+  role?: string
+  memberCount?: number
+}
+
+export interface AccountContextUser {
+  displayName: string
+  maskedMobile?: string
+  avatarText?: string
+  avatarUrl?: string
+}
+
+export interface AccountContextEmployeeInfo {
+  departmentName: string | null
+}
+
+export interface AccountContextProjection {
+  applicationName: string
+  user: AccountContextUser
+  currentOrganization: AccountContextOrganization | null
+  currentOrganizationId: string | null
+  organizations: readonly AccountContextOrganization[]
+}
+
+export interface AccountContextTransport {
+  load(applicationName: string): Promise<AccountContextProjection>
+  /**
+   * Loads the current JWT-bound employee's details only when the employee
+   * information dialog is opened.
+   */
+  loadCurrentEmployeeInfo?(): Promise<AccountContextEmployeeInfo>
+  switchOrganization?(
+    applicationName: string,
+    organizationId: string,
+  ): Promise<AccountContextProjection>
+  /**
+   * Opens the current application's personal-account route with a short-lived
+   * navigation ticket. The optional argument preserves existing custom
+   * transports that do not need the application identity.
+   */
+  launchAccountSettings?(applicationName?: string): Promise<ApplicationLaunchResult>
+}
+
+export interface AccountContextConfig {
+  applicationName: string
+  /**
+   * Loads the user profile and the application-projected organization context.
+   * The Host supplies authentication only through the transport's token provider.
+   */
+  transport?: AccountContextTransport
+  /** @deprecated Prefer transport so the component owns identity-data loading. */
+  displayName?: string
+  maskedMobile?: string
+  avatarText?: string
+  avatarUrl?: string
+  organization?: AccountContextOrganization
+  organizations?: readonly AccountContextOrganization[]
+  organizationCount?: number
+  showWorkbench?: boolean
+  showVerificationStatus?: boolean
+  /** Enables the integrated workbench application panel. */
+  workbench?: ApplicationSwitcherConfig
+  /**
+   * Creates enterprises and teams from the account menu's internal onboarding flow.
+   * The onboarding UI is intentionally not exposed as a standalone custom element.
+   */
+  organizationOnboarding?: {
+    transport: OrganizationOnboardingTransport
+  }
+}
+
+export interface AccountContextEventMap {
+  'account-menu-requested': CustomEvent<{ organizationId: string | null }>
+  'account-settings-requested': CustomEvent<Record<string, never>>
+  'employee-info-requested': CustomEvent<{ organizationId: string | null }>
+  'organization-selected': CustomEvent<{ organizationId: string }>
+  'logout-requested': CustomEvent<Record<string, never>>
+  'workbench-requested': CustomEvent<{ organizationId: string }>
+  'enterprise-authentication-requested': CustomEvent<{
+    organizationId: string
+    reason: 'unverified' | 'rejected' | 'expired'
+  }>
+  error: CustomEvent<{
+    code: 'LOAD_FAILED' | 'SWITCH_FAILED' | 'ONBOARDING_UNAVAILABLE' | 'ACCOUNT_SETTINGS_FAILED'
+    message: string
+  }>
+}
+
+interface ResolvedAccountContext {
+  displayName: string
+  maskedMobile: string
+  avatarText: string
+  avatarUrl: string
+  organization: ResolvedAccountContextOrganization | null
+  organizations: readonly ResolvedAccountContextOrganization[]
+  organizationCount: number
+  showWorkbench: boolean
+  showVerificationStatus: boolean
+}
+
+interface ResolvedAccountContextOrganization {
+  id: string
+  name: string
+  type: AccountContextOrganizationType
+  avatarText: string
+  employeeDisplayName: string
+  employeeAvatarText: string
+  employeeAvatarUrl: string
+  companyName: string
+  employeeDepartmentName: string
+  employeeEmploymentStatus: string
+  verificationStatus: EnterpriseVerificationStatus | null
+  role: string
+  memberCount: number | null
+}
+
+type ActivePanel = 'workbench' | 'account' | 'onboarding' | 'employee-info' | null
+
+export class UniplatAccountContext extends LitElement {
+  static override properties = {
+    viewModel: { state: true },
+    activePanel: { state: true },
+    employeeInfo: { state: true },
+  }
+
+  static override styles = css`
+    :host {
+      --uniplat-account-context-primary: #2e6bf5;
+      --uniplat-account-context-text: #25303f;
+      --uniplat-account-context-muted: #7a8794;
+      --uniplat-account-context-border: #dce5f0;
+      --uniplat-account-context-panel-offset: 10px;
+      --uniplat-account-context-font-family:
+        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      position: relative;
+      display: inline-block;
+      color: var(--uniplat-account-context-text);
+      font-family: var(--uniplat-account-context-font-family);
+      line-height: 1.25;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    button {
+      appearance: none;
+      font: inherit;
+      cursor: pointer;
+    }
+
+    .context {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      max-width: 100%;
+    }
+
+    .context.personal {
+      gap: 12px;
+    }
+
+    .create,
+    .workbench {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .create {
+      gap: 6px;
+      min-height: 30px;
+      padding: 0 13px;
+      border: 1px solid var(--uniplat-account-context-primary);
+      border-radius: 15px;
+      color: var(--uniplat-account-context-primary);
+      background: #ffffff;
+    }
+
+    .workbench {
+      gap: 6px;
+      padding: 9px 15px;
+      border: 0;
+      border-radius: 19px;
+      color: #ffffff;
+      background: var(--uniplat-account-context-primary);
+      box-shadow: 0 6px 16px rgb(46 107 245 / 25%);
+    }
+
+    .workbench:hover,
+    .workbench:focus-visible,
+    .workbench[aria-expanded='true'] {
+      outline: none;
+      background: #245edc;
+    }
+
+    .account {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      gap: 9px;
+      min-width: 0;
+      height: 42px;
+      padding: 0 11px 0 4px;
+      border: 1px solid var(--uniplat-account-context-border);
+      border-radius: 21px;
+      color: inherit;
+      background: #f7faff;
+      text-align: left;
+    }
+
+    .account.personal {
+      height: 30px;
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+    }
+
+    .account:hover,
+    .account:focus-visible,
+    .account[aria-expanded='true'] {
+      border-color: #bfcfed;
+      outline: none;
+      background: #f1f5fd;
+    }
+
+    .account.personal:hover,
+    .account.personal:focus-visible {
+      border-color: transparent;
+      background: transparent;
+    }
+
+    .attention-dot {
+      position: absolute;
+      top: -2px;
+      right: 5px;
+      width: 7px;
+      height: 7px;
+      border: 2px solid #ffffff;
+      border-radius: 50%;
+      background: #e5484d;
+    }
+
+    .avatar {
+      position: relative;
+      display: grid;
+      place-items: center;
+      width: 32px;
+      height: 32px;
+      flex: none;
+      border-radius: 50%;
+      color: #ffffff;
+      background: #233043;
+      font-size: 12.5px;
+      font-weight: 700;
+      overflow: hidden;
+    }
+
+    .avatar-fallback {
+      display: grid;
+      width: 100%;
+      height: 100%;
+      place-items: center;
+    }
+
+    .avatar-image {
+      position: absolute;
+      inset: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      object-fit: cover;
+    }
+
+    .avatar-image[hidden] {
+      display: none;
+    }
+
+    .copy {
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+      line-height: 1.3;
+    }
+
+    .display-name {
+      overflow: hidden;
+      max-width: 120px;
+      font-size: 12.5px;
+      font-weight: 700;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .organization-line {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      max-width: 212px;
+      margin-top: 1px;
+    }
+
+    .organization-name {
+      min-width: 0;
+      overflow: hidden;
+      color: var(--uniplat-account-context-muted);
+      font-size: 11px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .organization-name.normal {
+      color: var(--uniplat-account-context-text);
+      font-weight: 600;
+    }
+
+    .status-icon {
+      display: grid;
+      width: 17px;
+      height: 17px;
+      flex: none;
+      place-items: center;
+      border-radius: 5px;
+      font-size: 10px;
+      font-weight: 800;
+    }
+
+    .status-icon.verified,
+    .status-icon.team {
+      color: #0ca678;
+      background: #e3f7ef;
+    }
+
+    .status-icon.pending {
+      color: #1971c2;
+      background: #e2effb;
+    }
+
+    .status-icon.unverified,
+    .status-icon.expired {
+      color: #e8590c;
+      background: #fff4e2;
+    }
+
+    .status-icon.rejected {
+      color: #e5484d;
+      background: #fdeced;
+    }
+
+    .status-icon svg {
+      width: 12px;
+      height: 12px;
+    }
+
+    .count {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      padding: 1px 6px;
+      border-radius: 9px;
+      color: var(--uniplat-account-context-primary);
+      background: #e6eefe;
+      font-size: 11px;
+      font-weight: 700;
+    }
+
+    .selector {
+      width: 14px;
+      height: 14px;
+      flex: none;
+      color: #8b98a6;
+    }
+
+    .floating-panel {
+      position: absolute;
+      z-index: 1000;
+      top: calc(100% + var(--uniplat-account-context-panel-offset));
+      right: 0;
+    }
+
+    .account-panel {
+      width: min(340px, calc(100vw - 24px));
+    }
+
+    .workbench-panel {
+      width: min(328px, calc(100vw - 24px));
+    }
+
+    .onboarding-panel {
+      width: min(400px, calc(100vw - 24px));
+    }
+
+    .employee-info-modal {
+      position: fixed;
+      z-index: 1100;
+      inset: 0;
+      display: grid;
+      width: 100vw;
+      max-width: none;
+      height: 100dvh;
+      max-height: none;
+      place-items: center;
+      margin: 0;
+      padding: 24px;
+      border: 0;
+      background: transparent;
+    }
+
+    .employee-info-modal::backdrop {
+      background: rgb(20 35 56 / 56%);
+    }
+
+    .employee-info-modal:not([open]) {
+      display: none;
+    }
+
+    .employee-info-dialog {
+      width: min(560px, calc(100vw - 32px));
+      overflow: hidden;
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 24px 60px rgb(13 31 56 / 26%);
+    }
+
+    .employee-info-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 22px 24px;
+      border-bottom: 1px solid #e6edf6;
+    }
+
+    .employee-info-icon {
+      display: grid;
+      width: 40px;
+      height: 40px;
+      flex: none;
+      place-items: center;
+      border-radius: 11px;
+      color: #2e6bf5;
+      background: #eaf1ff;
+    }
+
+    .employee-info-icon svg {
+      width: 21px;
+      height: 21px;
+    }
+
+    .employee-info-heading {
+      min-width: 0;
+      flex: 1;
+    }
+
+    .employee-info-title {
+      overflow: hidden;
+      color: #25303f;
+      font-size: 17px;
+      font-weight: 700;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .employee-info-company {
+      overflow: hidden;
+      margin-top: 4px;
+      color: #8997a8;
+      font-size: 12px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .employment-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      flex: none;
+      padding: 5px 9px;
+      border-radius: 5px;
+      color: #169b68;
+      background: #e5f8ef;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .employment-status::before {
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: currentColor;
+      content: '';
+    }
+
+    .employment-status.inactive {
+      color: #7a8794;
+      background: #eef2f6;
+    }
+
+    .employee-info-close {
+      display: grid;
+      width: 28px;
+      height: 28px;
+      flex: none;
+      place-items: center;
+      padding: 0;
+      border: 0;
+      color: #8b98a6;
+      background: transparent;
+    }
+
+    .employee-info-close:hover,
+    .employee-info-close:focus-visible {
+      border-radius: 6px;
+      outline: none;
+      color: #526173;
+      background: #f1f5f9;
+    }
+
+    .employee-info-close svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .employee-info-details {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      column-gap: 24px;
+      padding: 18px 24px;
+    }
+
+    .employee-info-detail {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      min-width: 0;
+      min-height: 46px;
+      border-bottom: 1px solid #edf1f5;
+    }
+
+    .employee-info-detail:nth-last-child(-n + 2) {
+      border-bottom: 0;
+    }
+
+    .employee-info-label {
+      flex: none;
+      color: #95a2b3;
+      font-size: 12px;
+    }
+
+    .employee-info-value {
+      min-width: 0;
+      overflow: hidden;
+      color: #25303f;
+      font-size: 12px;
+      font-weight: 600;
+      text-align: right;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .employee-info-footer {
+      padding: 12px 24px 22px;
+      color: #9aa7b6;
+      font-size: 11px;
+    }
+
+    @media (width <= 480px) {
+      .employee-info-modal {
+        padding: 16px;
+      }
+
+      .employee-info-header {
+        padding: 18px;
+      }
+
+      .employee-info-details {
+        grid-template-columns: 1fr;
+        padding: 12px 18px;
+      }
+
+      .employee-info-detail:nth-last-child(2) {
+        border-bottom: 1px solid #edf1f5;
+      }
+
+      .employee-info-footer {
+        padding: 12px 18px 18px;
+      }
+    }
+
+    uniplat-user-menu,
+    uniplat-internal-application-switcher,
+    uniplat-internal-organization-onboarding {
+      width: 100%;
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      fill: none;
+      stroke: currentColor;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 2;
+    }
+
+    .create svg,
+    .workbench svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .workbench svg:last-child {
+      width: 13px;
+      height: 13px;
+      opacity: 0.8;
+    }
+  `
+
+  declare private viewModel: ResolvedAccountContext | null
+  declare private activePanel: ActivePanel
+  declare private employeeInfo: AccountContextEmployeeInfo | null
+
+  private workbenchConfig: ApplicationSwitcherConfig | null = null
+  private organizationOnboardingTransport: OrganizationOnboardingTransport | null = null
+  private applicationName = ''
+  private accountTransport: AccountContextTransport | null = null
+  private showWorkbench = true
+  private showVerificationStatus = true
+  private loadGeneration = 0
+  private configuredApplicationSwitcher: UniplatApplicationSwitcher | null = null
+  private configuredUserMenu: UniplatUserMenu | null = null
+  private configuredOrganizationOnboarding: InternalOrganizationOnboarding | null = null
+  private accountSettingsNavigationInFlight = false
+  private employeeInfoGeneration = 0
+
+  constructor() {
+    super()
+    this.viewModel = null
+    this.activePanel = null
+    this.employeeInfo = null
+  }
+
+  configure(config: AccountContextConfig): void {
+    if (!config) throw new TypeError('account-context requires a config object')
+    this.applicationName = normalizeRequiredText(config.applicationName, 'Application name', 128)
+    this.accountTransport = normalizeAccountTransport(config.transport)
+    this.showWorkbench = config.showWorkbench ?? true
+    this.showVerificationStatus = config.showVerificationStatus ?? true
+    this.workbenchConfig = normalizeWorkbench(config.workbench)
+    this.organizationOnboardingTransport = normalizeOrganizationOnboardingTransport(
+      config.organizationOnboarding?.transport,
+    )
+    this.configuredApplicationSwitcher = null
+    this.configuredUserMenu = null
+    this.configuredOrganizationOnboarding = null
+    this.activePanel = null
+    this.employeeInfo = null
+    this.employeeInfoGeneration += 1
+    this.loadGeneration += 1
+    if (this.accountTransport) {
+      this.viewModel = null
+      if (this.isConnected) void this.refresh()
+      return
+    }
+    this.applyManualConfig(config)
+  }
+
+  async refresh(): Promise<void> {
+    const transport = this.accountTransport
+    if (!transport) return
+    const generation = ++this.loadGeneration
+    try {
+      const projection = await transport.load(this.applicationName)
+      if (generation !== this.loadGeneration) return
+      this.applyProjection(projection)
+    } catch {
+      if (generation !== this.loadGeneration) return
+      this.dispatchPublicEvent('error', {
+        code: 'LOAD_FAILED',
+        message: '账户信息加载失败，请稍后重试。',
+      })
+    }
+  }
+
+  async switchOrganization(organizationId: string): Promise<void> {
+    const normalizedOrganizationId = normalizeRequiredText(organizationId, 'Organization id', 128)
+    const transport = this.accountTransport
+    if (!transport?.switchOrganization) {
+      throw new Error('Account context organization switching is unavailable')
+    }
+    const generation = ++this.loadGeneration
+    try {
+      const projection = await transport.switchOrganization(
+        this.applicationName,
+        normalizedOrganizationId,
+      )
+      if (generation !== this.loadGeneration) return
+      this.applyProjection(projection)
+      this.activePanel = null
+    } catch {
+      if (generation === this.loadGeneration) {
+        this.dispatchPublicEvent('error', {
+          code: 'SWITCH_FAILED',
+          message: '组织切换失败，当前登录状态未改变。',
+        })
+      }
+      throw new Error('Account context organization switch failed')
+    }
+  }
+
+  private applyProjection(projection: AccountContextProjection): void {
+    if (!projection || typeof projection !== 'object') {
+      throw new TypeError('account-context projection must be an object')
+    }
+    if (projection.applicationName !== this.applicationName) {
+      throw new TypeError('account-context projection applicationName does not match')
+    }
+    const currentOrganizationId = projection.currentOrganizationId
+    if (
+      (currentOrganizationId === null) !== (projection.currentOrganization === null) ||
+      (currentOrganizationId !== null &&
+        projection.currentOrganization?.id !== currentOrganizationId)
+    ) {
+      throw new TypeError('account-context projection current organization is inconsistent')
+    }
+    this.applyManualConfig({
+      applicationName: this.applicationName,
+      displayName: projection.user.displayName,
+      maskedMobile: projection.user.maskedMobile,
+      avatarText: projection.user.avatarText,
+      avatarUrl: projection.user.avatarUrl,
+      organization: projection.currentOrganization ?? undefined,
+      organizations: projection.organizations,
+      showWorkbench: this.showWorkbench,
+      showVerificationStatus: this.showVerificationStatus,
+      workbench: this.workbenchConfig ?? undefined,
+      organizationOnboarding: this.organizationOnboardingTransport
+        ? { transport: this.organizationOnboardingTransport }
+        : undefined,
+    })
+  }
+
+  private applyManualConfig(config: AccountContextConfig): void {
+    const userDisplayName = normalizeRequiredText(config.displayName, 'Display name', 80)
+    const configuredOrganization = normalizeOrganization(config.organization)
+    const organizations = normalizeOrganizations(config.organizations, configuredOrganization)
+    const organization = configuredOrganization
+      ? (organizations.find((entry) => entry.id === configuredOrganization.id) ??
+        configuredOrganization)
+      : null
+    const organizationCount = normalizeOrganizationCount(
+      config.organizationCount,
+      organization,
+      organizations.length,
+    )
+    const userAvatarText =
+      normalizeOptionalText(config.avatarText, 4) || Array.from(userDisplayName.trim())[0] || '用'
+    const userAvatarUrl = normalizeSafeImageUrl(config.avatarUrl, 'account-context avatar URL')
+    const employeeDisplayName = organization?.employeeDisplayName ?? ''
+    const displayName = employeeDisplayName || userDisplayName
+    this.viewModel = {
+      displayName,
+      maskedMobile: normalizeMaskedMobile(config.maskedMobile),
+      avatarText: employeeDisplayName
+        ? organization?.employeeAvatarText || Array.from(employeeDisplayName)[0] || '员'
+        : userAvatarText,
+      avatarUrl: employeeDisplayName ? (organization?.employeeAvatarUrl ?? '') : userAvatarUrl,
+      organization,
+      organizations,
+      organizationCount,
+      // An open application can have oid=0 while still exposing a global workbench.
+      // Whether that workbench is available is determined by the configured capability,
+      // not by the presence of a selected organization.
+      showWorkbench: config.showWorkbench ?? true,
+      showVerificationStatus: organization ? (config.showVerificationStatus ?? true) : false,
+    }
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    document.addEventListener('pointerdown', this.handleDocumentPointerDown, true)
+    document.addEventListener('keydown', this.handleDocumentKeyDown)
+    if (this.accountTransport && !this.viewModel) void this.refresh()
+  }
+
+  override disconnectedCallback(): void {
+    document.removeEventListener('pointerdown', this.handleDocumentPointerDown, true)
+    document.removeEventListener('keydown', this.handleDocumentKeyDown)
+    this.activePanel = null
+    this.employeeInfo = null
+    this.loadGeneration += 1
+    this.employeeInfoGeneration += 1
+    this.configuredApplicationSwitcher = null
+    this.configuredUserMenu = null
+    this.configuredOrganizationOnboarding = null
+    super.disconnectedCallback()
+  }
+
+  override render() {
+    const viewModel = this.viewModel
+    if (!viewModel) return nothing
+    const organization = viewModel.organization
+    const hasAvailableOrganizations = viewModel.organizations.length > 0
+    return html`
+      <div
+        class="context ${organization ? 'organization' : 'personal'}"
+        part="context"
+        aria-label="账户、工作台与当前组织"
+      >
+        ${
+          viewModel.showWorkbench && (organization || this.workbenchConfig)
+            ? html`<button
+                class="workbench"
+                part="workbench-action"
+                type="button"
+                aria-haspopup="menu"
+                aria-expanded=${String(this.activePanel === 'workbench')}
+                @click=${this.toggleWorkbench}
+              >
+                ${prototypeIcon('layout-grid')}工作台${prototypeIcon('chevron-down')}
+              </button>`
+            : !hasAvailableOrganizations
+              ? html`<button
+                  class="create"
+                  part="create-action"
+                  type="button"
+                  @click=${this.openOrganizationOnboarding}
+                >
+                  ${prototypeIcon('plus')}创建团队 / 企业
+                </button>`
+              : nothing
+        }
+        <button
+          class="account ${organization ? '' : 'personal'}"
+          part="account-trigger"
+          type="button"
+          aria-haspopup="menu"
+          aria-expanded=${String(this.activePanel === 'account')}
+          @click=${this.toggleAccountMenu}
+        >
+          ${this.needsAttention(organization) ? html`<span class="attention-dot"></span>` : nothing}
+          <span class="avatar" part="avatar" aria-hidden="true">
+            <span class="avatar-fallback">${viewModel.avatarText}</span>
+            ${
+              viewModel.avatarUrl
+                ? html`<img
+                    class="avatar-image"
+                    part="avatar-image"
+                    src=${viewModel.avatarUrl}
+                    alt=""
+                    referrerpolicy="no-referrer"
+                    @load=${this.showLoadedAvatar}
+                    @error=${this.hideBrokenAvatar}
+                  />`
+                : nothing
+            }
+          </span>
+          <span class="copy">
+            <span class="display-name" part="display-name">${viewModel.displayName}</span>
+            ${
+              organization
+                ? this.renderOrganizationLine(organization, viewModel.showVerificationStatus)
+                : nothing
+            }
+          </span>
+          ${
+            organization && viewModel.organizationCount > 1
+              ? html`<span class="count" part="organization-count"
+                  >${viewModel.organizationCount}</span
+                >`
+              : nothing
+          }
+          ${
+            organization
+              ? html`<span class="selector">${prototypeIcon('selector')}</span>`
+              : nothing
+          }
+        </button>
+      </div>
+      ${this.renderActivePanel()}
+    `
+  }
+
+  protected override updated(): void {
+    const applicationSwitcher = this.renderRoot.querySelector<UniplatApplicationSwitcher>(
+      INTERNAL_APPLICATION_SWITCHER_TAG,
+    )
+    if (applicationSwitcher && applicationSwitcher !== this.configuredApplicationSwitcher) {
+      const workbench = this.workbenchConfig
+      if (workbench) {
+        applicationSwitcher.configure({
+          ...workbench,
+          presentation: 'embedded',
+          showOrganizationSelector: false,
+        })
+        this.configuredApplicationSwitcher = applicationSwitcher
+      }
+    }
+    if (!applicationSwitcher) this.configuredApplicationSwitcher = null
+
+    const userMenu = this.renderRoot.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    if (userMenu && userMenu !== this.configuredUserMenu && this.viewModel) {
+      userMenu.configure(this.toUserMenuConfig(this.viewModel))
+      this.configuredUserMenu = userMenu
+    }
+    if (!userMenu) this.configuredUserMenu = null
+
+    const onboarding = this.renderRoot.querySelector<InternalOrganizationOnboarding>(
+      INTERNAL_ORGANIZATION_ONBOARDING_TAG,
+    )
+    if (onboarding && onboarding !== this.configuredOrganizationOnboarding) {
+      const transport = this.organizationOnboardingTransport
+      if (transport) {
+        onboarding.configure({ transport, initialStep: 'method-selection' })
+        this.configuredOrganizationOnboarding = onboarding
+      }
+    }
+    if (!onboarding) this.configuredOrganizationOnboarding = null
+
+    const employeeInfoModal = this.renderRoot.querySelector<HTMLDialogElement>(
+      'dialog.employee-info-modal',
+    )
+    if (employeeInfoModal && !employeeInfoModal.open) {
+      try {
+        employeeInfoModal.showModal()
+      } catch {
+        employeeInfoModal.setAttribute('open', '')
+      }
+    }
+  }
+
+  private renderOrganizationLine(
+    organization: ResolvedAccountContextOrganization,
+    showVerificationStatus: boolean,
+  ) {
+    const status = showVerificationStatus ? organizationStatus(organization) : null
+    return html`
+      <span class="organization-line">
+        <span
+          class=${`organization-name${status === 'verified' || status === 'team' ? ' normal' : ''}`}
+          part="organization-name"
+          >${organization.name}</span
+        >
+        ${
+          status
+            ? html`<span
+                class=${`status-icon ${status}`}
+                part="verification-status"
+                title=${organizationStatusDescription(status)}
+                aria-label=${organizationStatusDescription(status)}
+                >${prototypeIcon(organizationStatusIcon(status))}</span
+              >`
+            : nothing
+        }
+      </span>
+    `
+  }
+
+  private renderActivePanel() {
+    if (this.activePanel === 'employee-info') return this.renderEmployeeInfoDialog()
+    if (this.activePanel === 'workbench' && this.workbenchConfig) {
+      return html`<div
+        class="floating-panel workbench-panel"
+        part="workbench-panel"
+        @application-selected=${this.closePanelAfterAction}
+      >
+        <uniplat-internal-application-switcher></uniplat-internal-application-switcher>
+      </div>`
+    }
+    if (this.activePanel === 'onboarding' && this.organizationOnboardingTransport) {
+      return html`<div
+        class="floating-panel onboarding-panel"
+        part="onboarding-panel"
+        @onboarding-skipped=${this.closePanelAfterAction}
+        @organization-created=${this.refreshAfterOrganizationCreated}
+      >
+        <uniplat-internal-organization-onboarding></uniplat-internal-organization-onboarding>
+      </div>`
+    }
+    if (this.activePanel === 'account') {
+      return html`<div
+        class="floating-panel account-panel"
+        part="account-panel"
+        @account-settings-requested=${this.handleAccountSettingsRequest}
+        @employee-info-requested=${this.openEmployeeInfo}
+        @organization-selected=${this.closePanelAfterAction}
+        @logout-requested=${this.closePanelAfterAction}
+      >
+        <uniplat-user-menu></uniplat-user-menu>
+      </div>`
+    }
+    return nothing
+  }
+
+  private renderEmployeeInfoDialog() {
+    const viewModel = this.viewModel
+    const organization = viewModel?.organization
+    if (!viewModel || !organization) return nothing
+    const employmentStatus = employeeEmploymentStatus(organization.employeeEmploymentStatus)
+    const employeeName = organization.employeeDisplayName || viewModel.displayName
+    return html`<dialog
+      class="employee-info-modal"
+      part="employee-info-modal"
+      @click=${this.closeEmployeeInfo}
+      @cancel=${this.closeEmployeeInfo}
+    >
+      <section
+        class="employee-info-dialog"
+        part="employee-info-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="uniplat-employee-info-title"
+        @click=${stopEventPropagation}
+      >
+        <header class="employee-info-header">
+          <span class="employee-info-icon" aria-hidden="true">${prototypeIcon('id-badge-2')}</span>
+          <span class="employee-info-heading">
+            <span class="employee-info-title" id="uniplat-employee-info-title">我的员工信息</span>
+            <span class="employee-info-company"
+              >${organization.companyName || organization.name}</span
+            >
+          </span>
+          <span class=${`employment-status ${employmentStatus.className}`}
+            >${employmentStatus.label}</span
+          >
+          <button
+            class="employee-info-close"
+            part="employee-info-close"
+            type="button"
+            aria-label="关闭员工信息"
+            @click=${this.closeEmployeeInfo}
+          >
+            ${prototypeIcon('x')}
+          </button>
+        </header>
+        <div class="employee-info-details" part="employee-info-details">
+          ${this.renderEmployeeInfoDetail('所属企业', organization.companyName || organization.name)}
+          ${this.renderEmployeeInfoDetail(
+            '部门',
+            this.employeeInfo === null ? '加载中…' : (this.employeeInfo.departmentName ?? '未设置'),
+          )}
+          ${this.renderEmployeeInfoDetail('姓名', employeeName)}
+          ${this.renderEmployeeInfoDetail('我的角色', organization.role || '成员')}
+        </div>
+        <footer class="employee-info-footer">
+          员工信息由企业管理员维护，如有误请联系管理员修改。
+        </footer>
+      </section>
+    </dialog>`
+  }
+
+  private renderEmployeeInfoDetail(label: string, value: string) {
+    return html`<div class="employee-info-detail">
+      <span class="employee-info-label">${label}</span>
+      <span class="employee-info-value">${value}</span>
+    </div>`
+  }
+
+  private toUserMenuConfig(viewModel: ResolvedAccountContext): UserMenuConfig {
+    return {
+      displayName: viewModel.displayName,
+      maskedMobile: viewModel.maskedMobile,
+      avatarText: viewModel.avatarText,
+      avatarUrl: viewModel.avatarUrl,
+      currentOrganizationId: viewModel.organization?.id,
+      organizationCount: viewModel.organizationCount,
+      organizations: viewModel.organizations.map((organization) => ({
+        id: organization.id,
+        name: organization.name,
+        type: organization.type === 'enterprise' ? 'company' : 'team',
+        avatarText: organization.avatarText,
+        role: organization.role,
+        memberCount: organization.memberCount ?? undefined,
+        verificationStatus: organization.verificationStatus ?? undefined,
+      })),
+      onCreateOrganization: this.openOrganizationOnboarding,
+    }
+  }
+
+  private needsAttention(organization: ResolvedAccountContextOrganization | null): boolean {
+    return (
+      organization?.type === 'enterprise' &&
+      ['rejected', 'expired'].includes(organization.verificationStatus ?? '')
+    )
+  }
+
+  private readonly toggleWorkbench = (): void => {
+    const organizationId = this.viewModel?.organization?.id
+    // Preserve the existing event contract for organization-bound workbenches.
+    // An oid=0 open application has no organization id to expose, but can still
+    // open its own global application panel.
+    if (organizationId) this.dispatchPublicEvent('workbench-requested', { organizationId })
+    if (this.workbenchConfig) {
+      this.activePanel = this.activePanel === 'workbench' ? null : 'workbench'
+    }
+  }
+
+  private readonly toggleAccountMenu = (): void => {
+    this.dispatchPublicEvent('account-menu-requested', {
+      organizationId: this.viewModel?.organization?.id ?? null,
+    })
+    this.activePanel = this.activePanel === 'account' ? null : 'account'
+  }
+
+  startOrganizationOnboarding(): void {
+    if (!this.organizationOnboardingTransport) {
+      this.dispatchPublicEvent('error', {
+        code: 'ONBOARDING_UNAVAILABLE',
+        message: '暂时无法启动创建团队或企业流程。',
+      })
+      return
+    }
+    this.activePanel = 'onboarding'
+  }
+
+  private readonly openOrganizationOnboarding = (): void => {
+    this.startOrganizationOnboarding()
+  }
+
+  private readonly refreshAfterOrganizationCreated = (): void => {
+    void this.refresh()
+  }
+
+  private readonly closePanelAfterAction = (): void => {
+    this.activePanel = null
+  }
+
+  private readonly openEmployeeInfo = (): void => {
+    if (!this.viewModel?.organization) {
+      this.activePanel = null
+      return
+    }
+    this.activePanel = 'employee-info'
+    this.employeeInfo = null
+    void this.loadCurrentEmployeeInfo()
+  }
+
+  private readonly closeEmployeeInfo = (): void => {
+    this.activePanel = null
+    this.employeeInfoGeneration += 1
+  }
+
+  private async loadCurrentEmployeeInfo(): Promise<void> {
+    const loader = this.accountTransport?.loadCurrentEmployeeInfo
+    if (!loader) {
+      this.employeeInfo = { departmentName: null }
+      return
+    }
+    const generation = ++this.employeeInfoGeneration
+    try {
+      const employeeInfo = normalizeEmployeeInfo(await loader())
+      if (generation !== this.employeeInfoGeneration || this.activePanel !== 'employee-info') return
+      this.employeeInfo = employeeInfo
+    } catch {
+      if (generation !== this.employeeInfoGeneration || this.activePanel !== 'employee-info') return
+      this.employeeInfo = { departmentName: null }
+    }
+  }
+
+  private readonly handleAccountSettingsRequest = (event: Event): void => {
+    const launcher = this.accountTransport?.launchAccountSettings
+    if (!launcher || this.accountSettingsNavigationInFlight) {
+      this.closePanelAfterAction()
+      return
+    }
+    event.stopPropagation()
+    this.activePanel = null
+    this.accountSettingsNavigationInFlight = true
+    const accountSettingsWindow = openPendingAccountSettingsWindow()
+    void this.openAccountSettings(launcher, accountSettingsWindow)
+  }
+
+  private async openAccountSettings(
+    launcher: NonNullable<AccountContextTransport['launchAccountSettings']>,
+    accountSettingsWindow: Window | null,
+  ): Promise<void> {
+    let pendingWindow = accountSettingsWindow
+    try {
+      const launch = await launcher(this.applicationName)
+      navigateToAccountSettings(launch.url, pendingWindow)
+      pendingWindow = null
+    } catch {
+      this.dispatchPublicEvent('error', {
+        code: 'ACCOUNT_SETTINGS_FAILED',
+        message: '个人账号设置暂时无法打开，请稍后重试。',
+      })
+    } finally {
+      closePendingAccountSettingsWindow(pendingWindow)
+      this.accountSettingsNavigationInFlight = false
+    }
+  }
+
+  private readonly hideBrokenAvatar = (event: Event): void => {
+    if (event.currentTarget instanceof HTMLImageElement) event.currentTarget.hidden = true
+  }
+
+  private readonly showLoadedAvatar = (event: Event): void => {
+    if (event.currentTarget instanceof HTMLImageElement) event.currentTarget.hidden = false
+  }
+
+  private readonly handleDocumentPointerDown = (event: PointerEvent): void => {
+    if (this.activePanel && !event.composedPath().includes(this)) this.activePanel = null
+  }
+
+  private readonly handleDocumentKeyDown = (event: KeyboardEvent): void => {
+    if (event.key !== 'Escape' || !this.activePanel) return
+    const activePanel = this.activePanel
+    this.activePanel = null
+    const selector = activePanel === 'workbench' ? '.workbench' : '.account'
+    void this.updateComplete.then(() =>
+      this.renderRoot.querySelector<HTMLButtonElement>(selector)?.focus(),
+    )
+  }
+
+  private dispatchPublicEvent<K extends keyof AccountContextEventMap>(
+    type: K,
+    detail: AccountContextEventMap[K]['detail'],
+  ): void {
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        detail,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+}
+
+function normalizeAccountTransport(
+  transport: AccountContextTransport | undefined,
+): AccountContextTransport | null {
+  if (transport === undefined) return null
+  if (!transport || typeof transport.load !== 'function') {
+    throw new TypeError('account-context transport requires load()')
+  }
+  if (
+    transport.switchOrganization !== undefined &&
+    typeof transport.switchOrganization !== 'function'
+  ) {
+    throw new TypeError('account-context transport switchOrganization must be a function')
+  }
+  if (
+    transport.loadCurrentEmployeeInfo !== undefined &&
+    typeof transport.loadCurrentEmployeeInfo !== 'function'
+  ) {
+    throw new TypeError('account-context transport loadCurrentEmployeeInfo must be a function')
+  }
+  if (
+    transport.launchAccountSettings !== undefined &&
+    typeof transport.launchAccountSettings !== 'function'
+  ) {
+    throw new TypeError('account-context transport launchAccountSettings must be a function')
+  }
+  return transport
+}
+
+function normalizeWorkbench(
+  workbench: ApplicationSwitcherConfig | undefined,
+): ApplicationSwitcherConfig | null {
+  if (workbench === undefined) return null
+  if (!workbench || typeof workbench.getAccessToken !== 'function') {
+    throw new TypeError('account-context workbench requires getAccessToken()')
+  }
+  return workbench
+}
+
+function normalizeOrganizationOnboardingTransport(
+  transport: OrganizationOnboardingTransport | undefined,
+): OrganizationOnboardingTransport | null {
+  if (transport === undefined) return null
+  if (
+    !transport ||
+    typeof transport.createEnterprise !== 'function' ||
+    typeof transport.createTeam !== 'function'
+  ) {
+    throw new TypeError(
+      'account-context organizationOnboarding requires createEnterprise() and createTeam()',
+    )
+  }
+  return transport
+}
+
+function normalizeOrganization(
+  organization: AccountContextOrganization | undefined,
+): ResolvedAccountContextOrganization | null {
+  if (organization === undefined) return null
+  return normalizeOrganizationEntry(organization, 'account-context organization')
+}
+
+function normalizeOrganizations(
+  organizations: readonly AccountContextOrganization[] | undefined,
+  current: ResolvedAccountContextOrganization | null,
+): readonly ResolvedAccountContextOrganization[] {
+  if (organizations === undefined) {
+    return current ? Object.freeze([current]) : Object.freeze([])
+  }
+  if (!Array.isArray(organizations)) {
+    throw new TypeError('account-context organizations must be an array')
+  }
+  const allIds = new Set<string>()
+  const normalized = organizations.map((organization, index) => {
+    const entry = normalizeOrganizationEntry(
+      organization,
+      `account-context organization ${index + 1}`,
+    )
+    if (allIds.has(entry.id)) throw new TypeError('account-context organization IDs must be unique')
+    allIds.add(entry.id)
+    return entry
+  })
+  if (current && !allIds.has(current.id)) {
+    throw new TypeError('account-context organizations must include the current organization')
+  }
+  return Object.freeze(normalized)
+}
+
+function normalizeOrganizationEntry(
+  organization: AccountContextOrganization,
+  label: string,
+): ResolvedAccountContextOrganization {
+  if (!organization || typeof organization !== 'object') {
+    throw new TypeError(`${label} must be an object`)
+  }
+  if (!['enterprise', 'team'].includes(organization.type)) {
+    throw new TypeError(`${label} type is invalid`)
+  }
+  if (organization.type === 'enterprise' && !organization.verificationStatus) {
+    throw new TypeError(`${label} enterprise verificationStatus is required`)
+  }
+  if (
+    organization.verificationStatus &&
+    !['unverified', 'pending', 'rejected', 'verified', 'expired'].includes(
+      organization.verificationStatus,
+    )
+  ) {
+    throw new TypeError(`${label} verificationStatus is invalid`)
+  }
+  const name = normalizeRequiredText(organization.name, 'Organization name', 100)
+  const employeeDisplayName = normalizeOptionalText(organization.employeeDisplayName, 80)
+  const employeeAvatarText = normalizeOptionalText(organization.employeeAvatarText, 4)
+  const employeeAvatarUrl = normalizeSafeImageUrl(
+    organization.employeeAvatarUrl,
+    'account-context employee avatar URL',
+  )
+  if (!employeeDisplayName && (employeeAvatarText || employeeAvatarUrl)) {
+    throw new TypeError(`${label} employeeDisplayName is required for an employee avatar`)
+  }
+  return Object.freeze({
+    id: normalizeRequiredText(organization.id, 'Organization id', 128),
+    name,
+    type: organization.type,
+    avatarText: normalizeOptionalText(organization.avatarText, 4) || Array.from(name)[0] || '组',
+    employeeDisplayName,
+    employeeAvatarText:
+      employeeAvatarText || (employeeDisplayName ? Array.from(employeeDisplayName)[0] || '员' : ''),
+    employeeAvatarUrl,
+    companyName: normalizeOptionalText(organization.companyName, 160),
+    employeeDepartmentName: normalizeOptionalText(organization.employeeDepartmentName, 100),
+    employeeEmploymentStatus: normalizeOptionalText(organization.employeeEmploymentStatus, 32),
+    verificationStatus:
+      organization.type === 'enterprise' ? (organization.verificationStatus ?? null) : null,
+    role: normalizeOptionalText(organization.role, 80),
+    memberCount: normalizeMemberCount(organization.memberCount),
+  })
+}
+
+function normalizeOrganizationCount(
+  value: unknown,
+  organization: ResolvedAccountContextOrganization | null,
+  providedCount: number,
+): number {
+  const fallback = providedCount || (organization ? 1 : 0)
+  if (value === undefined) return fallback
+  if (typeof value !== 'number' || !Number.isSafeInteger(value) || value !== fallback) {
+    throw new TypeError(
+      'account-context organizationCount must equal the projected organization count',
+    )
+  }
+  return value
+}
+
+function normalizeMemberCount(value: unknown): number | null {
+  if (value === undefined || value === null) return null
+  if (typeof value !== 'number' || !Number.isSafeInteger(value) || value < 0) {
+    throw new TypeError('account-context memberCount must be a non-negative integer')
+  }
+  return value
+}
+
+function normalizeEmployeeInfo(value: unknown): AccountContextEmployeeInfo {
+  if (!value || typeof value !== 'object') {
+    throw new TypeError('account-context employee info must be an object')
+  }
+  const source = value as { departmentName?: unknown }
+  return Object.freeze({
+    departmentName: normalizeOptionalText(source.departmentName, 100) || null,
+  })
+}
+
+function normalizeMaskedMobile(value: unknown): string {
+  const mobile = normalizeOptionalText(value, 40)
+  if (/^1[3-9]\d{9}$/.test(mobile)) {
+    throw new TypeError('account-context only accepts a masked mobile number')
+  }
+  return mobile
+}
+
+function normalizeRequiredText(value: unknown, label: string, maxLength: number): string {
+  const normalized = normalizeOptionalText(value, maxLength)
+  if (!normalized) throw new TypeError(`${label} is required`)
+  return normalized
+}
+
+function normalizeOptionalText(value: unknown, maxLength: number): string {
+  if (value === undefined || value === null) return ''
+  if (typeof value !== 'string') throw new TypeError('account-context text values must be strings')
+  const normalized = value.trim()
+  if (normalized.length > maxLength) throw new TypeError('account-context text value is too long')
+  return normalized
+}
+
+function organizationStatus(
+  organization: ResolvedAccountContextOrganization,
+): EnterpriseVerificationStatus | 'team' {
+  return organization.type === 'team' ? 'team' : (organization.verificationStatus ?? 'unverified')
+}
+
+function organizationStatusDescription(status: EnterpriseVerificationStatus | 'team'): string {
+  if (status === 'team') return '团队组织，无需认证'
+  if (status === 'verified') return '企业已认证'
+  if (status === 'pending') return '企业认证审核中'
+  if (status === 'rejected') return '企业认证未通过'
+  if (status === 'expired') return '企业认证已过期'
+  return '企业未认证'
+}
+
+function organizationStatusIcon(status: EnterpriseVerificationStatus | 'team'): PrototypeIconName {
+  if (status === 'team') return 'users'
+  if (status === 'verified') return 'discount-check-filled'
+  if (status === 'pending') return 'clock-hour-4'
+  if (status === 'rejected') return 'alert-triangle'
+  if (status === 'expired') return 'clock-exclamation'
+  return 'alert-circle'
+}
+
+function employeeEmploymentStatus(value: string): { className: string; label: string } {
+  if (value === 'inactive' || value === '离职') return { className: 'inactive', label: '非在职' }
+  return { className: 'active', label: '在职' }
+}
+
+function stopEventPropagation(event: Event): void {
+  event.stopPropagation()
+}
+
+function openPendingAccountSettingsWindow(): Window | null {
+  if (typeof window === 'undefined') return null
+  const accountSettingsWindow = window.open('about:blank', '_blank')
+  if (accountSettingsWindow) accountSettingsWindow.opener = null
+  return accountSettingsWindow
+}
+
+function closePendingAccountSettingsWindow(accountSettingsWindow: Window | null): void {
+  if (!accountSettingsWindow || accountSettingsWindow.closed) return
+  accountSettingsWindow.close()
+}
+
+function navigateToAccountSettings(url: string, accountSettingsWindow: Window | null): void {
+  if (typeof window === 'undefined') throw new Error('Account settings navigation is unavailable')
+  const target = new URL(url, window.location.href)
+  const ticket = new URLSearchParams(target.hash.slice(1)).get(
+    UNIPLAT_APPLICATION_TICKET_FRAGMENT_KEY,
+  )
+  if (
+    !['http:', 'https:'].includes(target.protocol) ||
+    target.username ||
+    target.password ||
+    !ticket
+  ) {
+    throw new Error('Account settings navigation is invalid')
+  }
+  if (accountSettingsWindow && !accountSettingsWindow.closed) {
+    accountSettingsWindow.location.replace(target.href)
+    return
+  }
+  const openedWindow = window.open(target.href, '_blank')
+  if (openedWindow) openedWindow.opener = null
+}