# wwq

**Repository Path**: tmkbk/wwq

## Basic Information

- **Project Name**: wwq
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-18
- **Last Updated**: 2025-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 可收起内容搜索功能

这是一个使用 React 和 TypeScript 实现的可收起内容搜索功能演示项目。

## 功能特性

- ✅ **可收起的内容区域**：支持扁平化结构的可收起内容
- ✅ **点击搜索**：输入关键词后点击搜索按钮进行搜索
- ✅ **高亮显示**：搜索结果会高亮显示匹配的文本
- ✅ **自动展开**：搜索到收起的内容时会自动展开
- ✅ **自动定位**：搜索结果会自动滚动定位到对应元素
- ✅ **上一个/下一个导航**：可以浏览所有匹配的搜索结果
- ✅ **响应式设计**：支持移动端和桌面端

## 技术栈

- React 18
- TypeScript
- CSS3
- React Hooks

## 安装和运行

1. 安装依赖：
```bash
npm install
```

2. 启动开发服务器：
```bash
npm start
```

3. 在浏览器中打开 http://localhost:3000

## 项目结构

```
src/
├── components/          # React 组件
│   ├── CollapsibleItem.tsx    # 可收起项目组件
│   └── SearchBar.tsx          # 搜索栏组件
├── hooks/              # 自定义 Hooks
│   ├── useSearch.ts           # 搜索逻辑
│   └── useCollapsibleItems.ts # 可收起项目逻辑
├── types/              # TypeScript 类型定义
│   └── index.ts
├── App.tsx             # 主应用组件
├── App.css             # 样式文件
└── index.tsx           # 应用入口
```

## 核心功能实现

### 1. 搜索功能
- 支持在标题和内容中搜索
- 点击搜索按钮进行搜索
- 支持大小写不敏感搜索
- 扁平化数据结构搜索

### 2. 高亮显示
- 搜索结果会高亮显示
- 支持在标题和内容中高亮
- 使用 `<mark>` 标签实现高亮

### 3. 展开和定位
- 搜索到收起的内容时自动展开
- 自动滚动定位到搜索结果
- 平滑滚动到目标位置

### 4. 导航功能
- 上一个/下一个按钮浏览搜索结果
- 显示当前搜索结果位置
- 自动展开和定位到当前结果
- 响应式设计

## 使用方法

1. **搜索内容**：在搜索框中输入关键词，点击"搜索"按钮
2. **查看结果**：搜索结果会自动展开并定位到第一个匹配项
3. **浏览结果**：使用"上一个"和"下一个"按钮浏览所有匹配的搜索结果
4. **管理展开状态**：使用"展开所有"和"收起所有"按钮管理所有内容的展开状态

## 自定义数据

您可以在 `src/App.tsx` 中修改 `sampleData` 数组来添加您自己的内容：

```typescript
const sampleData: CollapsibleItemType[] = [
  {
    id: "1",
    title: "您的标题",
    content: "您的内容",
    isExpanded: false
  },
  {
    id: "2",
    title: "另一个标题",
    content: "另一个内容",
    isExpanded: false
  }
  // 添加更多项目...
];
```

## 样式自定义

所有样式都在 `src/App.css` 中定义，您可以根据需要修改颜色、字体、间距等样式。