一个基于 React + Vite + Tailwind CSS 构建的中医知识问答可视化应用，支持大数据量（50万+条）的流式加载和智能分类。
# 1. 创建项目
npm create vite@latest medical-app -- --template react
cd medical-app
# 2. 安装所有依赖
npm install
npm install -D tailwindcss postcss autoprefixer
npm install lucide-react
npx tailwindcss init -p
## 项目结构
medical-app/
├── public/
│ └── medical-qa.json # 数据文件
├── src/
│ ├── components/ # 组件
│ │ ├── VirtualList.jsx
│ │ ├── DiseaseSelector.jsx
│ │ ├── CategoryPanel.jsx
│ │ └── TagFilter.jsx
│ ├── hooks/ # Hooks
│ │ └── useVirtualList.js
│ ├── workers/ # Web Workers
│ │ └── dataWorker.js
│ ├── utils/ # 工具函数
│ │ └── streamParser.js
│ ├── App.jsx # 主组件
│ ├── main.jsx # 入口文件
│ └── index.css # 样式
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
└── README.md
## ✨ 功能特性
- 🚀 **流式加载** - 边加载边解析，支持50万+条数据
- 🏥 **疾病优先** - 先选疾病，再选分类，层层筛选
- 🏷️ **智能标签** - 自动从问题中提取关键词标签
- 📊 **实时统计** - 加载过程中实时显示分类统计
- 🔍 **全文搜索** - 支持问题和答案的全文搜索
- 📜 **虚拟列表** - 高性能虚拟滚动，流畅浏览大量数据
- 💾 **数据导出** - 支持按条件导出筛选后的数据
- 📱 **响应式设计** - 支持桌面端和移动端
## 🛠️ 技术栈
- **React 18** - 用户界面
- **Vite 6** - 构建工具
- **Tailwind CSS 3** - 样式框架
- **Web Worker** - 后台数据处理
- **Lucide React** - 图标库
## 📦 安装
```bash
# 克隆项目
git clone https://github.com/your-username/medical-app.git
# 进入目录
cd medical-app
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 使用说明
- 选择疾病 - 点击顶部疾病选择器，选择要查看的疾病
- 选择分类 - 在左侧面板选择知识分类
- 标签筛选 - 通过标签进一步筛选问答
- 搜索 - 使用搜索框进行全文搜索
- 查看详情 - 点击列表项查看完整问答
- 导出数据 - 点击导出按钮下载筛选后的数据