@csntgao/uni-base 0.1.0

package/packages/web-components/src/application-switcher.ts

@@ -0,0 +1,1103 @@
+import { LitElement, css, html, nothing, type PropertyValues } from 'lit'
+import { createMockApplicationSwitcherTransport } from './application-switcher-transport'
+import type {
+  ApplicationEntry,
+  ApplicationSwitcherConfig,
+  ApplicationSwitcherTransport,
+  OrganizationEntry,
+} from './application-switcher-transport'
+
+export type ApplicationSwitcherErrorCode =
+  | 'INVALID_CONFIGURATION'
+  | 'TOKEN_UNAVAILABLE'
+  | 'LOAD_FAILED'
+  | 'ORGANIZATION_SWITCH_FAILED'
+  | 'APPLICATION_SWITCH_FAILED'
+
+export interface ApplicationSwitcherErrorDetail {
+  code: ApplicationSwitcherErrorCode
+  message: string
+  recoverable: boolean
+}
+
+export interface ApplicationSwitcherEventMap {
+  'entries-loaded': CustomEvent<{ entries: readonly ApplicationEntry[] }>
+  'application-selected': CustomEvent<{ entry: ApplicationEntry }>
+  'organization-changed': CustomEvent<{ organization: OrganizationEntry }>
+  error: CustomEvent<ApplicationSwitcherErrorDetail>
+}
+
+const ACCENT_COLORS = ['#1a73e8', '#0f9d58', '#f9ab00', '#d93025', '#9334e6', '#12b5cb'] as const
+const APPLICATION_SLOT_COUNT = 9
+
+interface ResolvedApplicationSwitcherConfig {
+  getAccessToken(): Promise<string>
+  transport: ApplicationSwitcherTransport
+}
+
+export class UniplatApplicationSwitcher extends LitElement {
+  static override properties = {
+    entries: { state: true },
+    open: { state: true },
+    loading: { state: true },
+    loaded: { state: true },
+    visibleError: { state: true },
+    organizations: { state: true },
+    currentOrganizationId: { state: true },
+    organizationMenuOpen: { state: true },
+    switchingOrganization: { state: true },
+    switchingApplication: { state: true },
+    presentation: { state: true },
+    showOrganizationSelector: { state: true },
+  }
+
+  static override styles = css`
+    :host {
+      --uniplat-app-switcher-trigger-color: #3c4043;
+      --uniplat-app-switcher-trigger-hover: #f1f3f4;
+      --uniplat-app-switcher-panel-background: #f8fafd;
+      --uniplat-app-switcher-item-hover: #e9eef6;
+      --uniplat-app-switcher-text: #1f1f1f;
+      --uniplat-app-switcher-muted: #5f6368;
+      --uniplat-app-switcher-error: #b3261e;
+      --uniplat-app-switcher-font-family:
+        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      position: relative;
+      display: inline-block;
+      color: var(--uniplat-app-switcher-text);
+      font-family: var(--uniplat-app-switcher-font-family);
+      line-height: 1.4;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .launcher {
+      display: grid;
+      width: 40px;
+      height: 40px;
+      padding: 10px;
+      border: 0;
+      border-radius: 50%;
+      background: transparent;
+      color: var(--uniplat-app-switcher-trigger-color);
+      cursor: pointer;
+      place-items: center;
+    }
+
+    .launcher:hover,
+    .launcher:focus-visible,
+    .launcher[aria-expanded='true'] {
+      background: var(--uniplat-app-switcher-trigger-hover);
+    }
+
+    .launcher:focus-visible,
+    .application:focus-visible,
+    .retry:focus-visible,
+    .organization-trigger:focus-visible,
+    .organization-option:focus-visible {
+      outline: 2px solid #1a73e8;
+      outline-offset: 2px;
+    }
+
+    .waffle {
+      display: grid;
+      grid-template-columns: repeat(3, 4px);
+      gap: 3px;
+      width: 18px;
+      height: 18px;
+      place-content: center;
+    }
+
+    .dot {
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background: currentcolor;
+    }
+
+    .panel {
+      position: absolute;
+      z-index: 1000;
+      top: calc(100% + 10px);
+      right: 0;
+      width: min(328px, calc(100vw - 24px));
+      max-height: min(448px, calc(100vh - 88px));
+      padding: 18px 12px;
+      overflow-y: auto;
+      border: 1px solid rgb(60 64 67 / 12%);
+      border-radius: 24px;
+      background: var(--uniplat-app-switcher-panel-background);
+      box-shadow:
+        0 8px 24px rgb(60 64 67 / 20%),
+        0 1px 3px rgb(60 64 67 / 16%);
+      overscroll-behavior: contain;
+    }
+
+    .panel.embedded {
+      position: static;
+      top: auto;
+      right: auto;
+    }
+
+    .panel-content {
+      min-height: 292px;
+    }
+
+    .panel-content.has-organizations {
+      min-height: 373px;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      grid-template-rows: repeat(3, 92px);
+      grid-auto-rows: 92px;
+      gap: 8px 4px;
+      min-height: 292px;
+    }
+
+    .application-grid-shell {
+      position: relative;
+      height: 292px;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+
+    .application-empty-message {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      color: var(--uniplat-app-switcher-muted);
+      font-size: 13px;
+      pointer-events: none;
+      place-items: center;
+    }
+
+    .organization-selector {
+      position: relative;
+      margin: 0 4px 14px;
+      padding-bottom: 14px;
+      border-bottom: 1px solid rgb(60 64 67 / 12%);
+    }
+
+    .organization-trigger,
+    .organization-option {
+      width: 100%;
+      border: 0;
+      color: var(--uniplat-app-switcher-text);
+      cursor: pointer;
+      font: inherit;
+      text-align: left;
+    }
+
+    .organization-trigger {
+      display: grid;
+      grid-template-columns: 34px minmax(0, 1fr) 20px;
+      gap: 10px;
+      align-items: center;
+      min-height: 52px;
+      padding: 8px 10px;
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 1px 2px rgb(60 64 67 / 12%);
+    }
+
+    .organization-trigger:hover,
+    .organization-trigger[aria-expanded='true'],
+    .organization-option:hover,
+    .organization-option[aria-selected='true'] {
+      background: var(--uniplat-app-switcher-item-hover);
+    }
+
+    .organization-trigger:disabled,
+    .organization-option:disabled {
+      cursor: wait;
+      opacity: 0.65;
+    }
+
+    .organization-avatar {
+      display: grid;
+      width: 34px;
+      height: 34px;
+      border-radius: 10px;
+      background: #d2e3fc;
+      color: #174ea6;
+      font-size: 14px;
+      font-weight: 700;
+      place-items: center;
+    }
+
+    .organization-copy {
+      min-width: 0;
+    }
+
+    .organization-label {
+      display: block;
+      color: var(--uniplat-app-switcher-muted);
+      font-size: 11px;
+      line-height: 15px;
+    }
+
+    .organization-name {
+      display: block;
+      overflow: hidden;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .organization-chevron {
+      color: var(--uniplat-app-switcher-muted);
+      font-size: 18px;
+      text-align: center;
+      transition: transform 0.15s ease;
+    }
+
+    .organization-trigger[aria-expanded='true'] .organization-chevron {
+      transform: rotate(180deg);
+    }
+
+    .organization-menu {
+      position: absolute;
+      z-index: 2;
+      top: 58px;
+      right: 0;
+      left: 0;
+      display: grid;
+      gap: 2px;
+      padding: 4px;
+      border-radius: 14px;
+      background: #ffffff;
+      box-shadow: 0 2px 8px rgb(60 64 67 / 14%);
+    }
+
+    .organization-option {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 20px;
+      gap: 8px;
+      align-items: center;
+      min-height: 38px;
+      padding: 7px 10px;
+      border-radius: 10px;
+      background: transparent;
+      font-size: 13px;
+    }
+
+    .organization-option-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .organization-check {
+      color: #1a73e8;
+      font-weight: 700;
+      text-align: center;
+    }
+
+    .application {
+      display: grid;
+      height: 92px;
+      min-width: 0;
+      padding: 10px 6px 8px;
+      border-radius: 16px;
+      color: var(--uniplat-app-switcher-text);
+      text-align: center;
+      text-decoration: none;
+      place-items: center;
+    }
+
+    .application:hover {
+      background: var(--uniplat-app-switcher-item-hover);
+    }
+
+    .application[aria-disabled='true'] {
+      cursor: wait;
+      opacity: 0.65;
+      pointer-events: none;
+    }
+
+    .application-empty-slot {
+      height: 92px;
+      min-width: 0;
+      border-radius: 16px;
+      pointer-events: none;
+    }
+
+    .icon {
+      position: relative;
+      display: grid;
+      width: 48px;
+      height: 48px;
+      overflow: hidden;
+      border-radius: 14px;
+      background: var(--application-accent);
+      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%);
+      color: #ffffff;
+      font-size: 16px;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      place-items: center;
+    }
+
+    .icon img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: #ffffff;
+      object-fit: contain;
+    }
+
+    .name {
+      display: -webkit-box;
+      max-width: 100%;
+      margin-top: 8px;
+      overflow: hidden;
+      font-size: 13px;
+      line-height: 18px;
+      text-overflow: ellipsis;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+
+    .state {
+      display: grid;
+      min-height: 292px;
+      padding: 24px;
+      color: var(--uniplat-app-switcher-muted);
+      font-size: 13px;
+      text-align: center;
+      place-items: center;
+    }
+
+    .state.error {
+      gap: 12px;
+      color: var(--uniplat-app-switcher-error);
+    }
+
+    .spinner {
+      width: 24px;
+      height: 24px;
+      border: 3px solid #d2e3fc;
+      border-top-color: #1a73e8;
+      border-radius: 50%;
+      animation: rotate 0.8s linear infinite;
+    }
+
+    .retry {
+      min-height: 34px;
+      padding: 6px 14px;
+      border: 1px solid #dadce0;
+      border-radius: 17px;
+      background: #ffffff;
+      color: #1a73e8;
+      cursor: pointer;
+      font: inherit;
+      font-weight: 600;
+    }
+
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    @keyframes rotate {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner,
+      .organization-chevron {
+        animation: none;
+        transition: none;
+      }
+    }
+  `
+
+  declare private entries: readonly ApplicationEntry[]
+  declare private open: boolean
+  declare private loading: boolean
+  declare private loaded: boolean
+  declare private visibleError: string
+  declare private organizations: readonly OrganizationEntry[]
+  declare private currentOrganizationId: string
+  declare private organizationMenuOpen: boolean
+  declare private switchingOrganization: boolean
+  declare private switchingApplication: boolean
+  declare private presentation: 'standalone' | 'embedded'
+  declare private showOrganizationSelector: boolean
+
+  private config: ResolvedApplicationSwitcherConfig | null = null
+  private loadGeneration = 0
+
+  constructor() {
+    super()
+    this.entries = []
+    this.open = false
+    this.loading = false
+    this.loaded = false
+    this.visibleError = ''
+    this.organizations = []
+    this.currentOrganizationId = ''
+    this.organizationMenuOpen = false
+    this.switchingOrganization = false
+    this.switchingApplication = false
+    this.presentation = 'standalone'
+    this.showOrganizationSelector = true
+  }
+
+  configure(config: ApplicationSwitcherConfig): void {
+    if (!config || typeof config.getAccessToken !== 'function') {
+      throw new TypeError('application-switcher requires getAccessToken()')
+    }
+    this.config = {
+      getAccessToken: config.getAccessToken,
+      transport: config.transport ?? createMockApplicationSwitcherTransport(),
+    }
+    this.presentation = config.presentation === 'embedded' ? 'embedded' : 'standalone'
+    this.showOrganizationSelector =
+      config.showOrganizationSelector ?? this.presentation === 'standalone'
+    this.loadGeneration += 1
+    this.entries = []
+    this.loading = false
+    this.loaded = false
+    this.visibleError = ''
+    this.organizations = []
+    this.currentOrganizationId = ''
+    this.organizationMenuOpen = false
+    this.switchingOrganization = false
+    this.switchingApplication = false
+    if (this.isConnected) void this.refresh()
+  }
+
+  async refresh(): Promise<void> {
+    const config = this.config
+    if (!config || this.loading || this.switchingOrganization || this.switchingApplication) return
+    const generation = ++this.loadGeneration
+    this.loading = true
+    this.visibleError = ''
+    let accessToken = ''
+
+    try {
+      accessToken = (await config.getAccessToken()).trim()
+      if (!accessToken) {
+        this.handleError('TOKEN_UNAVAILABLE', '无法获取应用入口凭证。', true)
+        return
+      }
+      if (!this.isCurrentLoad(generation)) return
+      const organizationRequest =
+        this.showOrganizationSelector && config.transport.listOrganizations
+          ? config.transport.listOrganizations(accessToken)
+          : Promise.resolve(null)
+      const [result, organizationResult] = await Promise.all([
+        config.transport.listApplications(accessToken),
+        organizationRequest,
+      ])
+      if (!this.isCurrentLoad(generation)) return
+      const entries = sanitizeEntries(result, accessToken)
+      const organizationState = sanitizeOrganizations(organizationResult, accessToken)
+      accessToken = ''
+      this.entries = entries
+      this.organizations = organizationState.organizations
+      this.currentOrganizationId = organizationState.currentOrganizationId
+      this.organizationMenuOpen = false
+      this.loaded = true
+      this.dispatchPublicEvent('entries-loaded', { entries: [...entries] })
+    } catch {
+      accessToken = ''
+      if (this.isCurrentLoad(generation)) {
+        this.handleError('LOAD_FAILED', '应用入口加载失败，请稍后重试。', true)
+      }
+    } finally {
+      accessToken = ''
+      if (this.isCurrentLoad(generation)) this.loading = false
+    }
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    document.addEventListener('pointerdown', this.handleDocumentPointerDown, true)
+    document.addEventListener('keydown', this.handleDocumentKeyDown)
+    if (this.config && !this.loaded) void this.refresh()
+  }
+
+  override disconnectedCallback(): void {
+    this.loadGeneration += 1
+    this.open = false
+    this.loading = false
+    this.organizationMenuOpen = false
+    this.switchingOrganization = false
+    this.switchingApplication = false
+    document.removeEventListener('pointerdown', this.handleDocumentPointerDown, true)
+    document.removeEventListener('keydown', this.handleDocumentKeyDown)
+    super.disconnectedCallback()
+  }
+
+  override render() {
+    const embedded = this.presentation === 'embedded'
+    const panelVisible = embedded || this.open
+    return html`
+      ${
+        embedded
+          ? nothing
+          : html`<button
+              class="launcher"
+              part="trigger"
+              type="button"
+              aria-label="打开应用菜单"
+              aria-haspopup="menu"
+              aria-expanded=${String(this.open)}
+              @click=${this.togglePanel}
+            >
+              <span class="waffle" part="trigger-icon" aria-hidden="true">
+                ${Array.from({ length: 9 }, () => html`<span class="dot"></span>`)}
+              </span>
+            </button>`
+      }
+      ${
+        panelVisible
+          ? html`
+              <section
+                class=${`panel${embedded ? ' embedded' : ''}`}
+                part="panel"
+                aria-label="应用入口"
+              >
+                <span class="visually-hidden">应用入口</span>
+                <div
+                  class=${`panel-content${
+                    this.showOrganizationSelector && this.organizations.length > 0
+                      ? ' has-organizations'
+                      : ''
+                  }`}
+                >
+                  ${this.renderPanelContent()}
+                </div>
+              </section>
+            `
+          : nothing
+      }
+    `
+  }
+
+  protected override updated(changed: PropertyValues): void {
+    if (changed.has('open') && this.open) {
+      this.renderRoot
+        .querySelector<HTMLElement>('.organization-trigger, .application, .retry')
+        ?.focus()
+    }
+    if (changed.has('organizationMenuOpen') && this.organizationMenuOpen) {
+      this.renderRoot
+        .querySelector<HTMLElement>(
+          '.organization-option[aria-selected="true"], .organization-option',
+        )
+        ?.focus()
+    }
+  }
+
+  private renderPanelContent() {
+    if (this.loading) {
+      return html`
+        <div class="state" part="loading" aria-live="polite">
+          <span class="spinner" aria-hidden="true"></span>
+          <span class="visually-hidden">正在加载应用入口</span>
+        </div>
+      `
+    }
+    if (this.visibleError) {
+      return html`
+        <div class="state error" part="error" role="alert">
+          <span>${this.visibleError}</span>
+          <button class="retry" part="retry-button" type="button" @click=${this.refresh}>
+            重试
+          </button>
+        </div>
+      `
+    }
+    if (!this.config) {
+      return html`<div class="state" part="empty">请先配置应用入口</div>`
+    }
+    return html`
+      ${this.showOrganizationSelector ? this.renderOrganizationSelector() : nothing}
+      ${this.renderApplicationGrid()}
+    `
+  }
+
+  private renderApplicationGrid() {
+    const slotCount = Math.max(APPLICATION_SLOT_COUNT, Math.ceil(this.entries.length / 3) * 3)
+    const rowCount = slotCount / 3
+    const gridHeight = rowCount * 92 + (rowCount - 1) * 8
+    return html`
+      <div class="application-grid-shell">
+        <div
+          class="grid"
+          part="application-grid"
+          role="menu"
+          style=${`height: ${gridHeight}px`}
+          aria-label=${this.entries.length === 0 ? '应用入口，暂无可用应用' : '应用入口'}
+        >
+          ${Array.from({ length: slotCount }, (_, index) => {
+            const entry = this.entries[index]
+            return entry
+              ? this.renderEntry(entry)
+              : html`<span
+                  class="application-empty-slot"
+                  part="application-empty-slot"
+                  data-slot-index=${String(index)}
+                  aria-hidden="true"
+                ></span>`
+          })}
+        </div>
+        ${
+          this.entries.length === 0
+            ? html`<div class="application-empty-message" part="empty" role="status">
+                暂无可用应用
+              </div>`
+            : nothing
+        }
+      </div>
+    `
+  }
+
+  private renderOrganizationSelector() {
+    if (this.organizations.length === 0) return nothing
+    const currentOrganization = this.currentOrganization
+
+    return html`
+      <div class="organization-selector" part="organization-selector">
+        <button
+          class="organization-trigger"
+          part="organization-trigger"
+          type="button"
+          aria-haspopup="listbox"
+          aria-expanded=${String(this.organizationMenuOpen)}
+          aria-label=${`切换组织，当前组织：${currentOrganization?.name ?? '未选择'}`}
+          ?disabled=${this.switchingOrganization}
+          @click=${this.toggleOrganizationMenu}
+        >
+          <span class="organization-avatar" part="organization-icon" aria-hidden="true">
+            ${organizationInitial(currentOrganization?.name ?? '')}
+          </span>
+          <span class="organization-copy">
+            <span class="organization-label">当前组织</span>
+            <span class="organization-name" part="organization-name">
+              ${currentOrganization?.name ?? '请选择组织'}
+            </span>
+          </span>
+          <span class="organization-chevron" aria-hidden="true">⌄</span>
+        </button>
+        ${
+          this.organizationMenuOpen
+            ? html`
+                <div
+                  class="organization-menu"
+                  part="organization-list"
+                  role="listbox"
+                  aria-label="选择组织"
+                >
+                  ${this.organizations.map((organization) =>
+                    this.renderOrganizationOption(organization),
+                  )}
+                </div>
+              `
+            : nothing
+        }
+      </div>
+    `
+  }
+
+  private renderOrganizationOption(organization: OrganizationEntry) {
+    const selected = organization.id === this.currentOrganizationId
+    return html`
+      <button
+        class="organization-option"
+        part="organization-option"
+        type="button"
+        role="option"
+        aria-selected=${String(selected)}
+        data-organization-id=${organization.id}
+        ?disabled=${this.switchingOrganization}
+        @click=${() => this.selectOrganization(organization)}
+      >
+        <span class="organization-option-name">${organization.name}</span>
+        <span class="organization-check" aria-hidden="true">${selected ? '✓' : nothing}</span>
+      </button>
+    `
+  }
+
+  private renderEntry(entry: ApplicationEntry) {
+    const requiresIdentitySwitch = Boolean(this.config?.transport.switchApplication)
+    return html`
+      <a
+        class="application"
+        part="application"
+        role="menuitem"
+        href=${requiresIdentitySwitch ? nothing : entry.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        tabindex=${requiresIdentitySwitch ? '0' : nothing}
+        aria-disabled=${String(this.switchingApplication)}
+        title=${entry.description || entry.name}
+        data-application-id=${entry.id}
+        @click=${(event: MouseEvent) => this.selectEntry(event, entry)}
+        @auxclick=${(event: MouseEvent) => this.selectEntry(event, entry)}
+        @keydown=${(event: KeyboardEvent) => this.handleEntryKeyDown(event)}
+      >
+        <span
+          class="icon"
+          part="application-icon"
+          style=${`--application-accent: ${applicationAccent(entry.id)}`}
+          aria-hidden="true"
+        >
+          ${applicationInitials(entry.name)}
+          ${
+            entry.iconUrl
+              ? html`<img src=${entry.iconUrl} alt="" @error=${hideBrokenImage} />`
+              : nothing
+          }
+        </span>
+        <span class="name" part="application-name">${entry.name}</span>
+      </a>
+    `
+  }
+
+  private readonly togglePanel = (): void => {
+    this.open = !this.open
+    if (!this.open) this.organizationMenuOpen = false
+  }
+
+  private readonly toggleOrganizationMenu = (): void => {
+    if (!this.switchingOrganization) this.organizationMenuOpen = !this.organizationMenuOpen
+  }
+
+  private readonly selectEntry = (event: MouseEvent, entry: ApplicationEntry): void => {
+    const switchApplication = this.config?.transport.switchApplication
+    if (!switchApplication) {
+      const navigate = this.dispatchPublicEvent(
+        'application-selected',
+        { entry: { ...entry } },
+        true,
+      )
+      if (!navigate) event.preventDefault()
+      this.organizationMenuOpen = false
+      this.open = false
+      return
+    }
+
+    event.preventDefault()
+    if (event.type === 'auxclick' && event.button !== 1) return
+    if (this.switchingApplication) return
+    const applicationWindow = openPendingApplicationWindow()
+    void this.switchAndOpenApplication(entry, applicationWindow)
+  }
+
+  private readonly handleEntryKeyDown = (event: KeyboardEvent): void => {
+    if (!this.config?.transport.switchApplication || !['Enter', ' '].includes(event.key)) return
+    event.preventDefault()
+    ;(event.currentTarget as HTMLElement).click()
+  }
+
+  private async switchAndOpenApplication(
+    entry: ApplicationEntry,
+    pendingWindow: Window | null,
+  ): Promise<void> {
+    const config = this.config
+    if (!config?.transport.switchApplication || this.switchingApplication) {
+      closePendingApplicationWindow(pendingWindow)
+      return
+    }
+
+    const generation = ++this.loadGeneration
+    this.loading = false
+    this.switchingApplication = true
+    this.visibleError = ''
+    let accessToken = ''
+    let applicationWindow = pendingWindow
+
+    try {
+      accessToken = (await config.getAccessToken()).trim()
+      if (!accessToken) {
+        this.handleError('TOKEN_UNAVAILABLE', '无法获取应用切换凭证。', true)
+        return
+      }
+      if (!this.isCurrentLoad(generation)) return
+      const launchResult = await config.transport.switchApplication(accessToken, entry.id)
+      if (!this.isCurrentLoad(generation)) return
+      const navigationUrl = resolveApplicationNavigationUrl(launchResult, entry.url, accessToken)
+      accessToken = ''
+      this.organizationMenuOpen = false
+      this.open = false
+      const navigate = this.dispatchPublicEvent(
+        'application-selected',
+        { entry: { ...entry } },
+        true,
+      )
+      if (navigate) {
+        navigateToApplication(navigationUrl, applicationWindow)
+        applicationWindow = null
+      }
+    } catch {
+      accessToken = ''
+      if (this.isCurrentLoad(generation)) {
+        this.handleError('APPLICATION_SWITCH_FAILED', '应用切换失败，请稍后重试。', true)
+      }
+    } finally {
+      accessToken = ''
+      closePendingApplicationWindow(applicationWindow)
+      if (this.isCurrentLoad(generation)) this.switchingApplication = false
+    }
+  }
+
+  private async selectOrganization(organization: OrganizationEntry): Promise<void> {
+    if (organization.id === this.currentOrganizationId) {
+      this.organizationMenuOpen = false
+      return
+    }
+
+    const config = this.config
+    if (!config || this.switchingOrganization || this.switchingApplication) return
+    if (!config.transport.switchOrganization) {
+      this.handleError('ORGANIZATION_SWITCH_FAILED', '当前接入未提供组织切换能力。', false)
+      return
+    }
+
+    const generation = ++this.loadGeneration
+    this.loading = false
+    this.switchingOrganization = true
+    this.visibleError = ''
+    let accessToken = ''
+    let switched = false
+
+    try {
+      accessToken = (await config.getAccessToken()).trim()
+      if (!accessToken) {
+        this.handleError('TOKEN_UNAVAILABLE', '无法获取组织切换凭证。', true)
+        return
+      }
+      if (!this.isCurrentLoad(generation)) return
+      await config.transport.switchOrganization(accessToken, organization.id)
+      if (!this.isCurrentLoad(generation)) return
+      accessToken = ''
+      this.currentOrganizationId = organization.id
+      this.organizationMenuOpen = false
+      this.dispatchPublicEvent('organization-changed', { organization: { ...organization } })
+      this.loaded = false
+      switched = true
+    } catch {
+      accessToken = ''
+      if (this.isCurrentLoad(generation)) {
+        this.handleError('ORGANIZATION_SWITCH_FAILED', '组织切换失败，请稍后重试。', true)
+      }
+    } finally {
+      accessToken = ''
+      if (this.isCurrentLoad(generation)) this.switchingOrganization = false
+    }
+
+    if (switched && this.isCurrentLoad(generation)) await this.refresh()
+  }
+
+  private readonly handleDocumentPointerDown = (event: PointerEvent): void => {
+    if (this.open && !event.composedPath().includes(this)) {
+      this.organizationMenuOpen = false
+      this.open = false
+    }
+  }
+
+  private readonly handleDocumentKeyDown = (event: KeyboardEvent): void => {
+    if (event.key !== 'Escape' || !this.open) return
+    if (this.organizationMenuOpen) {
+      this.organizationMenuOpen = false
+      this.renderRoot.querySelector<HTMLButtonElement>('.organization-trigger')?.focus()
+      return
+    }
+    this.open = false
+    this.renderRoot.querySelector<HTMLButtonElement>('.launcher')?.focus()
+  }
+
+  private handleError(
+    code: ApplicationSwitcherErrorCode,
+    message: string,
+    recoverable: boolean,
+  ): void {
+    this.entries = []
+    this.organizations = []
+    this.currentOrganizationId = ''
+    this.organizationMenuOpen = false
+    this.loaded = false
+    this.visibleError = message
+    this.dispatchPublicEvent('error', { code, message, recoverable })
+  }
+
+  private dispatchPublicEvent<K extends keyof ApplicationSwitcherEventMap>(
+    type: K,
+    detail: ApplicationSwitcherEventMap[K]['detail'],
+    cancelable = false,
+  ): boolean {
+    return this.dispatchEvent(
+      new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable }),
+    )
+  }
+
+  private isCurrentLoad(generation: number): boolean {
+    return this.isConnected && generation === this.loadGeneration
+  }
+
+  private get currentOrganization(): OrganizationEntry | undefined {
+    return this.organizations.find((organization) => organization.id === this.currentOrganizationId)
+  }
+}
+
+function sanitizeEntries(rawEntries: unknown, accessToken: string): ApplicationEntry[] {
+  if (!Array.isArray(rawEntries)) return []
+  const entries: ApplicationEntry[] = []
+  const ids = new Set<string>()
+  for (const candidate of rawEntries) {
+    const record = asRecord(candidate)
+    const id = text(record.id).trim()
+    const name = text(record.name).trim()
+    const url = safeUrl(text(record.url), accessToken)
+    if (!id || ids.has(id) || !name || !url || containsToken(id, accessToken)) continue
+    if (containsToken(name, accessToken)) continue
+
+    const entry: ApplicationEntry = { id, name, url }
+    const iconUrl = safeUrl(text(record.iconUrl), accessToken)
+    const description = text(record.description).trim()
+    if (iconUrl) entry.iconUrl = iconUrl
+    if (description && !containsToken(description, accessToken)) entry.description = description
+    if (record.openMode === 'blank') entry.openMode = 'blank'
+    ids.add(id)
+    entries.push(entry)
+  }
+  return entries
+}
+
+function sanitizeOrganizations(
+  rawResult: unknown,
+  accessToken: string,
+): { organizations: OrganizationEntry[]; currentOrganizationId: string } {
+  const result = asRecord(rawResult)
+  if (!Array.isArray(result.organizations)) {
+    return { organizations: [], currentOrganizationId: '' }
+  }
+
+  const organizations: OrganizationEntry[] = []
+  const ids = new Set<string>()
+  for (const candidate of result.organizations) {
+    const record = asRecord(candidate)
+    const id = text(record.id).trim()
+    const name = text(record.name).trim()
+    if (
+      !id ||
+      !name ||
+      ids.has(id) ||
+      containsToken(id, accessToken) ||
+      containsToken(name, accessToken)
+    ) {
+      continue
+    }
+    organizations.push({ id, name })
+    ids.add(id)
+  }
+
+  const requestedCurrentId = text(result.currentOrganizationId).trim()
+  const currentOrganizationId = organizations.some(
+    (organization) => organization.id === requestedCurrentId,
+  )
+    ? requestedCurrentId
+    : ''
+
+  return { organizations, currentOrganizationId }
+}
+
+function safeUrl(rawValue: string, accessToken: string): string {
+  const value = rawValue.trim()
+  if (!value || containsToken(value, accessToken)) return ''
+  const baseUrl = typeof document === 'undefined' ? 'https://localhost/' : document.baseURI
+  try {
+    const url = new URL(value, baseUrl)
+    if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) return ''
+    return url.href
+  } catch {
+    return ''
+  }
+}
+
+function containsToken(value: string, accessToken: string): boolean {
+  return Boolean(accessToken && value.includes(accessToken))
+}
+
+function applicationInitials(name: string): string {
+  const characters = Array.from(name.replace(/\s+/g, ''))
+  return characters.slice(0, 2).join('').toUpperCase()
+}
+
+function organizationInitial(name: string): string {
+  return Array.from(name.trim())[0]?.toUpperCase() ?? '组'
+}
+
+function applicationAccent(id: string): string {
+  let hash = 0
+  for (const character of id) hash = (hash * 31 + character.charCodeAt(0)) >>> 0
+  return ACCENT_COLORS[hash % ACCENT_COLORS.length] ?? ACCENT_COLORS[0]
+}
+
+function hideBrokenImage(event: Event): void {
+  ;(event.currentTarget as HTMLImageElement).hidden = true
+}
+
+function openPendingApplicationWindow(): Window | null {
+  if (typeof window === 'undefined') return null
+  const applicationWindow = window.open('about:blank', '_blank')
+  if (applicationWindow) applicationWindow.opener = null
+  return applicationWindow
+}
+
+function closePendingApplicationWindow(applicationWindow: Window | null): void {
+  if (!applicationWindow || applicationWindow.closed) return
+  applicationWindow.close()
+}
+
+function resolveApplicationNavigationUrl(
+  result: unknown,
+  fallbackUrl: string,
+  accessToken: string,
+): string {
+  if (result === undefined) return fallbackUrl
+  const url = safeUrl(text(asRecord(result).url), accessToken)
+  if (!url) throw new Error('Application navigation URL is invalid')
+  return url
+}
+
+function navigateToApplication(url: string, applicationWindow: Window | null): void {
+  if (typeof window === 'undefined') return
+  if (applicationWindow && !applicationWindow.closed) {
+    try {
+      applicationWindow.location.replace(url)
+      return
+    } catch {
+      applicationWindow.close()
+    }
+  }
+  window.open(url, '_blank', 'noopener,noreferrer')
+}
+
+function asRecord(value: unknown): Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {}
+}
+
+function text(value: unknown): string {
+  return typeof value === 'string' ? value : ''
+}