@csntgao/uni-base 0.1.0

package/packages/web-components/src/organization-onboarding.ts

@@ -0,0 +1,1216 @@
+import { LitElement, css, html, nothing, type TemplateResult } from 'lit'
+import {
+  OrganizationOnboardingTransportError,
+  type CreatedOnboardingOrganization,
+  type OrganizationOnboardingTransport,
+} from './organization-onboarding-transport'
+
+export type OrganizationOnboardingStep =
+  | 'unassigned'
+  | 'method-selection'
+  | 'skip-confirmation'
+  | 'enterprise-form'
+  | 'enterprise-success'
+  | 'team-form'
+  | 'team-success'
+
+export interface OrganizationOnboardingConfig {
+  transport: OrganizationOnboardingTransport
+  initialStep?: 'unassigned' | 'method-selection'
+}
+
+export interface OrganizationOnboardingEventMap {
+  'onboarding-skipped': CustomEvent<{
+    source: 'unassigned' | 'method-selection' | 'enterprise-form' | 'team-form'
+  }>
+  'join-organization-requested': CustomEvent<{ enterpriseName?: string }>
+  'organization-created': CustomEvent<{ organizationId: string; type: 'enterprise' | 'team' }>
+  'enterprise-authentication-requested': CustomEvent<{ organizationId: string }>
+  'enterprise-authentication-deferred': CustomEvent<{ organizationId: string }>
+  'team-upgrade-requested': CustomEvent<{ organizationId: string }>
+  'team-invite-members-requested': CustomEvent<{ organizationId: string }>
+  error: CustomEvent<{
+    code: 'ENTERPRISE_CREATE_FAILED' | 'TEAM_CREATE_FAILED'
+    message: string
+    recoverable: true
+  }>
+}
+
+type OnboardingChoice = 'enterprise' | 'team'
+type SkippableStep = 'method-selection' | 'enterprise-form' | 'team-form'
+
+interface EnterpriseErrors {
+  organizationName: string
+  enterpriseName: string
+  unifiedSocialCreditCode: string
+  global: string
+  canRequestJoin: boolean
+}
+
+interface TeamErrors {
+  teamName: string
+  global: string
+}
+
+const EMPTY_ENTERPRISE_ERRORS: EnterpriseErrors = {
+  organizationName: '',
+  enterpriseName: '',
+  unifiedSocialCreditCode: '',
+  global: '',
+  canRequestJoin: false,
+}
+
+const EMPTY_TEAM_ERRORS: TeamErrors = {
+  teamName: '',
+  global: '',
+}
+
+/**
+ * Internal implementation used exclusively by <uniplat-account-context>.
+ * It is deliberately not exported from the package entry point.
+ */
+export class InternalOrganizationOnboarding extends LitElement {
+  static override properties = {
+    step: { state: true },
+    choice: { state: true },
+    organizationName: { state: true },
+    enterpriseName: { state: true },
+    unifiedSocialCreditCode: { state: true },
+    teamName: { state: true },
+    enterpriseErrors: { state: true },
+    teamErrors: { state: true },
+    submitting: { state: true },
+    createdOrganization: { state: true },
+  }
+
+  static override styles = css`
+    :host {
+      --uniplat-onboarding-width: 400px;
+      --uniplat-onboarding-primary: #2e6bf5;
+      --uniplat-onboarding-text: #182634;
+      --uniplat-onboarding-muted: #7a8794;
+      --uniplat-onboarding-border: #e4ebf3;
+      --uniplat-onboarding-error: #e5484d;
+      --uniplat-onboarding-font-family:
+        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      display: block;
+      width: min(var(--uniplat-onboarding-width), 100%);
+      color: var(--uniplat-onboarding-text);
+      font-family: var(--uniplat-onboarding-font-family);
+      line-height: 1.5;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    button,
+    input {
+      font: inherit;
+    }
+
+    button {
+      cursor: pointer;
+    }
+
+    .card {
+      width: 100%;
+      overflow: hidden;
+      border: 1px solid var(--uniplat-onboarding-border);
+      border-radius: 16px;
+      background: #ffffff;
+      box-shadow: 0 8px 24px rgba(20, 40, 80, 0.08);
+    }
+
+    .content {
+      padding: 24px;
+    }
+
+    .heading-row {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+    }
+
+    h2,
+    p {
+      margin: 0;
+    }
+
+    h2 {
+      color: #182634;
+      font-size: 20px;
+      font-weight: 800;
+      line-height: 1.35;
+    }
+
+    .description {
+      margin-top: 8px;
+      color: var(--uniplat-onboarding-muted);
+      font-size: 13px;
+      line-height: 1.7;
+    }
+
+    .skip {
+      flex: none;
+      padding: 2px 0;
+      border: 0;
+      color: #98a4b2;
+      background: transparent;
+      font-size: 12.5px;
+    }
+
+    .options {
+      display: grid;
+      gap: 10px;
+      margin-top: 20px;
+    }
+
+    .option {
+      display: grid;
+      grid-template-columns: 38px minmax(0, 1fr) 18px;
+      align-items: center;
+      gap: 11px;
+      width: 100%;
+      min-height: 66px;
+      padding: 10px 12px;
+      border: 1px solid #e4ebf3;
+      border-radius: 10px;
+      color: inherit;
+      background: #ffffff;
+      text-align: left;
+    }
+
+    .option.selected {
+      border-color: var(--uniplat-onboarding-primary);
+      background: #f7f9ff;
+      box-shadow: 0 0 0 1px rgba(46, 107, 245, 0.08);
+    }
+
+    .option-icon,
+    .success-icon,
+    .empty-icon {
+      display: grid;
+      place-items: center;
+      border-radius: 10px;
+    }
+
+    .option-icon {
+      width: 38px;
+      height: 38px;
+      color: var(--uniplat-onboarding-primary);
+      background: #e6eefe;
+    }
+
+    .option.team .option-icon {
+      color: #0ca678;
+      background: #e3f7ef;
+    }
+
+    .option-title {
+      display: block;
+      font-size: 14px;
+      font-weight: 750;
+    }
+
+    .option-meta {
+      display: block;
+      margin-top: 2px;
+      color: #8b98a6;
+      font-size: 11.5px;
+      line-height: 1.45;
+    }
+
+    .selected-mark {
+      display: grid;
+      place-items: center;
+      width: 18px;
+      height: 18px;
+      border: 1.5px solid #c7d1df;
+      border-radius: 50%;
+      color: transparent;
+    }
+
+    .option.selected .selected-mark {
+      border-color: var(--uniplat-onboarding-primary);
+      color: #ffffff;
+      background: var(--uniplat-onboarding-primary);
+    }
+
+    .primary,
+    .secondary {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 46px;
+      border-radius: 10px;
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    .primary {
+      width: 100%;
+      margin-top: 16px;
+      border: 0;
+      color: #ffffff;
+      background: var(--uniplat-onboarding-primary);
+    }
+
+    .primary:disabled {
+      cursor: not-allowed;
+      background: #a9bff6;
+    }
+
+    .secondary {
+      border: 1px solid #dce5f0;
+      color: #5a6673;
+      background: #ffffff;
+    }
+
+    .form {
+      display: grid;
+      gap: 15px;
+      margin-top: 20px;
+    }
+
+    .field label {
+      display: block;
+      margin-bottom: 7px;
+      color: #25303f;
+      font-size: 13px;
+      font-weight: 700;
+    }
+
+    .required {
+      color: var(--uniplat-onboarding-error);
+    }
+
+    .field input {
+      width: 100%;
+      height: 44px;
+      padding: 0 12px;
+      border: 1px solid #e2e9f3;
+      border-radius: 9px;
+      outline: none;
+      color: #25303f;
+      background: #ffffff;
+      font-size: 13.5px;
+    }
+
+    .field input:focus {
+      border-color: var(--uniplat-onboarding-primary);
+      box-shadow: 0 0 0 3px rgba(46, 107, 245, 0.1);
+    }
+
+    .field input[aria-invalid='true'] {
+      border-color: var(--uniplat-onboarding-error);
+      box-shadow: none;
+    }
+
+    .helper,
+    .field-error {
+      display: block;
+      margin-top: 6px;
+      font-size: 11.5px;
+      line-height: 1.55;
+    }
+
+    .helper {
+      color: #98a4b2;
+    }
+
+    .field-error {
+      color: var(--uniplat-onboarding-error);
+    }
+
+    .inline-link {
+      padding: 0;
+      border: 0;
+      color: var(--uniplat-onboarding-primary);
+      background: transparent;
+      font-weight: 700;
+    }
+
+    .summary-error,
+    .team-notice {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 10px 12px;
+      border-radius: 9px;
+      font-size: 12px;
+      line-height: 1.6;
+    }
+
+    .summary-error {
+      margin-top: 16px;
+      color: #c7373c;
+      background: #fdeced;
+    }
+
+    .team-notice {
+      margin-top: 16px;
+      color: #147552;
+      background: #eaf9f3;
+    }
+
+    .confirmation {
+      padding: 24px;
+    }
+
+    .confirmation-icon {
+      display: grid;
+      place-items: center;
+      width: 42px;
+      height: 42px;
+      margin-bottom: 16px;
+      border-radius: 12px;
+      color: #e8590c;
+      background: #fff4e2;
+    }
+
+    .confirmation-actions,
+    .success-actions {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+      margin-top: 20px;
+    }
+
+    .confirmation-actions .primary,
+    .success-actions .primary {
+      margin-top: 0;
+    }
+
+    .success {
+      padding: 30px 24px 24px;
+      text-align: center;
+    }
+
+    .success-icon,
+    .empty-icon {
+      width: 56px;
+      height: 56px;
+      margin: 0 auto 16px;
+      color: #0ca678;
+      background: #e3f7ef;
+    }
+
+    .empty-icon {
+      color: var(--uniplat-onboarding-primary);
+      background: #e6eefe;
+    }
+
+    .success .description {
+      max-width: 320px;
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    .status-badge {
+      display: inline-flex;
+      align-items: center;
+      margin-top: 12px;
+      padding: 3px 9px;
+      border-radius: 999px;
+      color: #e8590c;
+      background: #fff4e2;
+      font-size: 11.5px;
+      font-weight: 700;
+    }
+
+    .status-badge.team {
+      color: #0ca678;
+      background: #e3f7ef;
+    }
+
+    .empty-actions {
+      display: grid;
+      gap: 10px;
+      margin-top: 20px;
+    }
+
+    .empty-actions .primary {
+      margin-top: 0;
+    }
+
+    .text-action {
+      padding: 4px;
+      border: 0;
+      color: #8b98a6;
+      background: transparent;
+      font-size: 12.5px;
+    }
+
+    svg {
+      display: block;
+      width: 22px;
+      height: 22px;
+      fill: none;
+      stroke: currentColor;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.8;
+    }
+  `
+
+  declare private step: OrganizationOnboardingStep
+  declare private choice: OnboardingChoice
+  declare private organizationName: string
+  declare private enterpriseName: string
+  declare private unifiedSocialCreditCode: string
+  declare private teamName: string
+  declare private enterpriseErrors: EnterpriseErrors
+  declare private teamErrors: TeamErrors
+  declare private submitting: boolean
+  declare private createdOrganization: CreatedOnboardingOrganization | null
+
+  private transport: OrganizationOnboardingTransport | null = null
+  private skipReturnStep: SkippableStep = 'method-selection'
+
+  constructor() {
+    super()
+    this.step = 'method-selection'
+    this.choice = 'enterprise'
+    this.organizationName = ''
+    this.enterpriseName = ''
+    this.unifiedSocialCreditCode = ''
+    this.teamName = ''
+    this.enterpriseErrors = { ...EMPTY_ENTERPRISE_ERRORS }
+    this.teamErrors = { ...EMPTY_TEAM_ERRORS }
+    this.submitting = false
+    this.createdOrganization = null
+  }
+
+  configure(config: OrganizationOnboardingConfig): void {
+    if (
+      !config?.transport ||
+      typeof config.transport.createEnterprise !== 'function' ||
+      typeof config.transport.createTeam !== 'function'
+    ) {
+      throw new TypeError('organization-onboarding requires a complete transport')
+    }
+    if (config.initialStep && !['unassigned', 'method-selection'].includes(config.initialStep)) {
+      throw new TypeError('organization-onboarding initialStep is invalid')
+    }
+    this.transport = config.transport
+    this.reset(config.initialStep ?? 'method-selection')
+  }
+
+  start(step: 'unassigned' | 'method-selection' = 'method-selection'): void {
+    if (!this.transport) throw new Error('organization-onboarding is not configured')
+    this.reset(step)
+  }
+
+  override render() {
+    if (!this.transport) return nothing
+    if (this.step === 'unassigned') return this.renderUnassigned()
+    if (this.step === 'method-selection') return this.renderMethodSelection()
+    if (this.step === 'skip-confirmation') return this.renderSkipConfirmation()
+    if (this.step === 'enterprise-form') return this.renderEnterpriseForm()
+    if (this.step === 'team-form') return this.renderTeamForm()
+    return this.renderSuccess()
+  }
+
+  private renderUnassigned() {
+    return html`
+      <section class="card" part="shell" aria-label="无归属团队或企业">
+        <div class="success" part="unassigned">
+          <div class="empty-icon" part="unassigned-icon">${icon('building-plus')}</div>
+          <h2 part="title">你还没有归属的团队 / 企业</h2>
+          <p class="description" part="description">
+            创建一个团队 / 企业，即可办理社保、薪酬、用工等业务；也可以用邀请码加入已有的团队 /
+            企业。
+          </p>
+          <div class="empty-actions">
+            <button
+              class="primary"
+              part="primary-action"
+              type="button"
+              @click=${this.openMethodSelection}
+            >
+              创建团队 / 企业
+            </button>
+            <button
+              class="secondary"
+              part="secondary-action"
+              type="button"
+              @click=${() => this.requestJoin()}
+            >
+              用邀请码加入
+            </button>
+            <button
+              class="text-action"
+              part="skip-action"
+              type="button"
+              @click=${this.skipUnassigned}
+            >
+              暂不创建，先逛逛
+            </button>
+          </div>
+        </div>
+      </section>
+    `
+  }
+
+  private renderMethodSelection() {
+    return html`
+      <section class="card" part="shell" aria-label="选择入驻方式">
+        <div class="content">
+          <div class="heading-row">
+            <div>
+              <h2 part="title">创建你的团队 / 企业</h2>
+              <p class="description" part="description">
+                办理社保、薪酬、用工等业务需先归属一个团队 / 企业
+              </p>
+            </div>
+            <button
+              class="skip"
+              part="skip-action"
+              type="button"
+              @click=${() => this.openSkip('method-selection')}
+            >
+              跳过
+            </button>
+          </div>
+          <div class="options" role="list" part="method-options">
+            ${this.renderOption(
+              'enterprise',
+              'building',
+              '创建企业',
+              '有营业执照，需填写企业信息、需认证',
+            )}
+            ${this.renderOption(
+              'team',
+              'users',
+              '创建团队',
+              '无需企业信息、无需认证，可随时升级为企业',
+            )}
+          </div>
+          <button
+            class="primary"
+            part="primary-action"
+            type="button"
+            @click=${this.continueFromChoice}
+          >
+            下一步
+          </button>
+        </div>
+      </section>
+    `
+  }
+
+  private renderOption(
+    choice: OnboardingChoice,
+    iconName: IconName,
+    title: string,
+    description: string,
+  ) {
+    const selected = this.choice === choice
+    return html`
+      <button
+        class="option ${choice === 'team' ? 'team' : ''} ${selected ? 'selected' : ''}"
+        part="method-option"
+        type="button"
+        aria-pressed=${String(selected)}
+        @click=${() => {
+          this.choice = choice
+        }}
+      >
+        <span class="option-icon">${icon(iconName)}</span>
+        <span>
+          <span class="option-title">${title}</span>
+          <span class="option-meta">${description}</span>
+        </span>
+        <span class="selected-mark">${icon('check')}</span>
+      </button>
+    `
+  }
+
+  private renderSkipConfirmation() {
+    return html`
+      <section class="card" part="shell" aria-label="确认跳过入驻">
+        <div class="confirmation" part="skip-confirmation">
+          <div class="confirmation-icon">${icon('alert')}</div>
+          <h2 part="title">确定暂不创建团队 / 企业？</h2>
+          <p class="description" part="description">
+            跳过后你仍可浏览官网与服务介绍，但无法办理社保、薪酬、用工等业务。随时可在顶部导航“创建团队
+            / 企业”补充。
+          </p>
+          <div class="confirmation-actions">
+            <button
+              class="secondary"
+              part="secondary-action"
+              type="button"
+              @click=${this.confirmSkip}
+            >
+              跳过，先逛逛
+            </button>
+            <button
+              class="primary"
+              part="primary-action"
+              type="button"
+              @click=${this.continueCreating}
+            >
+              继续创建
+            </button>
+          </div>
+        </div>
+      </section>
+    `
+  }
+
+  private renderEnterpriseForm() {
+    const errorCount = [
+      this.enterpriseErrors.organizationName,
+      this.enterpriseErrors.enterpriseName,
+      this.enterpriseErrors.unifiedSocialCreditCode,
+    ].filter(Boolean).length
+    return html`
+      <section class="card" part="shell" aria-label="填写企业信息">
+        <div class="content">
+          <div class="heading-row">
+            <div><h2 part="title">填写企业信息</h2></div>
+            <button
+              class="skip"
+              part="skip-action"
+              type="button"
+              @click=${() => this.openSkip('enterprise-form')}
+            >
+              跳过
+            </button>
+          </div>
+          ${
+            errorCount > 0
+              ? html`<div class="summary-error" part="error-summary" role="alert">
+                  ${icon('alert')}<span>有 ${errorCount} 项信息需要修改，请检查后重新提交</span>
+                </div>`
+              : nothing
+          }
+          <form class="form" part="form" @submit=${this.submitEnterprise} novalidate>
+            ${this.renderEnterpriseField(
+              'organization-name',
+              '组织名称',
+              this.organizationName,
+              '平台内显示的简称，成员在切换时看到的名字',
+              this.enterpriseErrors.organizationName,
+              30,
+              (value) => {
+                this.organizationName = value
+                this.enterpriseErrors = {
+                  ...this.enterpriseErrors,
+                  organizationName: '',
+                  global: '',
+                }
+              },
+            )}
+            ${this.renderEnterpriseField(
+              'enterprise-name',
+              '企业名称',
+              this.enterpriseName,
+              '需与营业执照一致，将用于合同与开票',
+              this.enterpriseErrors.enterpriseName,
+              100,
+              (value) => {
+                this.enterpriseName = value
+                this.enterpriseErrors = {
+                  ...this.enterpriseErrors,
+                  enterpriseName: '',
+                  global: '',
+                  canRequestJoin: false,
+                }
+              },
+              this.enterpriseErrors.canRequestJoin,
+            )}
+            ${this.renderEnterpriseField(
+              'credit-code',
+              '统一社会信用代码',
+              this.unifiedSocialCreditCode,
+              '',
+              this.enterpriseErrors.unifiedSocialCreditCode,
+              18,
+              (value) => {
+                this.unifiedSocialCreditCode = value.toUpperCase().replace(/\s/g, '')
+                this.enterpriseErrors = {
+                  ...this.enterpriseErrors,
+                  unifiedSocialCreditCode: '',
+                  global: '',
+                }
+              },
+            )}
+            ${
+              this.enterpriseErrors.global
+                ? html`<div class="field-error" part="global-error" role="alert">
+                    ${this.enterpriseErrors.global}
+                  </div>`
+                : nothing
+            }
+            <button
+              class="primary"
+              part="primary-action"
+              type="submit"
+              ?disabled=${this.submitting}
+            >
+              ${this.submitting ? '正在创建…' : '创建企业'}
+            </button>
+          </form>
+        </div>
+      </section>
+    `
+  }
+
+  private renderEnterpriseField(
+    id: string,
+    label: string,
+    value: string,
+    helper: string,
+    error: string,
+    maxLength: number,
+    update: (value: string) => void,
+    canRequestJoin = false,
+  ) {
+    return html`
+      <div class="field" part="field">
+        <label for=${id}>${label} <span class="required">*</span></label>
+        <input
+          id=${id}
+          part="input"
+          .value=${value}
+          maxlength=${maxLength}
+          aria-invalid=${String(Boolean(error))}
+          @input=${(event: Event) => update((event.currentTarget as HTMLInputElement).value)}
+          @blur=${() => this.validateEnterpriseField(id)}
+        />
+        ${helper && !error ? html`<span class="helper">${helper}</span>` : nothing}
+        ${
+          error
+            ? html`<span class="field-error" part="field-error" role="alert">
+                ${error}
+                ${
+                  canRequestJoin
+                    ? html`，可
+                        <button
+                          class="inline-link"
+                          type="button"
+                          @click=${() => this.requestJoin(this.enterpriseName)}
+                        >
+                          申请加入
+                        </button>
+                        或联系管理员`
+                    : nothing
+                }
+              </span>`
+            : nothing
+        }
+      </div>
+    `
+  }
+
+  private renderTeamForm() {
+    return html`
+      <section class="card" part="shell" aria-label="填写团队信息">
+        <div class="content">
+          <div class="heading-row">
+            <div><h2 part="title">填写团队信息</h2></div>
+            <button
+              class="skip"
+              part="skip-action"
+              type="button"
+              @click=${() => this.openSkip('team-form')}
+            >
+              跳过
+            </button>
+          </div>
+          <div class="team-notice" part="team-notice">
+            ${icon('check')}<span
+              >团队无需营业执照与企业信息，创建后即可协作；后续可一键升级为企业。</span
+            >
+          </div>
+          <form class="form" part="form" @submit=${this.submitTeam} novalidate>
+            <div class="field" part="field">
+              <label for="team-name">团队名称 <span class="required">*</span></label>
+              <input
+                id="team-name"
+                part="input"
+                .value=${this.teamName}
+                maxlength="30"
+                aria-invalid=${String(Boolean(this.teamErrors.teamName))}
+                @input=${(event: Event) => {
+                  this.teamName = (event.currentTarget as HTMLInputElement).value
+                  this.teamErrors = { ...this.teamErrors, teamName: '', global: '' }
+                }}
+                @blur=${this.validateTeamName}
+              />
+              ${
+                this.teamErrors.teamName
+                  ? html`<span class="field-error" part="field-error" role="alert">
+                      ${this.teamErrors.teamName}
+                    </span>`
+                  : html`<span class="helper">2-30 个字，团队成员可见</span>`
+              }
+            </div>
+            ${
+              this.teamErrors.global
+                ? html`<div class="field-error" part="global-error" role="alert">
+                    ${this.teamErrors.global}
+                  </div>`
+                : nothing
+            }
+            <button
+              class="primary"
+              part="primary-action"
+              type="submit"
+              ?disabled=${this.submitting}
+            >
+              ${this.submitting ? '正在创建…' : '创建团队'}
+            </button>
+          </form>
+        </div>
+      </section>
+    `
+  }
+
+  private renderSuccess() {
+    const organization = this.createdOrganization
+    if (!organization) return nothing
+    const enterprise = organization.type === 'enterprise'
+    return html`
+      <section class="card" part="shell" aria-label=${enterprise ? '企业创建成功' : '团队创建成功'}>
+        <div class="success" part="success">
+          <div class="success-icon" part="success-icon">
+            ${icon(enterprise ? 'building-check' : 'users')}
+          </div>
+          <h2 part="title">${organization.name} 已创建</h2>
+          <span class="status-badge ${enterprise ? '' : 'team'}" part="status-badge">
+            ${enterprise ? '未认证' : '无需认证'}
+          </span>
+          <p class="description" part="description">
+            ${
+              enterprise
+                ? '未认证可先浏览与咨询；完成企业认证后才能签约下单、开票与办理社保业务。'
+                : '团队可直接使用协作与部分服务；若需签约下单、开票，请升级为企业并完成认证。'
+            }
+          </p>
+          <div class="success-actions">
+            ${
+              enterprise
+                ? html`
+                    <button
+                      class="secondary"
+                      part="secondary-action"
+                      type="button"
+                      @click=${this.deferAuthentication}
+                    >
+                      稍后认证
+                    </button>
+                    <button
+                      class="primary"
+                      part="primary-action"
+                      type="button"
+                      @click=${this.requestAuthentication}
+                    >
+                      去认证
+                    </button>
+                  `
+                : html`
+                    <button
+                      class="secondary"
+                      part="secondary-action"
+                      type="button"
+                      @click=${this.requestTeamUpgrade}
+                    >
+                      升级为企业
+                    </button>
+                    <button
+                      class="primary"
+                      part="primary-action"
+                      type="button"
+                      @click=${this.requestTeamInvites}
+                    >
+                      邀请成员
+                    </button>
+                  `
+            }
+          </div>
+        </div>
+      </section>
+    `
+  }
+
+  private reset(step: 'unassigned' | 'method-selection') {
+    this.step = step
+    this.choice = 'enterprise'
+    this.organizationName = ''
+    this.enterpriseName = ''
+    this.unifiedSocialCreditCode = ''
+    this.teamName = ''
+    this.enterpriseErrors = { ...EMPTY_ENTERPRISE_ERRORS }
+    this.teamErrors = { ...EMPTY_TEAM_ERRORS }
+    this.submitting = false
+    this.createdOrganization = null
+  }
+
+  private readonly openMethodSelection = () => {
+    this.step = 'method-selection'
+  }
+
+  private readonly continueFromChoice = () => {
+    this.step = this.choice === 'enterprise' ? 'enterprise-form' : 'team-form'
+  }
+
+  private openSkip(returnStep: SkippableStep) {
+    this.skipReturnStep = returnStep
+    this.step = 'skip-confirmation'
+  }
+
+  private readonly continueCreating = () => {
+    this.step = this.skipReturnStep
+  }
+
+  private readonly confirmSkip = () => {
+    this.dispatchPublicEvent('onboarding-skipped', { source: this.skipReturnStep })
+  }
+
+  private readonly skipUnassigned = () => {
+    this.dispatchPublicEvent('onboarding-skipped', { source: 'unassigned' })
+  }
+
+  private requestJoin(enterpriseName?: string) {
+    this.dispatchPublicEvent(
+      'join-organization-requested',
+      enterpriseName ? { enterpriseName } : {},
+    )
+  }
+
+  private validateEnterpriseField(id: string) {
+    if (id === 'organization-name' && !this.organizationName.trim()) {
+      this.enterpriseErrors = { ...this.enterpriseErrors, organizationName: '此项为必填' }
+    }
+    if (id === 'enterprise-name' && !this.enterpriseName.trim()) {
+      this.enterpriseErrors = { ...this.enterpriseErrors, enterpriseName: '此项为必填' }
+    }
+    if (id === 'credit-code') {
+      const creditCode = this.unifiedSocialCreditCode.trim().toUpperCase()
+      this.enterpriseErrors = {
+        ...this.enterpriseErrors,
+        unifiedSocialCreditCode: /^[0-9A-Z]{18}$/.test(creditCode)
+          ? ''
+          : '格式有误，应为 18 位数字与大写字母',
+      }
+    }
+  }
+
+  private validateEnterprise(): boolean {
+    const organizationName = this.organizationName.trim()
+    const enterpriseName = this.enterpriseName.trim()
+    const creditCode = this.unifiedSocialCreditCode.trim().toUpperCase()
+    this.enterpriseErrors = {
+      ...EMPTY_ENTERPRISE_ERRORS,
+      organizationName: organizationName ? '' : '此项为必填',
+      enterpriseName: enterpriseName ? '' : '此项为必填',
+      unifiedSocialCreditCode: /^[0-9A-Z]{18}$/.test(creditCode)
+        ? ''
+        : '格式有误，应为 18 位数字与大写字母',
+    }
+    return Boolean(organizationName && enterpriseName && /^[0-9A-Z]{18}$/.test(creditCode))
+  }
+
+  private readonly submitEnterprise = async (event: SubmitEvent) => {
+    event.preventDefault()
+    const transport = this.transport
+    if (!transport || this.submitting || !this.validateEnterprise()) return
+    this.submitting = true
+    try {
+      const organization = normalizeCreatedOrganization(
+        await transport.createEnterprise({
+          organizationName: this.organizationName.trim(),
+          enterpriseName: this.enterpriseName.trim(),
+          unifiedSocialCreditCode: this.unifiedSocialCreditCode.trim().toUpperCase(),
+        }),
+        'enterprise',
+      )
+      this.createdOrganization = organization
+      this.step = 'enterprise-success'
+      this.dispatchPublicEvent('organization-created', {
+        organizationId: organization.id,
+        type: 'enterprise',
+      })
+    } catch (error) {
+      this.handleEnterpriseError(error)
+    } finally {
+      this.submitting = false
+    }
+  }
+
+  private handleEnterpriseError(error: unknown) {
+    const code = error instanceof OrganizationOnboardingTransportError ? error.code : 'UNKNOWN'
+    if (code === 'ENTERPRISE_NAME_CONFLICT') {
+      this.enterpriseErrors = {
+        ...this.enterpriseErrors,
+        enterpriseName: '该企业已被创建',
+        canRequestJoin: true,
+      }
+      return
+    }
+    if (code === 'CREDIT_CODE_CONFLICT') {
+      this.enterpriseErrors = {
+        ...this.enterpriseErrors,
+        unifiedSocialCreditCode: '该统一社会信用代码已关联企业',
+      }
+      return
+    }
+    this.enterpriseErrors = {
+      ...this.enterpriseErrors,
+      global: '企业创建失败，请稍后重试',
+    }
+    this.dispatchPublicEvent('error', {
+      code: 'ENTERPRISE_CREATE_FAILED',
+      message: '企业创建失败，请稍后重试',
+      recoverable: true,
+    })
+  }
+
+  private readonly validateTeamName = () => {
+    const length = Array.from(this.teamName.trim()).length
+    this.teamErrors = {
+      ...this.teamErrors,
+      teamName: length >= 2 && length <= 30 ? '' : '请输入 2-30 个字的团队名称',
+    }
+  }
+
+  private readonly submitTeam = async (event: SubmitEvent) => {
+    event.preventDefault()
+    const transport = this.transport
+    const teamName = this.teamName.trim()
+    const length = Array.from(teamName).length
+    if (!transport || this.submitting) return
+    if (length < 2 || length > 30) {
+      this.validateTeamName()
+      return
+    }
+    this.submitting = true
+    this.teamErrors = { ...EMPTY_TEAM_ERRORS }
+    try {
+      const organization = normalizeCreatedOrganization(
+        await transport.createTeam({ teamName }),
+        'team',
+      )
+      this.createdOrganization = organization
+      this.step = 'team-success'
+      this.dispatchPublicEvent('organization-created', {
+        organizationId: organization.id,
+        type: 'team',
+      })
+    } catch (error) {
+      if (
+        error instanceof OrganizationOnboardingTransportError &&
+        error.code === 'TEAM_NAME_CONFLICT'
+      ) {
+        this.teamErrors = { ...this.teamErrors, teamName: '你已有同名团队，请更换名称' }
+      } else {
+        this.teamErrors = { ...this.teamErrors, global: '团队创建失败，请稍后重试' }
+        this.dispatchPublicEvent('error', {
+          code: 'TEAM_CREATE_FAILED',
+          message: '团队创建失败，请稍后重试',
+          recoverable: true,
+        })
+      }
+    } finally {
+      this.submitting = false
+    }
+  }
+
+  private readonly requestAuthentication = () => {
+    const organizationId = this.createdOrganization?.id
+    if (organizationId) {
+      this.dispatchPublicEvent('enterprise-authentication-requested', { organizationId })
+    }
+  }
+
+  private readonly deferAuthentication = () => {
+    const organizationId = this.createdOrganization?.id
+    if (organizationId) {
+      this.dispatchPublicEvent('enterprise-authentication-deferred', { organizationId })
+    }
+  }
+
+  private readonly requestTeamUpgrade = () => {
+    const organizationId = this.createdOrganization?.id
+    if (organizationId) {
+      this.dispatchPublicEvent('team-upgrade-requested', { organizationId })
+    }
+  }
+
+  private readonly requestTeamInvites = () => {
+    const organizationId = this.createdOrganization?.id
+    if (organizationId) {
+      this.dispatchPublicEvent('team-invite-members-requested', { organizationId })
+    }
+  }
+
+  private dispatchPublicEvent<K extends keyof OrganizationOnboardingEventMap>(
+    type: K,
+    detail: OrganizationOnboardingEventMap[K]['detail'],
+  ) {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }))
+  }
+}
+
+export const INTERNAL_ORGANIZATION_ONBOARDING_TAG =
+  'uniplat-internal-organization-onboarding' as const
+
+if (
+  typeof customElements !== 'undefined' &&
+  !customElements.get(INTERNAL_ORGANIZATION_ONBOARDING_TAG)
+) {
+  customElements.define(INTERNAL_ORGANIZATION_ONBOARDING_TAG, InternalOrganizationOnboarding)
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uniplat-internal-organization-onboarding': InternalOrganizationOnboarding
+  }
+}
+
+function normalizeCreatedOrganization(
+  value: CreatedOnboardingOrganization,
+  expectedType: 'enterprise' | 'team',
+): CreatedOnboardingOrganization {
+  if (!value || value.type !== expectedType) {
+    throw new OrganizationOnboardingTransportError('UNKNOWN')
+  }
+  const id = normalizeText(value.id, 128)
+  const name = normalizeText(value.name, 100)
+  if (!id || !name) throw new OrganizationOnboardingTransportError('UNKNOWN')
+  return { id, name, type: expectedType }
+}
+
+function normalizeText(value: unknown, maxLength: number): string {
+  return typeof value === 'string' ? value.trim().slice(0, maxLength) : ''
+}
+
+type IconName = 'alert' | 'building' | 'building-check' | 'building-plus' | 'check' | 'users'
+
+function icon(name: IconName): TemplateResult {
+  if (name === 'building' || name === 'building-check' || name === 'building-plus') {
+    return html`<svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M5 21V6l7-3 7 3v15M3 21h18" />
+      <path d="M9 8h1M14 8h1M9 12h1M14 12h1M9 16h1M14 16h1" />
+      ${name === 'building-check' ? html`<path d="m14.5 18.5 1.5 1.5 3-3" />` : nothing}
+      ${name === 'building-plus' ? html`<path d="M17 15v5M14.5 17.5h5" />` : nothing}
+    </svg>`
+  }
+  if (name === 'users') {
+    return html`<svg viewBox="0 0 24 24" aria-hidden="true">
+      <circle cx="9" cy="8" r="3" />
+      <path d="M3.5 20v-2a5.5 5.5 0 0 1 11 0v2M16 5.5a3 3 0 0 1 0 5.5M17 14a5 5 0 0 1 3.5 4.8V20" />
+    </svg>`
+  }
+  if (name === 'alert') {
+    return html`<svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 3 2.8 20h18.4zM12 9v4M12 17h.01" />
+    </svg>`
+  }
+  return html`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4 10-10" /></svg>`
+}