@linxin666/dsh-pet 0.1.20 → 0.2.1

package/src/client/PetSprite.tsx

@@ -9,8 +9,8 @@
  * @module @linxin666/dsh-pet/client/PetSprite
  */
 
-import { useEffect, useRef, useState } from 'react'
-import type { PointerEvent as ReactPointerEvent, ReactPortal } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactPortal } from 'react'
 import { createPortal } from 'react-dom'
 import clsx from 'clsx'
 import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
@@ -19,7 +19,8 @@ import type { PetStateView } from '../service.ts'
 import type { PetDefinition } from '../registry.ts'
 import type { PetFeedback } from './pet-store.ts'
 import { framePosition, rowOfTrack, trimTrack } from './spritesheet.ts'
-import type { PetAnimation } from '../state.ts'
+import { sequenceFrameAt } from './sequences.ts'
+import { animationForPhase, type PetAnimation } from '../state.ts'
 import { NS } from './locales.ts'
 import styles from './pet.module.css'
 
@@ -66,10 +67,29 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   const { snapshot, definition, display, feedback } = props
   const spriteRef = useRef<HTMLDivElement | null>(null)
   const floatRef = useRef<HTMLDivElement | null>(null)
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  // Whichever bubble surface is currently rendered (feedback, the session
+  // stack, or the legacy status bubble) — only one exists at a time.
+  const bubbleRef = useRef<HTMLDivElement | null>(null)
   const [imageReady, setImageReady] = useState(false)
   const [hovered, setHovered] = useState(false)
+  // Multi-session bubble stack: collapsed by default (only the display
+  // session's bubble + a '+N' badge), expanded on stack hover (peek) or by
+  // tapping the badge (pinned, for touch). The display session's bubble
+  // anchors the bottom of the stack and never moves when extras open above
+  // it, so the pointer target cannot flicker.
+  const [stackPeek, setStackPeek] = useState(false)
+  const [stackPinned, setStackPinned] = useState(false)
   const [renaming, setRenaming] = useState(false)
+  const [panelAbove, setPanelAbove] = useState(false)
+  // Extra margin-bottom for the above-panel so it stacks clear of the
+  // bubbles instead of overlapping them (both anchor at the sprite's top).
+  const [panelLift, setPanelLift] = useState(0)
   const [nameDraft, setNameDraft] = useState('')
+  // Explicit IME composition tracking: some input methods (WeChat IME on
+  // Windows) report keydowns with isComposing === false mid-composition, so
+  // the native flag alone is not a safe submit/cancel guard (#303).
+  const composingRef = useRef(false)
   const [dragPos, setDragPos] = useState<{ right: number; bottom: number } | null>(null)
   const dragRef = useRef<{ startX: number; startY: number; right: number; bottom: number } | null>(null)
   const hideTimerRef = useRef<number | null>(null)
@@ -83,6 +103,7 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   const columns = definition.columns
   const rows = definition.rows
   const tracks = definition.tracks
+  const sequences = definition.sequences
 
   // Load the atlas once; the definition carries the authoritative per-row
   // frame counts and per-track durations, so nothing else is fetched.
@@ -106,14 +127,17 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   // its track's first frame instead of animating (presentation-only; the
   // animation state machine is untouched).
   const spriteScale = display.size / cell.height
+  const phase = snapshot?.phase ?? 'idle'
   const animation = snapshot?.animation ?? 'idle'
   const scaleRef = useRef(spriteScale)
   scaleRef.current = spriteScale
   useEffect(() => {
     const reduceMotion = typeof window !== 'undefined'
       && window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true
-    const row = rowOfTrack(animation)
-    const track = trimTrack(tracks[animation], rows[row] ?? tracks[animation].frames.length)
+    const sequence = animation === animationForPhase(phase) ? sequences?.[phase] : undefined
+    const leadAnimation = sequence?.[0] ?? animation
+    const row = rowOfTrack(leadAnimation)
+    const track = trimTrack(tracks[leadAnimation], rows[row] ?? tracks[leadAnimation].frames.length)
     // Paint one static sprite frame up front either way, so the pet is never
     // blank while the loop heat-up runs.
     const leadCol = track.frames[0]!
@@ -124,9 +148,26 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
     if (reduceMotion) return
     let raf = 0
     let last = performance.now()
+    let sequenceElapsed = 0
     const tick = (ts: number): void => {
       const delta = ts - last
       last = ts
+      if (sequence !== undefined) {
+        sequenceElapsed += delta
+        const current = sequenceFrameAt(sequence, tracks, sequenceElapsed)
+        const currentRow = rowOfTrack(current.animation)
+        const currentTrack = trimTrack(
+          tracks[current.animation],
+          rows[currentRow] ?? tracks[current.animation].frames.length,
+        )
+        const col = currentTrack.frames[current.frameIndex]!
+        const pos = framePosition(cell, columns, currentRow, col, scaleRef.current)
+        if (spriteRef.current !== null) {
+          spriteRef.current.style.backgroundPosition = pos.x + 'px ' + pos.y + 'px'
+        }
+        raf = requestAnimationFrame(tick)
+        return
+      }
       // row/track come from the effect scope: they were computed once above
       // and this effect re-runs when animation/tracks/rows change, so the
       // per-frame recompute (trimTrack slices fresh arrays) is pure waste.
@@ -159,7 +200,7 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
     }
     raf = requestAnimationFrame(tick)
     return () => cancelAnimationFrame(raf)
-  }, [animation, cell, columns, rows, tracks])
+  }, [animation, phase, cell, columns, rows, tracks, sequences])
 
   // Auto-clear the feedback bubble after its CSS animation. The callback
   // rides a ref so re-renders never reset the timer: the 2s poll rebuilds
@@ -183,6 +224,11 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
     }
   }
 
+  // Clear any pending auto-hide timer on unmount: a stray callback after
+  // teardown reads window through react-dom and failed CI runs with
+  // "window is not defined" (slow-runner timing, PetSprite.test.tsx).
+  useEffect(() => () => clearHideTimer(), [])
+
   const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>): void => {
     e.preventDefault()
     ;(e.target as HTMLElement).setPointerCapture?.(e.pointerId)
@@ -210,16 +256,58 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
   const pos = dragPos ?? { right: display.right, bottom: display.bottom }
   const spriteWidth = Math.round(cell.width * spriteScale)
   const spriteHeight = Math.round(cell.height * spriteScale)
-  // Concurrent sessions each render their own bubble (stacked above the
-  // sprite); the legacy single 'bubble' is the fallback when the host serves
-  // no per-session list. The hover panel now sits beside the sprite, so the
-  // bubbles stay visible and clickable while hovering — no region swap.
+
+  // Concurrent sessions share one bubble slot: only the display session
+  // speaks by default, and the rest hide behind a '+N' badge until the stack
+  // is hovered/pinned open. The legacy single 'bubble' is the fallback when
+  // the host serves no per-session list. The hover panel normally sits below
+  // the sprite, so the bubbles stay visible and clickable — no region swap.
   const sessionBubbles = snapshot?.sessions ?? []
+  const stackOpen = stackPeek || stackPinned
+  const collapsed = !stackOpen && sessionBubbles.length > 1
+  const visibleSessions = collapsed ? sessionBubbles.slice(0, 1) : sessionBubbles
   const statusBubble = feedback === null && sessionBubbles.length === 0
     ? snapshot?.bubble
     : undefined
+  // The display session's inner whisper (碎碎念) — short inner-voice copy
+  // woken by the model's output. Instead of a second bubble of its own, a
+  // fresh whisper takes over the display session's bubble (the stack top, or
+  // the single status bubble) and re-tints it, so the pet never wears two
+  // voices at once. Interaction feedback takes over the whole bubble area
+  // while it plays, so whispers yield to it like status copy.
+  const whisper = feedback === null ? snapshot?.whisper : undefined
+  const bubblePresent = feedback !== null || sessionBubbles.length > 0 || statusBubble !== undefined || whisper !== undefined
   const displayName = snapshot?.name ?? definition.displayName
 
+  // A settled session list can no longer stay pinned open.
+  useEffect(() => {
+    if (sessionBubbles.length <= 1) setStackPinned(false)
+  }, [sessionBubbles.length])
+
+  useLayoutEffect(() => {
+    if (!hovered) {
+      setPanelAbove(false)
+      setPanelLift(0)
+      return
+    }
+    const updatePanelPlacement = (): void => {
+      const sprite = spriteRef.current
+      const panel = panelRef.current
+      if (sprite === null || panel === null) return
+      const availableBelow = window.innerHeight - sprite.getBoundingClientRect().bottom
+      const above = availableBelow < panel.getBoundingClientRect().height + 8
+      setPanelAbove(above)
+      // The fallback above-placement shares the sprite's top edge with the
+      // bubble(s); lift the panel by the bubble area's height so the two
+      // never overlap (8px base gap + 6px clearance above the top bubble).
+      const bubbleHeight = above ? bubbleRef.current?.getBoundingClientRect().height ?? 0 : 0
+      setPanelLift(bubbleHeight > 0 ? Math.ceil(bubbleHeight) + 14 : 0)
+    }
+    updatePanelPlacement()
+    window.addEventListener('resize', updatePanelPlacement)
+    return () => window.removeEventListener('resize', updatePanelPlacement)
+  }, [hovered, renaming, pos.right, pos.bottom, display.size, bubblePresent, sessionBubbles.length, stackOpen, feedback])
+
   const float = (
     <div
       ref={floatRef}
@@ -230,16 +318,21 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
         setHovered(true)
       }}
       onPointerLeave={(e) => {
-        // The panel renders OUTSIDE the container's box (absolute, beside
+        // The panel renders OUTSIDE the container's box (absolute, below
         // the sprite), so moving onto it fires pointerleave on the container.
         // Treat a target still inside the container's DOM (the overflowed
         // panel) as "still hovering"; otherwise give the pointer a short
-        // grace period to reach the panel across the gap beside the sprite.
+        // grace period to reach the panel across the gap below the sprite.
         // The bridge ('.panel::after') keeps the pointer inside the hit
         // area, and the grace period covers a slow mouse crossing the
         // remaining sliver.
         const next = e.relatedTarget
         if (next instanceof Node && floatRef.current?.contains(next)) return
+        // Never auto-hide while the rename box is open: moving the pointer
+        // onto an IME candidate window (an OS-level window outside the
+        // webview) fires pointerleave, and unmounting the input mid-IME-
+        // composition crashes some input methods / the renderer (#303).
+        if (renaming) return
         clearHideTimer()
         hideTimerRef.current = window.setTimeout(() => setHovered(false), 300)
       }}
@@ -251,7 +344,7 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
           width: spriteWidth,
           height: spriteHeight,
           backgroundImage: imageReady ? 'url(' + definition.atlasUrl + ')' : undefined,
-          backgroundSize: (cell.width * columns * spriteScale) + 'px ' + (cell.height * rows.length * spriteScale) + 'px',
+          backgroundSize: (cell.width * columns * spriteScale) + 'px ' + (cell.height * (definition.atlasRows ?? rows.length) * spriteScale) + 'px',
           backgroundRepeat: 'no-repeat',
           backgroundPosition: '0 0',
           cursor: dragRef.current === null ? 'grab' : 'grabbing',
@@ -269,33 +362,88 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
         aria-label={definition.displayName}
       />
       {feedback !== null && (
-        <div key={feedback.at} className={clsx(styles.bubble, feedback.kind === 'feed' ? styles.bubbleFeed : styles.bubblePet)}>
+        <div key={feedback.at} ref={bubbleRef} className={clsx(styles.bubble, feedback.kind === 'feed' ? styles.bubbleFeed : styles.bubblePet)}>
           {feedback.text}
         </div>
       )}
-      {feedback === null && sessionBubbles.length > 0 && (
-        <div className={styles.bubbleStack}>
-          {sessionBubbles.map(session => (
-            <button
-              key={session.sessionId}
-              type="button"
-              className={clsx(styles.bubble, styles.bubbleStatus, styles.bubbleClickable)}
-              title={props.t('pet.openSessionHint')}
-              onClick={() => { props.onOpenSession(session.sessionId) }}
+      {feedback === null && (sessionBubbles.length > 0 || statusBubble !== undefined || whisper !== undefined) && (
+        <div
+          ref={bubbleRef}
+          className={styles.bubbleStack}
+          onPointerEnter={() => setStackPeek(true)}
+          onPointerLeave={() => setStackPeek(false)}
+        >
+          {visibleSessions.map((session, index) => {
+            // The whisper rides the display session's bubble — the stack's
+            // primary entry (DOM-first, rendered bottom-most by the reversed
+            // column so it stays glued to the sprite when extras open above).
+            // The key swap restarts the entrance animation so the mood change
+            // reads as the bubble re-speaking.
+            const speaksWhisper = index === 0 && whisper !== undefined
+            const bubble = (
+              <button
+                key={speaksWhisper ? 'whisper:' + whisper : session.sessionId}
+                type="button"
+                className={clsx(
+                  styles.bubble,
+                  styles.bubbleStatus,
+                  styles.bubbleClickable,
+                  speaksWhisper && styles.bubbleWhisper,
+                )}
+                title={props.t('pet.openSessionHint')}
+                onClick={() => { props.onOpenSession(session.sessionId) }}
+              >
+                {speaksWhisper ? whisper : session.bubble}
+              </button>
+            )
+            // The primary bubble carries the '+N' badge while other sessions
+            // hide behind it; the badge toggles the pinned (touch) expansion.
+            if (index !== 0 || sessionBubbles.length <= 1) return bubble
+            return (
+              <span key="primary" className={styles.bubbleAnchor}>
+                {bubble}
+                <button
+                  type="button"
+                  className={styles.bubbleMore}
+                  title={stackOpen
+                    ? props.t('pet.collapseSessions')
+                    : props.t('pet.moreSessions', { n: sessionBubbles.length - 1 })}
+                  aria-label={stackOpen
+                    ? props.t('pet.collapseSessions')
+                    : props.t('pet.moreSessions', { n: sessionBubbles.length - 1 })}
+                  aria-expanded={stackOpen}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setStackPinned(open => !open)
+                  }}
+                >
+                  {stackOpen ? '×' : '+' + String(sessionBubbles.length - 1)}
+                </button>
+              </span>
+            )
+          })}
+          {sessionBubbles.length === 0 && (statusBubble !== undefined || whisper !== undefined) && (
+            // The key swap (status copy <-> whisper) restarts the entrance
+            // animation on every mood change.
+            <div
+              key={whisper === undefined ? 'status' : 'whisper:' + whisper}
+              className={clsx(styles.bubble, styles.bubbleStatus, whisper !== undefined && styles.bubbleWhisper)}
+              role="status"
+              aria-live="polite"
             >
-              {session.bubble}
-            </button>
-          ))}
-        </div>
-      )}
-      {statusBubble !== undefined && (
-        <div className={clsx(styles.bubble, styles.bubbleStatus)} role="status" aria-live="polite">
-          {statusBubble}
+              {whisper ?? statusBubble}
+            </div>
+          )}
         </div>
       )}
       {hovered && dragRef.current === null && (
         <div
-          className={styles.panel}
+          ref={panelRef}
+          className={clsx(styles.panel, panelAbove && styles.panelAbove)}
+          data-placement={panelAbove ? 'above' : 'below'}
+          style={panelAbove && panelLift > 0
+            ? ({ marginBottom: panelLift } as CSSProperties)
+            : undefined}
           onPointerEnter={() => {
             // Reaching the panel (or its bridge) must cancel any hide timer
             // the container's pointerleave may have armed while the pointer
@@ -312,12 +460,16 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
                 placeholder={props.t('pet.namePlaceholder')}
                 autoFocus
                 onChange={(e) => setNameDraft(e.target.value)}
+                onCompositionStart={() => { composingRef.current = true }}
+                onCompositionEnd={() => { composingRef.current = false }}
                 onKeyDown={(e) => {
                   // While an IME composition is active (e.g. selecting a
                   // Chinese candidate), Enter/Escape keydowns belong to the
                   // input method: ignore them so candidate selection can
-                  // neither submit the draft nor close the rename box.
-                  if (e.nativeEvent.isComposing) return
+                  // neither submit the draft nor close the rename box. The
+                  // explicit ref and the 'Process' key cover IMEs that mark
+                  // composition keydowns with isComposing === false (#303).
+                  if (composingRef.current || e.nativeEvent.isComposing || e.key === 'Process') return
                   if (e.key === 'Enter') {
                     const trimmed = nameDraft.trim()
                     if (trimmed !== '') {
@@ -347,11 +499,11 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
             <>
               <div className={styles.rankRow}>
                 <span className={styles.nameCell}>{displayName}</span>
-                <span>{props.t('pet.rank', { rank: snapshot?.affinity.rank ?? '?' })}</span>
+                <span className={styles.statRank}>{props.t('pet.rank', { rank: snapshot?.affinity.rank ?? '?' })}</span>
               </div>
               <div className={styles.rankRow}>
-                <span>{props.t('pet.treats', { n: snapshot?.treats.stocked ?? 0 })}</span>
-                <span>{props.t('pet.points', { points: snapshot?.affinity.points ?? 0 })}</span>
+                <span className={styles.statTreats}>{props.t('pet.treats', { n: snapshot?.treats.stocked ?? 0 })}</span>
+                <span className={styles.statPoints}>{props.t('pet.points', { points: snapshot?.affinity.points ?? 0 })}</span>
               </div>
               <div className={styles.actions}>
                 <button type="button" className={styles.action} onClick={props.onFeed}>
@@ -361,6 +513,9 @@ export function PetSprite(props: PetSpriteProps): ReactPortal {
                   type="button"
                   className={styles.action}
                   onClick={() => {
+                    // Cancel any pending hide so the rename box cannot
+                    // unmount right as the user starts typing (#303).
+                    clearHideTimer()
                     setNameDraft(displayName)
                     setRenaming(true)
                   }}

package/src/client/PluginSettingsCard.tsx

@@ -8,7 +8,7 @@
  * ui-plugin-config PluginCard in a self-contained slice.
  */
 
-import { useState, type ReactNode } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
 import type { CardShell } from './settings-form.ts'
 import css from './settings-card.module.css'
 
@@ -56,6 +56,12 @@ export interface PluginSettingsCardProps<TKey extends string = string> {
    * already provides the selection.
    */
   alwaysOpen?: boolean
+  /**
+   * Hide the save/discard footer: cards whose body applies its own changes
+   * immediately (an embedded external settings section) have no staged
+   * edits, so the footer would sit there permanently disabled.
+   */
+  hideFooter?: boolean
   /** The plugin's controls. */
   children: ReactNode
 }
@@ -140,6 +146,9 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
           <div className={css.body}>
             {!state.writable ? <p className={css.readOnly} role="status">{props.t('settings.readOnly')}</p> : null}
             {props.children}
+            {props.hideFooter === true
+              ? null
+              : (
             <div className={css.footer}>
               {state.failed
                 ? (
@@ -165,6 +174,7 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
                 {props.t(!state.saving ? 'settings.save' : 'settings.saving')}
               </button>
             </div>
+              )}
           </div>
         )
         : null}
@@ -245,6 +255,210 @@ export function ValueField(props: FieldProps & {
   )
 }
 
+const NON_SKIN_BODY_MARKERS = new Set(['dshSkinCenter', 'dshSidebarCollapsed'])
+// 检测使用使用皮肤，用了皮肤退回原生select样式，防止样式冲突。默认外观下使用优化后的select样式。
+function isSkinActive(): boolean {
+  const datasetList = Object.keys(document.body.dataset)
+  const isActive = datasetList.some(key => key.startsWith('dsh') && !NON_SKIN_BODY_MARKERS.has(key))
+  return isActive
+}
+
+interface SelectOption {
+  value: string
+  label: string
+}
+
+const SELECT_CLOSE_MS = 100
+
+/**
+ * The shared dual-mode select control. While an appearance skin is active it
+ * renders the legacy native `<select>` untouched, so element-level skin
+ * selectors keep working; under the default appearance it renders a
+ * self-drawn `role="listbox"` popup whose open/close is transition-animated.
+ * Staged cards reach it through BooleanField/ChoiceField; immediate-apply
+ * editors (the side-card prefs) bind it directly through onEdit.
+ * 双模式下拉框：皮肤激活时用原生 select，默认外观用自绘动画弹层。
+ */
+export function SelectField(props: {
+  id: string
+  options: ReadonlyArray<SelectOption>
+  value: string
+  disabled: boolean
+  invalid: boolean
+  onEdit: (text: string) => void
+}) {
+  const { id, options, value } = props
+  const [open, setOpen] = useState(false)
+  const [closing, setClosing] = useState(false)
+  const [phase, setPhase] = useState<'initial' | 'open'>('initial')
+  const [activeIndex, setActiveIndex] = useState(0)
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const wrapRef = useRef<HTMLDivElement | null>(null)
+  const popupRef = useRef<HTMLDivElement | null>(null)
+
+  const currentIndex = () => {
+    const index = options.findIndex(option => option.value === value)
+    return index >= 0 ? index : 0
+  }
+
+  const close = useCallback(() => {
+    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
+    setClosing(true)
+    closeTimer.current = setTimeout(() => {
+      setClosing(false)
+      setOpen(false)
+    }, SELECT_CLOSE_MS)
+  }, [])
+
+  const openPopup = () => {
+    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
+    setActiveIndex(currentIndex())
+    setPhase('initial')
+    setClosing(false)
+    setOpen(true)
+  }
+
+  const commit = (index: number) => {
+    const option = options[index]
+    if (option) props.onEdit(option.value)
+    close()
+  }
+
+  const onTriggerClick = () => {
+    if (props.disabled) return
+    if (open && !closing) close()
+    else openPopup()
+  }
+
+  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (props.disabled) return
+    const count = options.length
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+      case 'Enter':
+      case ' ':
+        event.preventDefault()
+        if (!open) {
+          openPopup()
+        } else if (!closing) {
+          if (event.key === 'ArrowDown') setActiveIndex(index => (index + 1) % count)
+          else if (event.key === 'ArrowUp') setActiveIndex(index => (index - 1 + count) % count)
+          else commit(activeIndex)
+        }
+        break
+      case 'Escape':
+        if (open) {
+          event.preventDefault()
+          event.stopPropagation()
+          close()
+        }
+        break
+      case 'Tab':
+        if (open) close()
+        break
+    }
+  }
+
+  useEffect(() => () => {
+    if (closeTimer.current !== undefined) clearTimeout(closeTimer.current)
+  }, [])
+  useLayoutEffect(() => {
+    if (open && !closing && phase === 'initial') {
+      void popupRef.current?.offsetHeight
+      setPhase('open')
+    }
+  }, [open, closing, phase])
+
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target
+      if (target instanceof Node && !wrapRef.current?.contains(target)) close()
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => document.removeEventListener('pointerdown', onPointerDown)
+  }, [open, close])
+
+  useEffect(() => {
+    if (props.disabled && open) close()
+  }, [props.disabled, open, close])
+
+  // 使用了皮肤则退回原生select样式防止样式冲突。
+  if (isSkinActive()) {
+    return (
+      <select
+        id={id}
+        className={css.select}
+        value={value}
+        disabled={props.disabled}
+        onChange={(event) => { props.onEdit(event.target.value) }}
+      >
+        {options.map(option => (
+          <option key={option.value} value={option.value}>{option.label}</option>
+        ))}
+      </select>
+    )
+  }
+
+  const label = options.find(option => option.value === value)?.label ?? ''
+  const popupClass = closing
+    ? `${css.selectPopup} ${css.selectPopupClose}`
+    : phase === 'open'
+      ? `${css.selectPopup} ${css.selectPopupOpen}`
+      : css.selectPopup
+  return (
+    <div className={css.selectWrap} ref={wrapRef}>
+      <button
+        type="button"
+        id={id}
+        className={`${css.select} ${css.selectButton}`}
+        disabled={props.disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-activedescendant={open ? `${id}-o${activeIndex}` : undefined}
+        aria-invalid={props.invalid || undefined}
+        onClick={onTriggerClick}
+        onKeyDown={onKeyDown}
+      >
+        <span className={css.selectLabel}>{label}</span>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={open ? `${css.selectChevron} ${css.selectChevronOpen}` : css.selectChevron}
+          aria-hidden="true"
+        >
+          <path
+            d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+      {open
+        ? (
+          <div className={popupClass} role="listbox" ref={popupRef}>
+            {options.map((option, index) => (
+              <div
+                key={option.value}
+                id={`${id}-o${index}`}
+                role="option"
+                aria-selected={option.value === value}
+                className={`${css.selectOption}${option.value === value ? ` ${css.selectOptionSelected}` : ''}${index === activeIndex && !closing ? ` ${css.selectOptionActive}` : ''}`}
+                onClick={() => { commit(index) }}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
+        )
+        : null}
+    </div>
+  )
+}
+
 /** A staged boolean field: 继承 / 开 / 关. */
 export function BooleanField(props: FieldProps & {
   /** Copy for the inherit option. */
@@ -274,17 +488,18 @@ export function BooleanField(props: FieldProps & {
           )
           : null}
       </div>
-      <select
+      <SelectField
         id={props.id}
-        className={css.select}
+        options={[
+          { value: '', label: props.inheritLabel },
+          { value: 'true', label: props.onLabel },
+          { value: 'false', label: props.offLabel },
+        ]}
         value={props.text}
         disabled={props.disabled}
-        onChange={(event) => { props.onEdit(event.target.value) }}
-      >
-        <option value="">{props.inheritLabel}</option>
-        <option value="true">{props.onLabel}</option>
-        <option value="false">{props.offLabel}</option>
-      </select>
+        invalid={props.invalid}
+        onEdit={props.onEdit}
+      />
       <p className={css.hint}>{props.hint}</p>
     </div>
   )
@@ -317,18 +532,14 @@ export function ChoiceField(props: FieldProps & {
           )
           : null}
       </div>
-      <select
+      <SelectField
         id={props.id}
-        className={css.select}
+        options={[{ value: '', label: props.inheritLabel }, ...props.choices]}
         value={props.text}
         disabled={props.disabled}
-        onChange={(event) => { props.onEdit(event.target.value) }}
-      >
-        <option value="">{props.inheritLabel}</option>
-        {props.choices.map(choice => (
-          <option key={choice.value} value={choice.value}>{choice.label}</option>
-        ))}
-      </select>
+        invalid={props.invalid}
+        onEdit={props.onEdit}
+      />
       <p className={props.invalid ? css.invalid : css.hint}>
         {props.invalid ? props.invalidLabel : props.hint}
       </p>