amokrzycki/kajtek

# KAJTEK 收音机 一款超轻量级复古风格网络收音机播放器，灵感来自标志性的波兰 PRL 磁带播放器（Unitra PS-101 / KAJTEK）。 ## 功能 1. **网络电台流媒体** - 播放实时音频流，支持实时电台管理。 2. **深色/浅色主题** - 持久化保存在 `localStorage` 中的复古风格主题切换。 3. **收藏电台** - 使用 ★ 收藏您喜爱的电台，并在本地保存。 4. **睡眠定时器** - 在 15、30、60 或 90 分钟后自动关闭音频。 5. **VU 表和磁带卷轴** - 播放期间平滑的磁带卷轴动画和交互式 VU 表。 ## 项目结构 - `src/` - 模块化 TypeScript 应用源代码： - `app.ts` - 应用程序入口点。 - `controls.ts` - 音频控制事件处理和键盘快捷键。 - `data.ts` - 默认电台预设和数据结构。 - `icons.ts` - SVG 图标组件定义。 - `player.ts` - 音频播放管理。 - `providers.ts` - 外部电台提供商集成。 - `state.ts` - 本地状态管理和 localStorage 持久化。 - `ui.ts` - DOM 渲染和 UI 更新。 - `visualizer.ts` - VU 表和音频可视化动画引擎。 - `index.html` - 核心 HTML5 布局和结构。 - `style.css` - 复古设计系统（CSS 变量、深色/浅色模式、动画）。 - `dist/` - 生产构建目录（生成的资产）。 - `tsconfig.json` - 严格的 TypeScript 配置。 - `biome.json` - 代码格式化和 linting 配置。 - `.github/workflows/` - 自动化的 GitHub Actions 工作流： - `ci.yml` - 在 push 和 PR 上进行 Linting（使用 Biome）和类型检查（`tsc`）。 - `deploy.yml` - 在发布标签（`v*`）上通过 rsync 自动构建和部署。 ## 开发与构建 ### 安装 安装项目依赖： ``` npm install ``` ### 构建 构建生产包（使用 esbuild 将 `src/app.ts` 编译为 `dist/app.js` 并复制静态资产）： ``` npm run build ``` ### 类型检查与 Linting 运行 TypeScript 类型检查： ``` npx tsc --noEmit ``` 使用 Biome 检查和格式化代码： ``` npx @biomejs/biome check ./ ``` ## CI / CD 流水线 - **CI 工作流（`ci.yml`）**：在向 `main` 分支执行 `push` 和 `pull_request` 时执行。使用 Biome（`npx @biomejs/biome ci ./`）验证代码风格，并执行类型安全检查（`npx tsc --noEmit`）。 - **部署工作流（`deploy.yml`）**：在推送匹配 `v*` 的版本标签时执行。构建应用程序（`npm run build`），并通过 SSH/rsync 将 `dist/` 的内容部署到主机。 ## 快速开始 要在本地运行该项目，请构建分发文件并运行指向 `dist/` 的本地 HTTP 服务器： ``` npm run build python3 -m http.server 8080 --directory dist ``` 然后在您的 Web 浏览器中打开 `http://localhost:8080`。

标签：TypeScript, Web前端, 动画可视化, 复古UI设计, 安全插件, 网络收音机, 自动化攻击, 音频播放