Tomatis Training Console / Tomatis 训练管理控制台

A frontend prototype for managing Tomatis-style training workflows, including device monitoring, patient records, scheme management, media handling, and demo security flows.

一个面向 Tomatis 训练场景的前端原型系统，覆盖设备监控、患者档案、方案管理、媒体库和演示级安全流程。

---

Overview / 项目概述

This repository is a frontend prototype built for workflow design and product exploration before backend integration.

这个仓库本质上是一个 前端原型项目，重点在于产品流程、界面结构和信息组织，而不是后端对接。

What it simulates / 它模拟了什么

• device monitoring center
• login and first-use security flow
• patient archive and treatment record views
• treatment scheme management
• media library interactions
• settings and export features

---

Live Demo / 在线演示

Live demo: https://6943daf9536c1156259a0f17--velvety-valkyrie-af2a4f.netlify.app/

---

Main product areas / 主要模块

1. Device Monitoring / 设备监控

• 12-channel device cards
• individual and batch controls
• session progress, timers, and status display
• air/bone channel volume control

Monitor Center State Contract / 监控中心状态契约

• canonical states: locked, offline, connected, assigned, running, paused, error, completed
• canonical action copy: 请连接耳机, 开始训练, 暂停训练, 结束训练, 完成
• global controls: 开始所有训练 starts only assigned + connected devices, 暂停所有训练 pauses only connected running devices
• Bluetooth devices display battery level; wired devices do not
• headphone disconnection during training is treated as a running-session overlay, not as an automatic error state

locked -> offline -> connected -> assigned -> running -> completed
                            |           |         |
                            |           |         +-> paused -> completed
                            |           |
                            |           +-> connected (remove patient)
                            |
                            +-> offline (headphone disconnect before assignment)

running + headphone disconnect
  -> remains running
  -> disables pause/end/volume controls
  -> continues timer until completed

error
  -> preserves session context
  -> can recover back to running

2. Patient Archive / 患者档案

• add / edit / delete patient records
• search by name, ID, phone, and pinyin
• treatment history filtering and export

3. Scheme Management / 方案管理

• preset and custom treatment schemes
• copy / edit / delete operations
• stage-based parameter display
• JSON export

4. Media Library / 媒体库

• folder tree navigation
• search, sort, and batch operations
• preview controls and file details panel
• demo “export to Audacity” flow

5. Login & Security Demo / 登录与安全流程演示

• demo login states
• password change for first login
• timed lockout after repeated failed attempts

---

Tech Stack / 技术栈

• React 18
• Vite
• Tailwind CSS
• jsPDF + jspdf-autotable
• xlsx
• lucide-react

---

Repository Structure / 仓库结构

components/     # reusable UI pieces
data/           # mock data
utils/          # helpers and style utilities
views/          # main product views
App.jsx         # top-level app state and routing logic

---

Why this project matters / 为什么这个项目值得看

This project is useful as a product/UI engineering example because it shows:

• how a domain workflow can be translated into a coherent frontend structure
• how to prototype operational tools before backend integration
• how to organize multi-view stateful interfaces with mock data

这个项目的价值主要在于：

• 把一个领域工作流转化成完整前端界面结构
• 在没有后端前先完成产品原型验证
• 用 mock data 组织复杂的多页面状态型界面

---

Quick Start / 快速开始

npm install
npm run dev

Build and preview:

npm run build
npm run preview

---

Limitations / 当前限制

• no backend or persistence

• recording/import/export flows are still prototype-level

• auth is simulated, not production-grade

• 没有后端和持久化

• 录音 / 导入 / 导出流程仍然是原型级模拟

• 登录与权限逻辑仅用于演示

---

Future improvements / 后续可改进方向

• backend integration
• persistent data storage
• stronger role-based access control
• more polished design system extraction
• better testing for view interactions and export flows

如果继续完善，这个项目最适合往产品化方向推进，而不是继续停留在纯 demo 阶段。