@csntgao/uni-base 0.1.2 → 0.1.4

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

@@ -3,6 +3,8 @@ import { LitElement, css, html, nothing, type TemplateResult } from 'lit'
 export type OrganizationSelectorType = 'enterprise' | 'team'
 export type EnterpriseVerificationStatus =
   'unverified' | 'pending' | 'rejected' | 'verified' | 'expired'
+export type OrganizationSelectorPresentation = 'inline' | 'modal'
+export type OrganizationSelectorTypeFilter = 'all' | OrganizationSelectorType
 
 export interface OrganizationSelectorEntry {
   id: string
@@ -12,12 +14,16 @@ export interface OrganizationSelectorEntry {
   role?: string
   memberCount?: number
   lastEnteredLabel?: string
+  unifiedSocialCreditCode?: string
 }
 
 export interface OrganizationSelectorConfig {
   organizations: readonly OrganizationSelectorEntry[]
   selectedOrganizationId?: string
   rememberSelection?: boolean
+  displayName?: string
+  maskedMobile?: string
+  presentation?: OrganizationSelectorPresentation
 }
 
 export interface OrganizationSelectorEventMap {
@@ -26,6 +32,17 @@ export interface OrganizationSelectorEventMap {
     rememberSelection: boolean
   }>
   'organization-create-requested': CustomEvent<Record<string, never>>
+  'logout-requested': CustomEvent<Record<string, never>>
+}
+
+export type OrganizationEntryDecision =
+  | { kind: 'personal' }
+  | { kind: 'auto-enter'; organizationId: string }
+  | { kind: 'prompt'; selectedOrganizationId: string }
+
+export interface OrganizationEntryDecisionInput {
+  organizations: readonly OrganizationSelectorEntry[]
+  rememberedOrganizationId?: string
 }
 
 interface ResolvedOrganizationSelectorEntry {
@@ -36,6 +53,7 @@ interface ResolvedOrganizationSelectorEntry {
   role: string
   memberCount: number | null
   lastEnteredLabel: string
+  searchKey: string
 }
 
 export class UniplatOrganizationSelector extends LitElement {
@@ -43,15 +61,22 @@ export class UniplatOrganizationSelector extends LitElement {
     organizations: { state: true },
     selectedOrganizationId: { state: true },
     rememberSelection: { state: true },
+    displayName: { state: true },
+    maskedMobile: { state: true },
+    presentation: { state: true },
+    searchQuery: { state: true },
+    typeFilter: { state: true },
   }
 
   static override styles = css`
     :host {
-      --uniplat-organization-selector-width: 400px;
+      --uniplat-organization-selector-width: 420px;
       --uniplat-organization-selector-primary: #2e6bf5;
       --uniplat-organization-selector-text: #182634;
       --uniplat-organization-selector-muted: #7a8794;
       --uniplat-organization-selector-border: #e4ebf3;
+      --uniplat-organization-selector-overlay: rgba(24, 38, 52, 0.55);
+      --uniplat-organization-selector-modal-z-index: 1200;
       --uniplat-organization-selector-font-family:
         Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       display: block;
@@ -61,6 +86,13 @@ export class UniplatOrganizationSelector extends LitElement {
       line-height: 1.5;
     }
 
+    :host([data-presentation='modal']) {
+      position: fixed;
+      z-index: var(--uniplat-organization-selector-modal-z-index);
+      inset: 0;
+      width: auto;
+    }
+
     * {
       box-sizing: border-box;
     }
@@ -74,6 +106,20 @@ export class UniplatOrganizationSelector extends LitElement {
       cursor: pointer;
     }
 
+    .overlay {
+      display: grid;
+      width: 100%;
+      height: 100%;
+      padding: 24px;
+      overflow: auto;
+      background: var(--uniplat-organization-selector-overlay);
+      place-items: center;
+    }
+
+    .overlay .card {
+      width: min(var(--uniplat-organization-selector-width), 100%);
+    }
+
     .card {
       width: 100%;
       padding: 24px;
@@ -89,27 +135,105 @@ export class UniplatOrganizationSelector extends LitElement {
       margin: 0;
     }
 
+    .header {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 12px;
+    }
+
     h2 {
-      font-size: 20px;
+      font-size: 19px;
       font-weight: 800;
       line-height: 1.35;
     }
 
+    .identity {
+      flex: none;
+      overflow: hidden;
+      color: var(--uniplat-organization-selector-muted);
+      font-size: 12px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     .description {
       margin-top: 7px;
       color: var(--uniplat-organization-selector-muted);
+      font-size: 12.5px;
+    }
+
+    .search {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 15px;
+      padding: 0 12px;
+      border: 1px solid #e9eef5;
+      border-radius: 10px;
+      background: #f7f9fc;
+      color: #98a4b2;
+    }
+
+    .search input {
+      flex: 1;
+      min-width: 0;
+      min-height: 40px;
+      padding: 0;
+      border: 0;
+      color: var(--uniplat-organization-selector-text);
+      background: transparent;
       font-size: 13px;
+      outline: none;
+    }
+
+    .search svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 11px;
+    }
+
+    .chip {
+      padding: 4px 11px;
+      border: 1px solid #e9eef5;
+      border-radius: 999px;
+      color: #6b7885;
+      background: #f4f7fb;
+      font-size: 12px;
+      font-weight: 650;
+    }
+
+    .chip.selected {
+      border-color: var(--uniplat-organization-selector-primary);
+      color: #ffffff;
+      background: var(--uniplat-organization-selector-primary);
     }
 
     .list {
-      display: grid;
-      gap: 9px;
-      max-height: 340px;
-      margin-top: 18px;
+      max-height: 392px;
+      margin-top: 4px;
       overflow-y: auto;
       scrollbar-gutter: stable;
     }
 
+    .group-label {
+      padding: 14px 0 8px;
+      color: #98a4b2;
+      font-size: 11.5px;
+      font-weight: 700;
+    }
+
+    .group {
+      display: grid;
+      gap: 9px;
+    }
+
     .organization {
       display: grid;
       grid-template-columns: 36px minmax(0, 1fr) 18px;
@@ -205,18 +329,27 @@ export class UniplatOrganizationSelector extends LitElement {
       white-space: nowrap;
     }
 
-    .radio {
+    .indicator {
       display: grid;
       place-items: center;
       width: 18px;
       height: 18px;
-      border: 1.5px solid #c7d1df;
-      border-radius: 50%;
       color: transparent;
     }
 
-    .selected .radio {
-      border-color: var(--uniplat-organization-selector-primary);
+    .indicator svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .organization:hover .indicator {
+      color: #c7d1df;
+    }
+
+    .organization.selected .indicator {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
       color: #ffffff;
       background: var(--uniplat-organization-selector-primary);
     }
@@ -254,21 +387,48 @@ export class UniplatOrganizationSelector extends LitElement {
       font-weight: 650;
     }
 
+    .actions {
+      display: flex;
+      align-items: stretch;
+      gap: 10px;
+      margin-top: 13px;
+    }
+
+    .logout,
     .enter {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 100%;
       min-height: 46px;
-      margin-top: 13px;
-      border: 0;
+      padding: 0 14px;
       border-radius: 10px;
-      color: #ffffff;
-      background: var(--uniplat-organization-selector-primary);
       font-size: 14px;
       font-weight: 700;
     }
 
+    .logout {
+      flex: none;
+      min-width: 104px;
+      border: 1px solid #dbe3ed;
+      color: #56636f;
+      background: #ffffff;
+    }
+
+    .logout:hover {
+      background: #f7f9fc;
+    }
+
+    .enter {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      border: 0;
+      color: #ffffff;
+      background: var(--uniplat-organization-selector-primary);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     .enter:disabled {
       cursor: not-allowed;
       background: #a9bff6;
@@ -278,7 +438,7 @@ export class UniplatOrganizationSelector extends LitElement {
       display: grid;
       min-height: 120px;
       place-items: center;
-      margin-top: 18px;
+      margin-top: 14px;
       border: 1px dashed #dce5f0;
       border-radius: 10px;
       color: #8b98a6;
@@ -300,14 +460,25 @@ export class UniplatOrganizationSelector extends LitElement {
   declare private organizations: readonly ResolvedOrganizationSelectorEntry[]
   declare private selectedOrganizationId: string
   declare private rememberSelection: boolean
+  declare private displayName: string
+  declare private maskedMobile: string
+  declare private presentation: OrganizationSelectorPresentation
+  declare private searchQuery: string
+  declare private typeFilter: OrganizationSelectorTypeFilter
 
   private configured = false
+  private escapeGuardTarget: Document | null = null
 
   constructor() {
     super()
     this.organizations = []
     this.selectedOrganizationId = ''
     this.rememberSelection = true
+    this.displayName = ''
+    this.maskedMobile = ''
+    this.presentation = 'inline'
+    this.searchQuery = ''
+    this.typeFilter = 'all'
   }
 
   configure(config: OrganizationSelectorConfig): void {
@@ -319,26 +490,87 @@ export class UniplatOrganizationSelector extends LitElement {
     this.organizations = organizations
     this.selectedOrganizationId = organizations.some(({ id }) => id === requestedSelection)
       ? requestedSelection
-      : (organizations[0]?.id ?? '')
+      : defaultSelectedOrganizationId(organizations)
     this.rememberSelection = config.rememberSelection ?? true
+    this.displayName = normalizeOptionalText(config.displayName, 60)
+    this.maskedMobile = normalizeMaskedMobile(config.maskedMobile)
+    this.presentation = normalizePresentation(config.presentation)
+    this.searchQuery = ''
+    this.typeFilter = 'all'
     this.configured = true
+    this.syncPresentation()
     this.requestUpdate()
   }
 
+  override connectedCallback(): void {
+    super.connectedCallback()
+    this.syncPresentation()
+  }
+
+  override disconnectedCallback(): void {
+    this.releaseEscapeGuard()
+    super.disconnectedCallback()
+  }
+
   override render() {
     if (!this.configured) return nothing
+    if (this.presentation === 'modal') {
+      return html`<div class="overlay" part="overlay" role="presentation">
+        ${this.renderCard(true)}
+      </div>`
+    }
+    return this.renderCard(false)
+  }
+
+  private renderCard(modal: boolean) {
+    const visible = this.visibleOrganizations()
+    const recent = visible.filter((organization) => organization.lastEnteredLabel !== '')
+    const others = visible.filter((organization) => organization.lastEnteredLabel === '')
+    const selected = this.organizations.find(({ id }) => id === this.selectedOrganizationId)
     return html`
-      <section class="card" part="shell" aria-label="选择团队或企业">
-        <h2 part="title">选择要进入的团队 / 企业</h2>
+      <section
+        class="card"
+        part="shell"
+        role=${modal ? 'dialog' : 'group'}
+        aria-modal=${modal ? 'true' : nothing}
+        aria-label="选择团队或企业"
+      >
+        <div class="header">
+          <h2 part="title">选择要进入的团队 / 企业</h2>
+          ${
+            this.identityLabel()
+              ? html`<span class="identity" part="identity">${this.identityLabel()}</span>`
+              : nothing
+          }
+        </div>
         <p class="description" part="description">
-          你归属 ${this.organizations.length} 个团队 / 企业，可随时在导航中切换
+          你共归属 ${this.organizations.length} 个组织，进入后可在导航随时切换
         </p>
+        ${this.organizations.length ? this.renderSearch() : nothing}
+        ${this.organizations.length ? this.renderFilters() : nothing}
         ${
-          this.organizations.length
-            ? html`<div class="list" part="organization-list">
-                ${this.organizations.map((organization) => this.renderOrganization(organization))}
-              </div>`
-            : html`<div class="empty" part="empty">暂无可进入的团队或企业</div>`
+          !this.organizations.length
+            ? html`<div class="empty" part="empty">暂无可进入的团队或企业</div>`
+            : visible.length
+              ? html`<div class="list" part="organization-list">
+                  ${
+                    recent.length
+                      ? html`<div class="group-label" part="group-label">最近进入</div>
+                          <div class="group">
+                            ${recent.map((organization) => this.renderOrganization(organization))}
+                          </div>`
+                      : nothing
+                  }
+                  ${
+                    others.length
+                      ? html`<div class="group-label" part="group-label">全部组织</div>
+                          <div class="group">
+                            ${others.map((organization) => this.renderOrganization(organization))}
+                          </div>`
+                      : nothing
+                  }
+                </div>`
+              : html`<div class="empty" part="empty">没有匹配的团队或企业</div>`
         }
         <div class="footer-row">
           <label class="remember" part="remember-selection">
@@ -352,22 +584,74 @@ export class UniplatOrganizationSelector extends LitElement {
             记住选择，下次直接进入
           </label>
           <button class="create" part="create-action" type="button" @click=${this.requestCreate}>
-            + 创建
+            + 创建 / 加入
+          </button>
+        </div>
+        <div class="actions">
+          <button class="logout" part="logout-action" type="button" @click=${this.requestLogout}>
+            退出登录
+          </button>
+          <button
+            class="enter"
+            part="enter-action"
+            type="button"
+            ?disabled=${!selected}
+            @click=${this.requestEnter}
+          >
+            ${selected ? `进入「${selected.name}」` : '进入'}
           </button>
         </div>
-        <button
-          class="enter"
-          part="enter-action"
-          type="button"
-          ?disabled=${!this.selectedOrganizationId}
-          @click=${this.requestEnter}
-        >
-          进入
-        </button>
       </section>
     `
   }
 
+  private renderSearch() {
+    return html`
+      <div class="search" part="search">
+        ${icon('search')}
+        <input
+          type="search"
+          part="search-input"
+          placeholder="搜索名称，或输入统一社会信用代码"
+          aria-label="搜索团队或企业"
+          .value=${this.searchQuery}
+          @input=${(event: Event) => {
+            this.searchQuery = (event.currentTarget as HTMLInputElement).value
+          }}
+        />
+      </div>
+    `
+  }
+
+  private renderFilters() {
+    const enterprises = this.organizations.filter(({ type }) => type === 'enterprise').length
+    const teams = this.organizations.length - enterprises
+    const filters: readonly { value: OrganizationSelectorTypeFilter; label: string }[] = [
+      { value: 'all', label: `全部 ${this.organizations.length}` },
+      { value: 'enterprise', label: `企业 ${enterprises}` },
+      { value: 'team', label: `团队 ${teams}` },
+    ]
+    return html`
+      <div class="filters" part="type-filters">
+        ${filters.map(
+          (filter) => html`
+            <button
+              class="chip ${this.typeFilter === filter.value ? 'selected' : ''}"
+              part="type-filter"
+              type="button"
+              aria-pressed=${String(this.typeFilter === filter.value)}
+              @click=${() => {
+                this.typeFilter = filter.value
+              }}
+            >
+              ${filter.label}
+            </button>
+          `,
+        )}
+      </div>
+    `
+  }
+
   private renderOrganization(organization: ResolvedOrganizationSelectorEntry) {
     const selected = organization.id === this.selectedOrganizationId
     const badge = organizationBadge(organization)
@@ -397,11 +681,55 @@ export class UniplatOrganizationSelector extends LitElement {
           </span>
           <span class="meta">${organizationMeta(organization)}</span>
         </span>
-        <span class="radio">${icon('check')}</span>
+        <span class="indicator">${icon(selected ? 'check' : 'chevron')}</span>
       </button>
     `
   }
 
+  private identityLabel(): string {
+    return [this.displayName, this.maskedMobile].filter((value) => value !== '').join(' · ')
+  }
+
+  private visibleOrganizations(): readonly ResolvedOrganizationSelectorEntry[] {
+    const query = this.searchQuery.trim().toLowerCase()
+    return this.organizations.filter((organization) => {
+      if (this.typeFilter !== 'all' && organization.type !== this.typeFilter) return false
+      if (!query) return true
+      return organization.searchKey.includes(query)
+    })
+  }
+
+  private syncPresentation(): void {
+    if (this.configured && this.presentation === 'modal') {
+      this.setAttribute('data-presentation', 'modal')
+      this.captureEscapeGuard()
+      return
+    }
+    this.removeAttribute('data-presentation')
+    this.releaseEscapeGuard()
+  }
+
+  private captureEscapeGuard(): void {
+    if (!this.isConnected) return
+    const target = this.ownerDocument
+    if (this.escapeGuardTarget === target) return
+    this.releaseEscapeGuard()
+    target.addEventListener('keydown', this.guardEscape, true)
+    this.escapeGuardTarget = target
+  }
+
+  private releaseEscapeGuard(): void {
+    this.escapeGuardTarget?.removeEventListener('keydown', this.guardEscape, true)
+    this.escapeGuardTarget = null
+  }
+
+  // 强制态：Escape 不关闭选择弹窗，也不允许冒泡到宿主的全局关闭逻辑。
+  private readonly guardEscape = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape') return
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
   private readonly requestCreate = () => {
     this.dispatchEvent(
       new CustomEvent('organization-create-requested', {
@@ -412,6 +740,16 @@ export class UniplatOrganizationSelector extends LitElement {
     )
   }
 
+  private readonly requestLogout = () => {
+    this.dispatchEvent(
+      new CustomEvent('logout-requested', {
+        detail: {},
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
   private readonly requestEnter = () => {
     if (!this.selectedOrganizationId) return
     this.dispatchEvent(
@@ -427,6 +765,34 @@ export class UniplatOrganizationSelector extends LitElement {
   }
 }
 
+/**
+ * S.0 登录后的入口判定：0 个归属走个人态，仅 1 个归属或命中「记住选择」直接进入，
+ * 2 个及以上且未记住时才需要展示选择弹窗。函数无副作用，不读写宿主存储。
+ */
+export function resolveOrganizationEntryDecision(
+  input: OrganizationEntryDecisionInput,
+): OrganizationEntryDecision {
+  if (!input || !Array.isArray(input.organizations)) {
+    throw new TypeError('organization entry decision requires an organizations array')
+  }
+  const organizations = normalizeOrganizations(input.organizations)
+  const first = organizations[0]
+  if (!first) return { kind: 'personal' }
+  if (organizations.length === 1) return { kind: 'auto-enter', organizationId: first.id }
+  const remembered = normalizeOptionalText(input.rememberedOrganizationId, 128)
+  if (remembered && organizations.some(({ id }) => id === remembered)) {
+    return { kind: 'auto-enter', organizationId: remembered }
+  }
+  return { kind: 'prompt', selectedOrganizationId: defaultSelectedOrganizationId(organizations) }
+}
+
+function defaultSelectedOrganizationId(
+  organizations: readonly ResolvedOrganizationSelectorEntry[],
+): string {
+  const recent = organizations.find((organization) => organization.lastEnteredLabel !== '')
+  return recent?.id ?? organizations[0]?.id ?? ''
+}
+
 function normalizeOrganizations(
   organizations: readonly OrganizationSelectorEntry[],
 ): readonly ResolvedOrganizationSelectorEntry[] {
@@ -443,18 +809,39 @@ function normalizeOrganizations(
       throw new TypeError('organization-selector organization type is invalid')
     }
     const verificationStatus = normalizeVerificationStatus(type, organization.verificationStatus)
+    const name = normalizeRequiredText(organization.name, 'Organization name', 100)
+    const unifiedSocialCreditCode = normalizeOptionalText(organization.unifiedSocialCreditCode, 32)
     return {
       id,
-      name: normalizeRequiredText(organization.name, 'Organization name', 100),
+      name,
       type,
       verificationStatus,
       role: normalizeOptionalText(organization.role, 60),
       memberCount: normalizeMemberCount(organization.memberCount),
       lastEnteredLabel: normalizeOptionalText(organization.lastEnteredLabel, 80),
+      searchKey: `${name}${unifiedSocialCreditCode}`.toLowerCase(),
     }
   })
 }
 
+function normalizePresentation(
+  value: OrganizationSelectorPresentation | undefined,
+): OrganizationSelectorPresentation {
+  if (value === undefined) return 'inline'
+  if (value !== 'inline' && value !== 'modal') {
+    throw new TypeError('organization-selector presentation must be inline or modal')
+  }
+  return value
+}
+
+function normalizeMaskedMobile(value: unknown): string {
+  const mobile = normalizeOptionalText(value, 40)
+  if (/^1[3-9]\d{9}$/.test(mobile)) {
+    throw new TypeError('organization-selector only accepts a masked mobile number')
+  }
+  return mobile
+}
+
 function normalizeVerificationStatus(
   type: OrganizationSelectorType,
   value: EnterpriseVerificationStatus | undefined,
@@ -517,7 +904,7 @@ function organizationBadge(organization: ResolvedOrganizationSelectorEntry) {
   return { label: '企业', className: 'enterprise' }
 }
 
-function icon(name: OrganizationSelectorType | 'check'): TemplateResult {
+function icon(name: OrganizationSelectorType | 'check' | 'chevron' | 'search'): TemplateResult {
   if (name === 'enterprise') {
     return html`<svg viewBox="0 0 24 24" aria-hidden="true">
       <path d="M5 21V6l7-3 7 3v15M3 21h18" />
@@ -530,5 +917,14 @@ function icon(name: OrganizationSelectorType | 'check'): TemplateResult {
       <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 === 'chevron') {
+    return html`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6l-6 6" /></svg>`
+  }
+  if (name === 'search') {
+    return html`<svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
+      <path d="M21 21l-6 -6" />
+    </svg>`
+  }
   return html`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4 10-10" /></svg>`
 }