# 锤子便签（重制版）

![项目截图](public/icons/icon-192.png)

这是一个基于 Vue 3 和 Vite 构建的单页 Web 应用（SPA），旨在模仿锤子科技（Smartisan）的便签应用。该项目使用 localStorage 进行本地数据持久化，支持便签的增删改查、文件夹管理、便签置顶、星标标记等丰富的交互功能。

## 功能特性

### 核心功能
- ✅ 便签的增删改查操作
- ✅ 便签置顶和星标标记
- ✅ 便签滑动删除交互（带阻尼效果）
- ✅ 文件夹分类管理
- ✅ 便签全文搜索
- ✅ 富文本编辑（支持加粗、居中、待办事项、列表、标题、引用等格式）
- ✅ 图片插入功能
- ✅ 响应式设计，适配移动端设备
- ✅ 刘海屏兼容

### 技术亮点
- ⚡ 基于 Vite 构建，开发体验流畅
- 🖼️ 使用原生 CSS 和锤子便签经典配色方案
- 📦 状态管理采用 Pinia
- 🔄 路由管理使用 vue-router
- 📱 支持构建为 PWA 应用
- 🚀 支持一键部署到 FTP 服务器

## 快速开始

### 环境要求
- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```
默认访问地址：http://localhost:3000

### 构建生产版本
```bash
# 构建标准版本
npm run build

# 构建 PWA 版本
npm run build:pwa

# 构建并部署 PWA 版本到 FTP 服务器
npm run deploy:pwa
```

### 在 Android 设备上运行
```bash
npm run android
```

## 项目结构
```
.
├── android/                 # Capacitor Android 项目文件
├── dist/                    # 构建后的生产文件
├── node_modules/            # 项目依赖
├── public/                  # 静态资源目录
├── src/
│   ├── common/              # 全局样式和通用工具
│   ├── components/          # 可复用的 Vue 组件
│   ├── pages/               # 页面级别的 Vue 组件
│   ├── stores/              # Pinia 状态管理 stores
│   ├── utils/               # 工具函数
│   ├── App.vue              # 根组件
│   └── main.js              # 应用入口
├── index.html               # HTML 模板
├── package.json             # 项目元数据和脚本命令
├── vite.config.js           # Vite 构建配置
└── capacitor.config.json    # Capacitor 配置文件
```

## 技术栈
- **核心框架**: Vue 3 (Composition API)
- **构建工具**: Vite
- **路由管理**: vue-router
- **状态管理**: Pinia
- **UI 库**: 原生 CSS
- **移动端支持**: Capacitor
- **样式预处理器**: Less

## 开发约定
- 使用 Vue 3 Composition API
- 遵循 ES6 规范
- 使用 Pinia 进行状态管理
- 通过 localStorage 实现数据持久化
- 组件和页面分离的目录结构

## 许可证
ISC

## 贡献
欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。