@csntgao/uni-base 0.1.0

package/packages/web-components/src/user-menu.ts

@@ -0,0 +1,880 @@
+import { LitElement, css, html, nothing } from 'lit'
+import { prototypeIcon, type PrototypeIconName } from './prototype-icons'
+import { normalizeSafeImageUrl } from './safe-image-url'
+
+export type UserMenuOrganizationType = 'company' | 'team'
+
+export interface UserMenuOrganization {
+  id: string
+  name: string
+  type: UserMenuOrganizationType
+  avatarText?: string
+  role?: string
+  memberCount?: number
+  verificationStatus?: 'unverified' | 'pending' | 'rejected' | 'verified' | 'expired'
+}
+
+export interface UserMenuConfig {
+  displayName: string
+  maskedMobile?: string
+  avatarText?: string
+  avatarUrl?: string
+  organizations: readonly UserMenuOrganization[]
+  currentOrganizationId?: string
+  organizationCount?: number
+  accountSettingsLabel?: string
+  employeeInfoLabel?: string
+  organizationSectionLabel?: string
+  createOrganizationLabel?: string
+  logoutLabel?: string
+  /** Internal account-context hook. Public standalone usage remains event-based. */
+  onCreateOrganization?: () => void
+}
+
+export interface UserMenuEventMap {
+  'account-settings-requested': CustomEvent<Record<string, never>>
+  'employee-info-requested': CustomEvent<{ organizationId: string | null }>
+  'organization-selected': CustomEvent<{ organizationId: string }>
+  'organization-create-requested': CustomEvent<Record<string, never>>
+  'logout-requested': CustomEvent<Record<string, never>>
+}
+
+interface ResolvedUserMenuOrganization {
+  id: string
+  name: string
+  type: UserMenuOrganizationType
+  avatarText: string
+  role: string
+  memberCount: number | null
+  verificationStatus: 'unverified' | 'pending' | 'rejected' | 'verified' | 'expired' | null
+}
+
+interface UserMenuViewModel {
+  displayName: string
+  maskedMobile: string
+  avatarText: string
+  avatarUrl: string
+  organizations: readonly ResolvedUserMenuOrganization[]
+  currentOrganizationId: string
+  organizationCount: number
+  accountSettingsLabel: string
+  employeeInfoLabel: string
+  organizationSectionLabel: string
+  createOrganizationLabel: string
+  logoutLabel: string
+}
+
+const DEFAULT_LABELS = {
+  accountSettings: '个人账号设置',
+  employeeInfo: '我的员工信息',
+  organizationSection: '切换企业 / 团队',
+  createOrganization: '创建企业 / 团队',
+  logout: '退出登录',
+} as const
+
+export class UniplatUserMenu extends LitElement {
+  static override properties = {
+    viewModel: { state: true },
+  }
+
+  static override styles = css`
+    :host {
+      --uniplat-user-menu-width: 330px;
+      --uniplat-user-menu-primary: #2e6bf5;
+      --uniplat-user-menu-text: #25303f;
+      --uniplat-user-menu-muted: #8b98a6;
+      --uniplat-user-menu-border: #e4ebf3;
+      --uniplat-user-menu-surface: #ffffff;
+      --uniplat-user-menu-hover: #f4f7fc;
+      --uniplat-user-menu-selected: #f0f5ff;
+      --uniplat-user-menu-list-max-height: 288px;
+      --uniplat-user-menu-font-family:
+        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      display: block;
+      width: var(--uniplat-user-menu-width);
+      max-width: 100%;
+      color: var(--uniplat-user-menu-text);
+      font-family: var(--uniplat-user-menu-font-family);
+      line-height: 1.4;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    button {
+      appearance: none;
+      font: inherit;
+    }
+
+    .panel {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid var(--uniplat-user-menu-border);
+      border-radius: 14px;
+      background: var(--uniplat-user-menu-surface);
+      box-shadow: 0 18px 44px rgba(20, 40, 80, 0.16);
+    }
+
+    .profile {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 10px 12px;
+      border-bottom: 1px solid #edf1f6;
+    }
+
+    .avatar {
+      position: relative;
+      display: grid;
+      place-items: center;
+      flex: 0 0 auto;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      color: #ffffff;
+      background: #233043;
+      font-size: 15px;
+      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;
+    }
+
+    .profile-copy,
+    .action-copy,
+    .organization-copy {
+      min-width: 0;
+      flex: 1;
+    }
+
+    .profile-name {
+      display: block;
+      overflow: hidden;
+      color: #182634;
+      font-size: 14.5px;
+      font-weight: 700;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .profile-mobile {
+      display: block;
+      margin-top: 2px;
+      color: var(--uniplat-user-menu-muted);
+      font-size: 11.5px;
+    }
+
+    .menu-action,
+    .organization,
+    .footer-action {
+      width: 100%;
+      border: 0;
+      color: inherit;
+      background: transparent;
+      cursor: pointer;
+      text-align: left;
+    }
+
+    .menu-action:hover,
+    .organization:hover,
+    .footer-action:hover {
+      background: var(--uniplat-user-menu-hover);
+    }
+
+    .menu-action:focus-visible,
+    .organization:focus-visible,
+    .footer-action:focus-visible {
+      outline: 2px solid color-mix(in srgb, var(--uniplat-user-menu-primary) 55%, transparent);
+      outline-offset: -2px;
+    }
+
+    .menu-action-icon,
+    .menu-action-chevron,
+    .check,
+    .footer-icon {
+      display: grid;
+      place-items: center;
+      flex: 0 0 auto;
+    }
+
+    .menu-actions {
+      display: flex;
+      flex-direction: column;
+      padding: 6px 0 8px;
+      border-bottom: 1px solid #edf1f6;
+    }
+
+    .menu-action {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      padding: 9px 10px;
+      border: 0;
+      border-radius: 9px;
+      color: inherit;
+      background: transparent;
+      cursor: pointer;
+      text-align: left;
+    }
+
+    .menu-action-icon {
+      width: 17px;
+      height: 17px;
+      color: var(--uniplat-user-menu-primary);
+    }
+
+    .menu-action-title {
+      display: block;
+      overflow: hidden;
+      color: #25303f;
+      font-size: 13.5px;
+      font-weight: 600;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .menu-action-subtitle {
+      display: block;
+      margin-top: 1px;
+      overflow: hidden;
+      color: #98a4b2;
+      font-size: 11.5px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .menu-action-chevron {
+      width: 15px;
+      height: 15px;
+      color: #c7d1dd;
+    }
+
+    .section-title {
+      padding: 10px 10px 6px;
+      color: #98a4b2;
+      font-size: 11.5px;
+      font-weight: 700;
+      letter-spacing: 1px;
+    }
+
+    .organization-list {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      max-height: var(--uniplat-user-menu-list-max-height);
+      padding: 0 2px 4px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    .organization {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 9px 10px;
+      border: 1.5px solid var(--uniplat-user-menu-border);
+      border-radius: 10px;
+      background: #ffffff;
+    }
+
+    .organization.selected {
+      border-color: var(--uniplat-user-menu-primary);
+      background: #f7faff;
+    }
+
+    .organization.selected:hover {
+      background: #f7faff;
+    }
+
+    .organization-icon {
+      display: grid;
+      place-items: center;
+      width: 30px;
+      height: 30px;
+      flex: none;
+      border-radius: 9px;
+      color: #5a6673;
+      background: #edf1f6;
+      font-size: 12.5px;
+      font-weight: 800;
+    }
+
+    .organization-icon svg {
+      width: 15px;
+      height: 15px;
+    }
+
+    .organization-type.company {
+      color: var(--uniplat-user-menu-primary);
+      background: #e6eefe;
+    }
+
+    .organization-type.team {
+      color: #0ca678;
+      background: #e3f7ef;
+    }
+
+    .selected .organization-icon.company {
+      color: var(--uniplat-user-menu-primary);
+      background: #e6eefe;
+    }
+
+    .selected .organization-icon.team {
+      color: #0ca678;
+      background: #e3f7ef;
+    }
+
+    .organization-heading {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      min-width: 0;
+    }
+
+    .verification-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      flex: 0 0 auto;
+      padding: 1px 5px;
+      border-radius: 4px;
+      font-size: 9.5px;
+      font-weight: 700;
+      white-space: nowrap;
+    }
+
+    .verification-status svg {
+      width: 11px;
+      height: 11px;
+    }
+
+    .verification-status.verified {
+      color: #0ca678;
+      background: #e3f7ef;
+    }
+
+    .verification-status.pending {
+      color: #1971c2;
+      background: #e2effb;
+    }
+
+    .verification-status.unverified,
+    .verification-status.expired {
+      color: #e8590c;
+      background: #fff4e2;
+    }
+
+    .verification-status.rejected {
+      color: #e5484d;
+      background: #fdeced;
+    }
+
+    .verification-status.team {
+      color: #5a6673;
+      background: #edf1f6;
+    }
+
+    .organization-name {
+      min-width: 0;
+      flex: 1;
+      overflow: hidden;
+      font-size: 13px;
+      font-weight: 700;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .organization-type {
+      flex: 0 0 auto;
+      padding: 0 5px;
+      border-radius: 4px;
+      font-size: 9.5px;
+      font-weight: 700;
+    }
+
+    .organization-meta {
+      display: block;
+      margin-top: 2px;
+      overflow: hidden;
+      color: var(--uniplat-user-menu-muted);
+      font-size: 11px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .organization-meta.attention {
+      color: #e8590c;
+    }
+
+    .check {
+      width: 17px;
+      height: 17px;
+      color: var(--uniplat-user-menu-primary);
+      visibility: hidden;
+    }
+
+    .selected .check {
+      visibility: visible;
+    }
+
+    .empty {
+      padding: 14px 10px 16px;
+      color: var(--uniplat-user-menu-muted);
+      font-size: 12px;
+      text-align: center;
+    }
+
+    .footer {
+      display: flex;
+      flex-direction: column;
+      margin: 6px 4px 0;
+      padding-top: 6px;
+      border-top: 1px solid #edf1f6;
+    }
+
+    .footer-action {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      padding: 9px 6px;
+      border-radius: 9px;
+      color: var(--uniplat-user-menu-primary);
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .footer-action.logout {
+      color: #5a6673;
+      font-weight: 500;
+    }
+
+    .footer-action.logout .footer-icon {
+      color: #98a4b2;
+    }
+
+    .footer-icon {
+      width: 16px;
+      height: 16px;
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      fill: none;
+      stroke: currentColor;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 2;
+    }
+  `
+
+  declare private viewModel: UserMenuViewModel | null
+  private onCreateOrganization: (() => void) | null = null
+
+  constructor() {
+    super()
+    this.viewModel = null
+  }
+
+  configure(config: UserMenuConfig): void {
+    if (!config || !Array.isArray(config.organizations)) {
+      throw new TypeError('user-menu requires an organizations array')
+    }
+    if (
+      config.onCreateOrganization !== undefined &&
+      typeof config.onCreateOrganization !== 'function'
+    ) {
+      throw new TypeError('user-menu onCreateOrganization must be a function')
+    }
+
+    const displayName = normalizeRequiredText(config.displayName, 'Display name', 80)
+    const organizations = normalizeOrganizations(config.organizations)
+    const currentOrganizationId = normalizeOptionalText(config.currentOrganizationId, 128)
+    const avatarText =
+      normalizeOptionalText(config.avatarText, 4) || Array.from(displayName.trim())[0] || '用'
+
+    this.viewModel = {
+      displayName,
+      maskedMobile: normalizeMaskedMobile(config.maskedMobile),
+      avatarText,
+      avatarUrl: normalizeSafeImageUrl(config.avatarUrl, 'user-menu avatar URL'),
+      organizations,
+      currentOrganizationId,
+      organizationCount: normalizeOrganizationCount(config.organizationCount, organizations.length),
+      accountSettingsLabel:
+        normalizeOptionalText(config.accountSettingsLabel, 40) || DEFAULT_LABELS.accountSettings,
+      employeeInfoLabel:
+        normalizeOptionalText(config.employeeInfoLabel, 40) || DEFAULT_LABELS.employeeInfo,
+      organizationSectionLabel:
+        normalizeOptionalText(config.organizationSectionLabel, 40) ||
+        DEFAULT_LABELS.organizationSection,
+      createOrganizationLabel:
+        normalizeOptionalText(config.createOrganizationLabel, 40) ||
+        DEFAULT_LABELS.createOrganization,
+      logoutLabel: normalizeOptionalText(config.logoutLabel, 40) || DEFAULT_LABELS.logout,
+    }
+    this.onCreateOrganization = config.onCreateOrganization ?? null
+  }
+
+  override render() {
+    const viewModel = this.viewModel
+    if (!viewModel) return nothing
+
+    return html`
+      <section class="panel" part="panel" aria-label="账户与组织">
+        <header class="profile" part="profile">
+          <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="profile-copy">
+            <span class="profile-name" part="profile-name">${viewModel.displayName}</span>
+            ${
+              viewModel.maskedMobile
+                ? html`<span class="profile-mobile" part="profile-mobile"
+                    >${viewModel.maskedMobile}</span
+                  >`
+                : nothing
+            }
+          </span>
+        </header>
+
+        <div class="menu-actions" part="menu-actions">
+          <button
+            class="menu-action account-settings-action"
+            part="account-settings-action"
+            type="button"
+            @click=${this.requestAccountSettings}
+          >
+            <span class="menu-action-icon" aria-hidden="true">${prototypeIcon('user-cog')}</span>
+            <span class="action-copy">
+              <span class="menu-action-title">${viewModel.accountSettingsLabel}</span>
+            </span>
+            <span class="menu-action-chevron" aria-hidden="true"
+              >${prototypeIcon('chevron-right')}</span
+            >
+          </button>
+          <button
+            class="menu-action employee-info-action"
+            part="employee-info-action"
+            type="button"
+            @click=${this.requestEmployeeInfo}
+          >
+            <span class="menu-action-icon" aria-hidden="true">${prototypeIcon('id-badge-2')}</span>
+            <span class="action-copy">
+              <span class="menu-action-title">${viewModel.employeeInfoLabel}</span>
+              ${this.renderEmployeeInfoSubtitle(viewModel)}
+            </span>
+            <span class="menu-action-chevron" aria-hidden="true"
+              >${prototypeIcon('chevron-right')}</span
+            >
+          </button>
+        </div>
+
+        <div class="section-title" part="section-title">
+          ${viewModel.organizationSectionLabel}（${viewModel.organizationCount}）
+        </div>
+        <div class="organization-list" part="organization-list">
+          ${
+            viewModel.organizations.length
+              ? viewModel.organizations.map((organization) =>
+                  this.renderOrganization(organization, viewModel.currentOrganizationId),
+                )
+              : html`<div class="empty" part="empty">暂无可切换的企业或团队</div>`
+          }
+        </div>
+
+        <div class="footer create-footer" part="footer create-footer">
+          <button
+            class="footer-action create-action"
+            part="create-action"
+            type="button"
+            @click=${this.requestOrganizationCreation}
+          >
+            <span class="footer-icon" aria-hidden="true">${prototypeIcon('plus')}</span>
+            <span>${viewModel.createOrganizationLabel}</span>
+          </button>
+        </div>
+        <div class="footer logout-footer" part="logout-footer">
+          <button
+            class="footer-action logout"
+            part="logout-action"
+            type="button"
+            @click=${this.requestLogout}
+          >
+            <span class="footer-icon" aria-hidden="true">${prototypeIcon('logout')}</span>
+            <span>${viewModel.logoutLabel}</span>
+          </button>
+        </div>
+      </section>
+    `
+  }
+
+  private renderOrganization(
+    organization: ResolvedUserMenuOrganization,
+    currentOrganizationId: string,
+  ) {
+    const selected = organization.id === currentOrganizationId
+    const typeLabel = organization.type === 'company' ? '企业' : '团队'
+    const meta = organizationMeta(organization)
+    return html`
+      <button
+        class=${`organization${selected ? ' selected' : ''}`}
+        part="organization"
+        type="button"
+        aria-pressed=${String(selected)}
+        data-organization-id=${organization.id}
+        @click=${() => this.selectOrganization(organization.id)}
+      >
+        <span
+          class=${`organization-icon ${organization.type}`}
+          part="organization-icon"
+          aria-hidden="true"
+          >${prototypeIcon(organization.type === 'company' ? 'building' : 'users')}</span
+        >
+        <span class="organization-copy">
+          <span class="organization-heading">
+            <span class="organization-name" part="organization-name">${organization.name}</span>
+            <span class=${`organization-type ${organization.type}`} part="organization-type"
+              >${typeLabel}</span
+            >
+            ${this.renderVerificationStatus(organization)}
+          </span>
+          ${
+            meta
+              ? html`<span
+                  class=${`organization-meta${organizationNeedsAttention(organization) ? ' attention' : ''}`}
+                  part="organization-meta"
+                  >${meta}</span
+                >`
+              : nothing
+          }
+        </span>
+        <span class="check" part="organization-check" aria-hidden="true"
+          >${prototypeIcon('circle-check-filled')}</span
+        >
+      </button>
+    `
+  }
+
+  private renderVerificationStatus(organization: ResolvedUserMenuOrganization) {
+    if (organization.type === 'team') {
+      return html`<span class="verification-status team" part="verification-status"
+        >${prototypeIcon('users')}无需认证</span
+      >`
+    }
+    const status = organization.verificationStatus ?? 'unverified'
+    return html`<span class=${`verification-status ${status}`} part="verification-status"
+      >${prototypeIcon(verificationStatusIcon(status))}${verificationStatusLabel(status)}</span
+    >`
+  }
+
+  private readonly selectOrganization = (organizationId: string): void => {
+    this.dispatchPublicEvent('organization-selected', { organizationId })
+  }
+
+  private renderEmployeeInfoSubtitle(viewModel: UserMenuViewModel) {
+    const organization = viewModel.organizations.find(
+      (candidate) => candidate.id === viewModel.currentOrganizationId,
+    )
+    return organization
+      ? html`<span class="menu-action-subtitle">在 ${organization.name} 的员工信息</span>`
+      : nothing
+  }
+
+  private readonly requestAccountSettings = (): void => {
+    this.dispatchPublicEvent('account-settings-requested', {})
+  }
+
+  private readonly requestEmployeeInfo = (): void => {
+    this.dispatchPublicEvent('employee-info-requested', {
+      organizationId: this.viewModel?.currentOrganizationId || null,
+    })
+  }
+
+  private readonly requestOrganizationCreation = (): void => {
+    if (this.onCreateOrganization) {
+      this.onCreateOrganization()
+      return
+    }
+    this.dispatchPublicEvent('organization-create-requested', {})
+  }
+
+  private readonly requestLogout = (): void => {
+    this.dispatchPublicEvent('logout-requested', {})
+  }
+
+  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 dispatchPublicEvent<K extends keyof UserMenuEventMap>(
+    type: K,
+    detail: UserMenuEventMap[K]['detail'],
+  ): void {
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        detail,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+}
+
+function normalizeOrganizations(
+  organizations: readonly UserMenuOrganization[],
+): readonly ResolvedUserMenuOrganization[] {
+  const ids = new Set<string>()
+  return Object.freeze(
+    organizations.map((organization, index) => {
+      if (!organization || typeof organization !== 'object') {
+        throw new TypeError(`Organization ${index + 1} is invalid`)
+      }
+      const id = normalizeRequiredText(organization.id, 'Organization ID', 128)
+      if (ids.has(id)) throw new TypeError('Organization IDs must be unique')
+      ids.add(id)
+      if (organization.type !== 'company' && organization.type !== 'team') {
+        throw new TypeError('Organization type must be company or team')
+      }
+      const memberCount = normalizeMemberCount(organization.memberCount)
+      const name = normalizeRequiredText(organization.name, 'Organization name', 120)
+      return Object.freeze({
+        id,
+        name,
+        type: organization.type,
+        avatarText:
+          normalizeOptionalText(organization.avatarText, 4) || Array.from(name)[0] || '组',
+        role: normalizeOptionalText(organization.role, 80),
+        memberCount,
+        verificationStatus:
+          organization.type === 'company'
+            ? normalizeVerificationStatus(organization.verificationStatus)
+            : null,
+      })
+    }),
+  )
+}
+
+function normalizeOrganizationCount(value: unknown, fallback: number): number {
+  if (value === undefined) return fallback
+  if (typeof value !== 'number' || !Number.isSafeInteger(value) || value < fallback) {
+    throw new TypeError('user-menu organizationCount must include every provided organization')
+  }
+  return value
+}
+
+function normalizeVerificationStatus(
+  value: unknown,
+): 'unverified' | 'pending' | 'rejected' | 'verified' | 'expired' | null {
+  if (value === undefined || value === null) return null
+  if (!['unverified', 'pending', 'rejected', 'verified', 'expired'].includes(String(value))) {
+    throw new TypeError('Organization verification status is invalid')
+  }
+  return value as 'unverified' | 'pending' | 'rejected' | 'verified' | 'expired'
+}
+
+function verificationStatusLabel(
+  status: 'unverified' | 'pending' | 'rejected' | 'verified' | 'expired',
+): string {
+  if (status === 'verified') return '已认证'
+  if (status === 'pending') return '审核中'
+  if (status === 'rejected') return '未通过'
+  if (status === 'expired') return '已过期'
+  return '未认证'
+}
+
+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('Organization member count must be a non-negative integer')
+  }
+  return value
+}
+
+function normalizeMaskedMobile(value: unknown): string {
+  const mobile = normalizeOptionalText(value, 40)
+  if (/^1[3-9]\d{9}$/.test(mobile)) {
+    throw new TypeError('user-menu 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('user-menu text values must be strings')
+  const normalized = value.trim()
+  if (normalized.length > maxLength) throw new TypeError('user-menu text value is too long')
+  return normalized
+}
+
+function organizationMeta(organization: ResolvedUserMenuOrganization): string {
+  const values: string[] = []
+  if (organization.role) values.push(organization.role)
+  if (organization.memberCount !== null) values.push(`${organization.memberCount} 人`)
+  if (organization.type === 'company' && organization.verificationStatus === 'unverified') {
+    values.push('认证后可办理业务')
+  }
+  return values.join(' · ')
+}
+
+function organizationNeedsAttention(organization: ResolvedUserMenuOrganization): boolean {
+  return (
+    organization.type === 'company' &&
+    ['unverified', 'rejected', 'expired'].includes(organization.verificationStatus ?? '')
+  )
+}
+
+function verificationStatusIcon(
+  status: 'unverified' | 'pending' | 'rejected' | 'verified' | 'expired',
+): PrototypeIconName {
+  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'
+}