# FlyNotes

**Repository Path**: xiang0430/fly-notes

## Basic Information

- **Project Name**: FlyNotes
- **Description**: 基于Vue 3 + Vite搭建的一个笔记网站，使用了Router用于路由管理、Pinia用于状态管理、ESLint + Prettier用于代码规范和格式化、Husky用于Git hooks、lint-staged用于暂存文件检查、commitlint用于提交信息规范。实现了全局主题切换、多端适配等，同时注重性能优化、浏览器兼容等。（Vue3项目基本框架！）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-21
- **Last Updated**: 2024-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 笔记应用

## 基础框架和工具

- Vue 3 + Vite 作为基础框架
- Pinia 用于状态管理
- Vue Router 用于路由管理
- ESLint + Prettier 用于代码规范和格式化

## 代码规范和提交检查

- Husky 用于 Git hooks
- lint-staged 用于暂存文件检查
- commitlint 用于提交信息规范  
  提交信息格式：  
  feat/fix/docs/style/refactor/test/chore/perf

## 样式和主题

- CSS 变量实现主题切换（明/暗主题）
- postcss-px-to-viewport-8-plugin 用于多端适配
- 自定义字体配置（PingFang SC/Microsoft YaHei）
- 禁止选中类（no-select）

## 响应式设计

- 移动端断点：max-width: 768px
- 平板断点：769px ~ 1024px
- PC端：> 1024px
- 横屏适配

## 功能特性

- 笔记的 CRUD 操作
- 批量选择和删除
- 主题切换
- 路由自动重定向
- 页面过渡动画

## 移动端优化

- viewport 配置
- 禁用缩放
- 电话号码/邮箱识别关闭
- iOS 状态栏设置

## 性能优化

- 路由懒加载
- 过渡动画
- 滚动优化
- 样式按需加载

## UI/UX 设计

- 卡片式布局
- 响应式网格
- 自定义滚动条
- 交互动画
- 主题切换按钮

## 安全性设置

- 用户选择限制
- 内容溢出控制
- 输入验证

## 浏览器兼容

- autoprefixer 配置
- 跨浏览器样式兼容