/* 推荐结构 */
#sign-language-host {
  position: fixed;
  inset-block-start: env(safe-area-inset-top, 1rem);
  inset-inline-end: env(safe-area-inset-right, 1rem);
  z-index: 2147483647; /* 最大整数，防止被覆盖 */
  contain: strict;      /* 布局/绘制/样式隔离，提升渲染性能 */
  pointer-events: none; /* 默认穿透，交互由内部元素控制 */
}

#sign-language-video {
  width: clamp(280px, 25vw, 480px);
  aspect-ratio: 4 / 3;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  background: #000; /* 信号丢失时保持黑底，避免闪烁 */
}

// 伪代码逻辑
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0.05) { // 重叠超 5%
      repositionWindow(entry.target.getBoundingClientRect());
    }
  });
}, { threshold: [0, 0.05, 0.5, 1] });

// 观察核心交互区域
document.querySelectorAll('[data-a11y-critical]').forEach(el => observer.observe(el));

<div id="sl-controls" role="toolbar" aria-label="手语窗口控制">
  <button aria-label="拖拽移动位置" class="drag-handle" tabindex="0">⋮⋮</button>
  <button aria-label="最小化为悬浮球" class="minimize-btn">−</button>
  <button aria-label="关闭手语翻译" class="close-btn">×</button>
  <button aria-label="镜像翻转" class="mirror-btn" aria-pressed="false">↔</button>
</div>

# .github/workflows/sign-language-qa.yml 片段
jobs:
  asset-qa:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: 技术指标扫描
        run: |
          ffprobe -v error -select_streams v:0 
            -show_entries stream=width,height,r_frame_rate,bit_rate,codec_name,pix_fmt 
            -of json ${{ matrix.asset }} | jq -e '.streams[0].width >= 1280 and .streams[0].height >= 960'
      - name: 内容合规扫描
        run: |
          python scripts/scan_sensitive.py --input ${{ matrix.asset }} --dict ./dicts/medical_legal.txt
      - name: AI 质量评估
        if: vars.PROD_TYPE == 'aigc'
        run: |
          python scripts/mos_predict.py --model ./models/slr_mos.onnx --input ${{ matrix.asset }} --threshold 4.0
      - name: 生成多码率分级
        run: |
          ./transcode_ladder.sh ${{ matrix.asset }} ./output/${{ matrix.id }}
      - name: 上传 CDN & 更新清单
        run: aws s3 sync ./output/ s3://cdn-bucket/sl/${{ matrix.id }}/ --metadata-directive REPLACE

// 核心接口设计
interface FloatingElement {
  id: string;
  priority: 1 | 2 | 3 | 4; // 对应 L1-L4
  rect: DOMRect;
  preferredPositions: Position[]; // ['top-right', 'bottom-right', 'top-left'...]
  onReposition: (newRect: DOMRect) => void;
  canMinimize: boolean;
  minimizeToken?: string; // 最小化后的悬浮球标识
}

class LayoutEngine {
  private registry = new Map<string, FloatingElement>();
  private viewportObserver: ResizeObserver;
  private collisionDetector: IntersectionObserver;

  register(el: FloatingElement) { /* ... */ }
  unregister(id: string) { /* ... */ }

  // 核心算法：基于约束求解的布局调度
  private resolveCollisions() {
    const critical = [...this.registry.values()].filter(e => e.priority === 1);
    const others = [...this.registry.values()].filter(e => e.priority > 1);

    // 1. 优先锁定 L1 (手语窗口) 位置
    critical.forEach(el => this.lockPosition(el));

    // 2. 其余元素按优先级降序，寻找非重叠可行解
    others.sort((a, b) => a.priority - b.priority).forEach(el => {
      const freeSlot = this.findFreeSlot(el, critical);
      if (freeSlot) this.moveTo(el, freeSlot);
      else if (el.canMinimize) this.minimize(el); // 实在放不下则最小化
      else this.hideWithToast(el); // 最后手段
    });
  }

  // 监听视口变化、滚动、键盘弹起触发重排
  onViewportChange = debounce(this.resolveCollisions, 50);
}

// 关键事件定义
enum SignLanguageEvent {
  WINDOW_MOUNTED = 'sl_window_mounted',           // 挂载成功
  WINDOW_REPOSITION = 'sl_window_reposition',     // 位置变更（含自动避让）
  USER_DRAG_START = 'sl_user_drag_start',         // 用户主动拖拽
  USER_MINIMIZE = 'sl_user_minimize',             // 用户最小化
  USER_RESTORE = 'sl_user_restore',               // 用户从悬浮球恢复
  VIDEO_STALL = 'sl_video_stall',                 // 卡顿（缓冲 > 1s）
  VIDEO_QUALITY_SWITCH = 'sl_quality_switch',     // 码率切换
  SYNC_DRIFT = 'sl_sync_drift',                   // 音视频/手语同步漂移 > 300ms
  ERROR_FATAL = 'sl_error_fatal',                 // 播放器销毁/解码失败
  PREF_SAVED = 'sl_pref_saved'                    // 偏好设置持久化
}

// 上报载荷示例
interface SlTelemetry {
  event: SignLanguageEvent;
  timestamp: number;
  sessionId: string;
  userId?: string; // 脱敏
  env: {
    ua: string;
    viewport: { w: number; h: number };
    connection: NavigatorConnectionInformation; // effectiveType, rtt, downlink
    deviceMemory: number;
  };
  windowState: {
    rect: DOMRect;
    isMinimized: boolean;
    isMirrored: boolean;
    playbackRate: number;
    currentSrc: string; // 当前码率 URL
  };
  // 仅在错误/卡顿时附带
  debug?: {
    videoElementState: HTMLVideoElement['readyState'];
    bufferLength: number;
    droppedFrames: number;
    totalFrames: number;
  };
}

graph TD
    A[源内容] --> B{翻译策略}
    B -->|核心市场| C[真人母语翻译 CSL/ASL/BSL/DGS...]
    B -->|长尾市场| D[国际手语 IS 真人翻译]
    B -->|兜底/实时| E[多语种数字人引擎]
    C & D & E --> F[素材库 CMS]
    F --> G[标签化管理: locale, dialect, register, signer_id, version]
    G --> H[CDN 智能分发]
    H --> I[客户端按 Accept-Language / 用户设置 请求]

// i18n 配置扩展
const signLanguageLocales = {
  'zh-CN': { code: 'csl', name: '中国手语', rtl: false, mirrorDefault: false },
  'zh-HK': { code: 'hksl', name: '香港手语', rtl: false, mirrorDefault: false },
  'en-US': { code: 'asl', name: 'American Sign Language', rtl: false, mirrorDefault: true }, // ASL 常需镜像教学
  'en-GB': { code: 'bsl', name: 'British Sign Language', rtl: false, mirrorDefault: false },
  'de-DE': { code: 'dgs', name: 'Deutsche Gebärdensprache', rtl: false, mirrorDefault: false },
  'ar-SA': { code: 'arsl', name: 'Arabic Sign Language', rtl: true, mirrorDefault: false }, // RTL 语言布局镜像
} as const;

// 运行时决策逻辑
function resolveSignLanguageAsset(userLocale: string, videoId: string): AssetManifest {
  const localeConfig = signLanguageLocales[userLocale] ?? signLanguageLocales['en-US'];
  // 1. 精准匹配 locale
  // 2. 回退同语系
  // 3. 回退 International Sign (IS)
  // 4. 最终回退字幕模式
  return cdnManifestResolver.resolve(videoId, localeConfig.code, ['is', 'subtitles']);
}

/* RTL 环境自动生效 */
:root:dir(rtl) #sign-language-host {
  inset-inline-start: env(safe-area-inset-left, 1rem);
  inset-inline-end: auto;
  /* 拖拽手柄、控制栏内部 flex-direction 自动反转 */
}

// 业务方仅需引入并初始化
import { SignLanguageProvider } from '@company/a11y-sl-provider';

SignLanguageProvider.init({
  // 必填：业务标识，用于拉取对应手语素材清单
  bizCode: 'checkout-payment', 
  // 选填：容器选择器，默认 document.body
  container: '#app', 
  // 选填：覆盖默认策略
  policy: {
    autoMount: true,           // 页面加载自动挂载
    persistPreference: true,   // 记忆用户位置/尺寸
    allowMinimize: true,       // 允许最小化
    required: true,            // 【关键】强制合规模式：用户不可关闭，仅可最小化/拖拽
    fallbackToSubtitle: true   // 手语加载失败自动降级字幕
  }
});

// 单页应用路由切换时同步销毁/重建
router.afterEach(() => SignLanguageProvider.refresh());