抽学号v6.6.6功能预设
由于工程较大，需要社区援助：
这是v5.8.2的代码
这是提示词：
你是一个资深全栈前端工程师，精通 Vue 3、Pinia、Vite、TypeScript、组件化设计、性能优化与工程化架构。请为我开发一个高性能、模块化、可增量集成的多功能 PK 与互动系统，用于嵌入到现有 Web 应用中，作为独立功能模块运行。
📁 一、项目结构要求（核心变更）
- 不再使用单 HTML 文件，而是采用标准前端工程化目录结构。
- 项目应基于 Vite + Vue 3 + TypeScript 构建，支持按需加载与代码分割。
- 所有功能必须模块化拆分，每个核心功能（如 PK 对战、抽卡、转盘、名单管理等）应位于独立子目录中，具备清晰的边界与接口。
- 输出完整的项目目录结构，包含以下关键子模块（每个为独立文件夹）：
src/
├── core/ # 核心基础设施
│ ├── module-loader.ts # 模块注入与销毁逻辑（init/destroy）
│ ├── isolation.ts # 样式/事件命名空间隔离工具
│ ├── theme-manager.ts # 节日主题动态切换与管理
│ └── storage.ts # 持久化封装（localStorage + 版本控制）
│
├── stores/ # Pinia 状态管理（按功能拆分）
│ ├── participants.ts # 选手名单与性别识别
│ ├── exclusion.ts # 排除规则与名单管理
│ ├── pk-battle.ts # PK 对战状态（队伍、比分、倒计时）
│ ├── draw-card.ts # 抽卡系统状态
│ ├── wheel-luck.ts # 幸运大转盘状态
│ ├── logs.ts # 操作日志与历史记录
│ └── index.ts # store 入口与持久化插件
│
├── components/ # 公共 UI 组件
│ ├── ui/ # 自定义弹窗、Toast、按钮、卡片等
│ │ ├── Modal.vue
│ │ ├── Toast.vue
│ │ └── ThemeAwareButton.vue
│ └── utils/ # 文件上传、数据预览、性别识别等
│ └── FileUploader.vue
│
├── modules/ # 功能模块（每个可独立懒加载）（包括原HTML的功能）
│ ├── pk-battle/ # PK 对战模块
│ │ ├── PKBattle.vue
│ │ ├── FencingAnimation.vue
│ │ └── TeamConfigPanel.vue
│ │
│ ├── draw-card/ # 抽卡系统（双模式）
│ │ ├── HorizontalDraw.vue
│ │ ├── CircularDraw.vue # 环形滚动（非扇形！）
│ │ └── CardFlip.vue
│ │
│ ├── lucky-wheel/ # 幸运大转盘
│ │ └── LuckyWheel.vue
│ │
│ ├── participant-manager/ # 名单上传与管理
│ │ └── ParticipantManager.vue
│ │
│ ├── exclusion-config/ # 排除规则配置区
│ │ └── ExclusionConfig.vue
│ │
│ ├── theme-gallery/ # 节日主题切换面板
│ │ └── ThemeGallery.vue
│ │
│ └── logs-panel/ # 操作日志与历史记录
│ └── LogsPanel.vue
│
├── views/
│ └── PKModuleRoot.vue # 主面板入口（标签页/折叠布局）
│
├── assets/ # 静态资源
│ ├── themes/ # 各节日主题资源（CSS、粒子配置、音效 Base64）
│ │ ├── spring-festival/
│ │ ├── halloween/
│ │ └── ...
│ └── sounds/ # 音效（Base64 内联或动态 import）
│
├── utils/
│ ├── date-utils.ts # 节日自动检测
│ ├── csv-parser.ts # CSV 解析
│ └── xlsx-parser.ts # XLSX 解析（基于 SheetJS）
│
└── main.ts # 模块入口（供外部调用 initPKModule）
✅ 每个模块应具备独立的
index.ts或defineAsyncComponent支持，便于懒加载。
⚡ 二、性能优化要求（解决首次加载慢）
- 所有功能模块必须支持懒加载（Lazy Loading）：
- 使用
defineAsyncComponent或动态import()按需加载各子模块。 - 主面板（PKModuleRoot）初始仅加载轻量骨架，点击标签页时再加载对应功能。
- 使用
- 第三方库按需引入：
- SheetJS（XLSX）仅在上传时动态加载。
- GSAP / Anime.js / tsparticles 仅在对应动画模块中引入。
- 资源优化：
- 节日主题资源（CSS、粒子配置、音效）按主题动态加载，非当前主题不加载。
- 使用 Vite 的
?raw或?url优化静态资源引用。
- 代码分割（Code Splitting）：
- Vite 自动分割 chunk，确保首屏 bundle 体积最小化。
- 预加载策略：
- 在用户 hover 标签页时预加载对应模块（可选）。
🔌 三、增量集成机制（非侵入式）
- 提供全局入口函数（通过
window.initPKModule暴露）：interface PKModuleConfig {target: string | HTMLElement; // 目标容器position?: 'append' | 'prepend' | 'before' | 'after';namespace?: string; // 默认 'pk-'initialTheme?: string;autoStyleIsolation?: boolean; }function initPKModule(config: PKModuleConfig): { destroy: () => void }; - 模块注入后：
- 不修改、不删除、不覆盖原页面任何 DOM、样式或脚本。
- 所有类名、ID、CSS 变量、事件名均自动添加
namespace前缀。 - 样式作用域通过 CSS Modules 或
:where(.pk-*)实现隔离。
- 提供
destroy()方法：- 移除注入的 DOM 节点。
- 清理所有事件监听、定时器、动画实例。
- 重置 Pinia 状态（可选保留用户数据）。
- 无内存泄漏、无全局残留。
🎯 四、功能完整性要求（与原需求一致）
- 所有原始功能必须完整实现：
- 多模态主面板（标签页布局）
- 智能排除机制（本轮/永久、日志、清空）
- PK 对战（多对多、性别过滤、击剑动画）
- 名单上传（CSV/XLSX/TXT，智能识别性别）
- 节日主题（6+ 节日，自动切换，动态背景）
- 抽卡系统（横向滑动 + 环形滚动，3D 翻转）
- 幸运大转盘（扇形分区，物理旋转）
- 自定义弹窗（禁用 alert，支持 confirm/toast）
- 状态持久化（localStorage + Pinia）
- 深色/浅色主题 + 响应式布局
🛠 五、技术栈与工程规范
- 构建工具：Vite（支持 TypeScript、CSS Modules、动态导入）
- 状态管理：Pinia（模块化 store，持久化插件）
- 动画库：可选 GSAP / Anime.js（按需动态引入）
- 文件解析：SheetJS（仅在需要时加载）
- UI 组件：自研，无外部 UI 框架依赖（避免样式冲突）
- 代码质量：
- TypeScript 类型安全
- 每个文件含 JSDoc / 注释
- ESLint + Prettier 规范
- 单元测试（可选，但鼓励）
- 输出内容：
- 完整的项目目录结构
- 所有源代码（.ts, .vue, .css）
vite.config.ts配置文件package.json（含必要依赖）README.md（说明如何构建、集成、调用）
✅ 六、交付物说明
请输出：
- 完整的项目目录结构（如上所示）
- 每个关键文件的代码内容（重点模块需完整实现，非占位符）
main.ts中的initPKModule实现vite.config.ts配置（支持外部集成）- README.md（含使用示例）
💡 此项目应可直接
npm install && npm run build，生成可嵌入任意网站的 UMD 或 ES 模块，也可通过<script type="module">直接引入开发版。