# 兜兜时钟

**Repository Path**: leierqiang/doudou-clock

## Basic Information

- **Project Name**: 兜兜时钟
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-18
- **Last Updated**: 2026-02-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 翻页时钟 (Flip Clock)

一款基于 Expo 54 + React Native 开发的精美翻页时钟应用，支持多种主题、闹钟管理、全屏模式等功能。

![Flip Clock](https://img.shields.io/badge/Expo-54-4630EB.svg)
![React Native](https://img.shields.io/badge/React_Native-0.81-61DAFB.svg)
![License](https://img.shields.io/badge/license-MIT-green.svg)

## ✨ 主要功能

### ⏰ 核心功能
- **翻页时钟显示** - 流畅的翻页动画效果，精准显示当前时间
- **多主题支持** - 三套精美主题：
  - 🖤 简约黑白 - 极简主义设计，黑白分明
  - 🪵 复古木纹 - 怀旧风格，木质质感
  - 💧 清新浅蓝 - 清爽明亮，现代感十足
- **时间格式** - 支持 12/24 小时制切换
- **日期显示** - 完整的日期信息展示
- **秒数显示** - 可选是否显示秒数

### 🚨 闹钟管理
- **闹钟列表** - 查看所有已设置的闹钟
- **创建闹钟** - 快速设置新的闹钟
- **编辑闹钟** - 修改现有闹钟的时间和设置
- **删除闹钟** - 移除不需要的闹钟
- **数据同步** - 通过后端 API 同步闹钟数据

### 🎨 界面功能
- **全屏模式** - 点击进入全屏，横向显示，适合桌面横屏使用
- **横竖屏适配** - 自动适配横竖屏布局
- **返回导航** - 所有子页面均有返回按钮
- **状态栏控制** - 全屏时自动隐藏状态栏

### ⚙️ 系统设置
- **主题切换** - 一键切换不同主题风格
- **时间格式** - 12/24 小时制切换
- **显示设置** - 日期和秒数的显示开关
- **应用信息** - 版本号等基本信息

## 📦 技术栈

### 前端
- **Expo 54** - 跨平台移动应用框架
- **React Native** - 原生 UI 组件库
- **Expo Router** - 文件系统路由
- **TypeScript** - 类型安全的 JavaScript
- **React Native Reanimated** - 高性能动画
- **Expo Screen Orientation** - 屏幕方向控制

### 后端
- **Express.js** - Node.js Web 框架
- **SQLite** - 轻量级数据库
- **Drizzle ORM** - 现代化的 ORM 工具
- **TypeScript** - 类型安全的 JavaScript

## 🚀 快速开始

### 环境要求

确保你的开发环境满足以下要求：

- **Node.js** >= 18.0.0
- **pnpm** >= 9.0.0（推荐）或 npm >= 9.0.0
- **Git**

### 安装步骤

1. **克隆项目**

```bash
git clone <your-repository-url>
cd flip-clock-app
```

2. **安装依赖**

使用 pnpm（推荐）：
```bash
pnpm install
```

或使用 npm：
```bash
npm install
```

3. **配置环境变量**

复制环境变量示例文件：
```bash
cp .env.example .env
```

根据需要修改 `.env` 文件中的配置：
```env
# 前端后端基础 URL
EXPO_PUBLIC_BACKEND_BASE_URL=http://localhost:9091

# 后端端口
PORT=9091

# 数据库路径
DATABASE_PATH=./data/alarms.db
```

4. **启动开发服务器**

启动前端和后端服务：
```bash
pnpm dev
```

或分别启动：

**前端：**
```bash
cd client
pnpm start
```

**后端：**
```bash
cd server
pnpm dev
```

5. **访问应用**

- **Web 端**：浏览器访问 http://localhost:5000
- **Android/iOS**：使用 Expo Go 扫描二维码
- **桌面端**：Web 端体验最佳

## 📂 项目结构

```
flip-clock-app/
├── client/                    # 前端代码
│   ├── app/                   # Expo Router 路由配置
│   │   ├── _layout.tsx        # 根布局
│   │   ├── index.tsx          # 首页路由
│   │   ├── alarms.tsx         # 闹钟列表路由
│   │   ├── alarm-edit.tsx     # 闹钟编辑路由
│   │   └── settings.tsx       # 设置页面路由
│   ├── screens/               # 页面组件实现
│   │   ├── clock/             # 时钟页面
│   │   ├── alarms/            # 闹钟列表页面
│   │   ├── alarm-edit/        # 闹钟编辑页面
│   │   └── settings/          # 设置页面
│   ├── components/            # 可复用组件
│   │   ├── FlipClock.tsx      # 翻页时钟组件
│   │   ├── FlipDigit.tsx      # 翻页数字组件
│   │   └── Screen.tsx         # 页面容器组件
│   ├── constants/             # 常量定义
│   │   └── theme.ts           # 主题配置
│   ├── hooks/                 # 自定义 Hooks
│   │   └── useTheme.ts        # 主题 Hook
│   ├── utils/                 # 工具函数
│   └── assets/                # 静态资源
├── server/                    # 后端代码
│   ├── src/
│   │   ├── index.ts           # Express 入口文件
│   │   ├── db/
│   │   │   ├── schema.ts      # 数据库 Schema
│   │   │   └── index.ts       # 数据库初始化
│   │   └── routes/
│   │       └── alarms.ts      # 闹钟 API 路由
│   └── data/                  # 数据库文件目录
├── .env.example               # 环境变量示例
├── README.md                  # 项目说明文档
├── DEPLOYMENT.md              # 部署指南
└── DEVELOPMENT.md             # 开发文档
```

## 🛠️ 开发指南

### 代码规范

- **编码风格**：遵循 Airbnb JavaScript Style Guide
- **TypeScript**：所有代码使用 TypeScript 编写
- **组件命名**：使用 PascalCase（如 `FlipClock.tsx`）
- **文件命名**：使用 kebab-case（如 `flip-clock.tsx`）

### 新增页面

1. 在 `client/screens/` 下创建页面组件
2. 在 `client/app/` 下创建对应的路由文件
3. 在 `client/app/_layout.tsx` 中注册路由

详细步骤请参考 [DEVELOPMENT.md](DEVELOPMENT.md)

### 新增 API

1. 在 `server/src/routes/` 下创建路由文件
2. 在 `server/src/index.ts` 中注册路由
3. 在 `server/src/db/schema.ts` 中定义数据库 Schema

详细步骤请参考 [DEVELOPMENT.md](DEVELOPMENT.md)

## 📱 部署指南

详细的部署指南请参考 [DEPLOYMENT.md](DEPLOYMENT.md)

支持以下部署方式：

- **Web 部署** - Vercel、Netlify 等
- **Android 部署** - APK 打包、Google Play 发布
- **iOS 部署** - App Store 发布
- **桌面应用** - Electron 打包

## 🧪 测试

```bash
# 前端测试
cd client
pnpm test

# 后端测试（如需）
cd server
pnpm test
```

## 📄 许可证

本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。

## 🤝 贡献

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request

## 📮 联系方式

如有问题或建议，请提交 Issue 或联系项目维护者。

---

**⭐ 如果这个项目对你有帮助，请给个 Star！**