锤子便签（重制版）

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

功能特性

核心功能

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

技术亮点

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

快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 7.0.0

安装依赖

npm install

启动开发服务器

npm run dev

默认访问地址：http://localhost:3000

构建生产版本

# 构建标准版本
npm run build

# 构建 PWA 版本
npm run build:pwa

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

在 Android 设备上运行

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 来帮助改进这个项目。