# lcmb-uniapp **Repository Path**: Erick886/lcmb-uniapp ## Basic Information - **Project Name**: lcmb-uniapp - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-11-13 - **Last Updated**: 2025-11-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 理财账本 (LCMB) 一个基于 uni-app + Vue3 + TypeScript 开发的跨平台记账应用，支持多账本管理、分类管理、月度统计、账本共享等功能。 ## 📱 项目介绍 理财账本是一款功能完善的个人财务管理应用，帮助用户轻松记录和管理日常收支。应用采用现代化的技术栈，提供流畅的用户体验和丰富的功能特性。 ### 主要功能 - 💰 **账单记录**：支持收入/支出记录，自定义金额、分类、备注等信息 - 📚 **多账本管理**：创建多个账本，分类管理不同场景的财务记录 - 📊 **月度统计**：查看月度收支统计，支持日历视图和详细列表 - 🏷️ **分类管理**：自定义收入和支出分类，支持主分类和子分类 - 👥 **账本共享**：支持多用户共享账本，协同管理财务 - 📈 **数据统计**：查看总支出、总收入、结余等统计数据 - 🎨 **个性化设置**：自定义账本图标、颜色、描述等信息 ## 🚀 技术栈 本项目是一个基于 uni-app + Vue3 + TypeScript + Pinia + Vite + Tailwind CSS + uv-ui 开发的跨平台应用。 ### 核心依赖 - **uni-app** - 跨平台应用开发框架 - **Vue 3** - 渐进式 JavaScript 框架 - **TypeScript** - JavaScript 的超集，提供类型支持 - **Pinia** - Vue 官方状态管理库 - **Vite** - 下一代前端构建工具 - **Tailwind CSS** - 实用优先的 CSS 框架 - **uv-ui** - uni-app 生态 UI 组件库 - **dayjs** - 轻量级日期处理库 - **pinia-plugin-persistedstate** - Pinia 持久化插件 ## 📦 快速开始 ### 环境要求 - Node.js >= 16.0.0 - pnpm >= 7.0.0 (推荐) 或 npm >= 8.0.0 ### 安装依赖 ```bash # 使用 pnpm (推荐) pnpm install # 或使用 npm npm install ``` ### 运行项目 ```bash # H5 开发 pnpm dev:h5 # 微信小程序开发 pnpm dev:mp-weixin # APP 开发 pnpm dev:app # 其他平台请查看 package.json 中的 scripts ``` ### 构建项目 ```bash # H5 构建 pnpm build:h5 # 微信小程序构建 pnpm build:mp-weixin # APP 构建 pnpm build:app ``` ## 📁 项目结构 ``` src/ ├── components/ # 公共组件 │ ├── common/ # 通用组件 │ │ ├── BookSelector/ # 账本选择器 │ │ ├── CategorySelector/ # 分类选择器 │ │ ├── DateTimeSelector/ # 日期时间选择器 │ │ ├── MonthSelector/ # 月份选择器 │ │ ├── RecordInput/ # 账单输入组件 │ │ ├── UserSelector/ # 用户选择器 │ │ └── ... │ └── tabbar/ # 底部导航栏 ├── pages/ # 页面 │ ├── index/ # 首页（账单列表） │ ├── menu/ # 菜单页 │ ├── stat/ # 统计页 │ └── profile/ # 个人中心 ├── packages/ # 分包页面 │ ├── book/ # 账本相关 │ │ └── edit/ # 账本编辑/创建 │ ├── category/ # 分类相关 │ │ ├── edit/ # 分类编辑 │ │ └── manage/ # 分类管理 │ ├── record/ # 账单相关 │ │ ├── detail/ # 账单详情 │ │ ├── edit/ # 账单编辑 │ │ └── month/ # 月度账单 │ └── profile/ # 个人资料 ├── stores/ # Pinia 状态管理 │ ├── date.ts # 日期状态 │ ├── record.ts # 账单状态 │ └── user.ts # 用户状态 ├── types/ # TypeScript 类型定义 │ ├── book.ts # 账本类型 │ ├── record.ts # 账单类型 │ └── user.ts # 用户类型 ├── utils/ # 工具函数 │ ├── index.ts # 通用工具 │ ├── navigation.ts # 导航工具 │ └── safe.ts # 安全区域工具 └── static/ # 静态资源 ├── icons/ # 图标资源 └── fontawesome/ # FontAwesome 字体 ``` ## 🎯 核心功能说明 ### 账单管理 - **账单记录**：支持快速记录收入/支出，包含金额、分类、时间、备注等信息 - **账单编辑**：支持编辑已有账单，修改金额、分类等信息 - **账单详情**：查看账单详细信息 - **月度视图**：按月份查看账单，支持日历视图和列表视图 ### 账本管理 - **多账本支持**：创建多个账本，如家庭账本、工作账本、旅行账本等 - **账本编辑**：自定义账本名称、描述、图标、颜色 - **账本共享**：支持多用户共享账本，协同管理财务 ### 分类管理 - **分类体系**：支持主分类和子分类两级分类体系 - **分类编辑**：自定义分类名称、图标、颜色 - **分类统计**：查看各分类的收支统计 ### 数据统计 - **月度统计**：查看月度总支出、总收入、结余 - **分类统计**：按分类查看收支情况 - **时间统计**：按时间维度查看财务趋势 ## 🛠️ 技术栈简介 ### 2.1 uni-app uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。 uni-app 官方文档：[https://uniapp.dcloud.net.cn/](https://uniapp.dcloud.net.cn/) ### 2.2 Vue 3 Vue 3 是一个流行的开源 JavaScript 框架，用于构建用户界面和单页面应用。Vue 3 与 Vue 2 的主要区别包括： - 构建：Vue 3 使用 monorepo 架构，更容易管理和维护。 - API：Vue 3 引入了新的组合式 API，它提供了更灵活的代码组织方式。 - 性能：Vue 3 提供了更好的性能，包括更快的渲染速度和更小的打包大小。 - TypeScript：Vue 3 提供了更好的 TypeScript 支持。 Vue3 官方文档：[https://cn.vuejs.org/](https://cn.vuejs.org/) ### 2.3 TypeScript TypeScript 是由 Microsoft 开发并维护的开源编程语言，它是在 JavaScript 的基础上增加了静态类型、类和接口等特性，从而将其提升为一个功能更为丰富的开发平台。TypeScript 通过编译器将 TypeScript 代码转换为 JavaScript 代码，确保这些代码能够在支持 JavaScript 的各种设备和平台上运行。这种设计允许开发者利用 TypeScript 的静态类型检查以及类、接口和其他 OOP 功能来构建大型、复杂的 Web 应用，同时享受 JavaScript 本身的高灵活性和易于使用的特点。 Typescript 官网文档：[https://www.typescriptlang.org/](https://www.typescriptlang.org/) ### 2.4 Pinia Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处： - dev-tools 支持 - 跟踪动作、突变的时间线 - Store 出现在使用它们的组件中 - time travel 和 更容易的调试 - 热模块更换 - 在不重新加载页面的情况下修改您的 Store - 在开发时保持任何现有状态 - 插件：使用插件扩展 Pinia 功能 - 为 JS 用户提供适当的 TypeScript 支持或 autocompletion - 服务器端渲染支持 Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用 Pinia。 Pinia 官方文档：[https://pinia.web3doc.top/](https://pinia.web3doc.top/) ### 2.5 Tailwind CSS Tailwind 是一个原子类方式命名的 CSS 工具集。Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。它将所有的 css 属性全部封装成语义化的类，比如你想要一个 float:left，它已经帮你封装好了，你直接使用一个 float-left 就可以。需要一个宽度为 12 像素，只需要写 w-3 就可以。 使用 tailwindcss 极大的减少代码量，能轻松完成响应式设计，不需要再写单独的 css，也不需要再为 class 取个什么名字而苦恼。 tailwindcss 官方文档：[https://tailwindcss.com/](https://tailwindcss.com/) ### 2.6 uv-ui 说到 uv-ui，就不得不先从 uni-ui 和 uView 说起。uni-ui、uView 和 uv-ui 都是 uni-app 生态下专用的组件库。 - uni-ui 是 DCloud 官方提供的跨端 ui 库，它是基于 vue 组件的、flex 布局的、无 dom 的跨全端 ui 框架。 但此组件库组件相对较少，设计风格略显滞后，笔者本人并不是很喜欢。 uni-ui 官方文档：[https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html) - uView 从 2018 年初发布以来，是 uni-app 生态最优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。uView2.0，全面兼容了 uni-app 生态下的 nvue 开发模式，对 1.x 进行了架构重构，细节和性能都有极大提升。 但 uView 是基于 vue2 实现，在 vue3 框架下使用会存在诸多问题。 uView 官方文档：[https://uviewui.com/](https://uviewui.com/) - uv-ui 是兼容 vue3+2、nvue、app、h5、多端小程序的 uni-app 生态框架，大部分组件基于 uView2.x，在经过改进后全面支持 vue3，部分组件做了进一步的优化，支持单独导入，方便开发者选择导入需要的组件。 uv-ui 官方文档：[https://www.uvui.cn/](https://www.uvui.cn/) 结合本项目的实际情况，笔者最终选择 uv-ui 作为项目的 ui 库。 ### 2.7 Vite Vite 是 Vue 的作者尤雨溪开发的 Web 开发构建工具，它是一个基于浏览器原生 ES 模块导入的开发服务器，在开发环境下，利用浏览器去解析 import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对 Vue 文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。Vue3 默认使用 Vite 作为项目脚手架工具。 Vite 官方文档：[https://vitejs.cn/](https://vitejs.cn/) ## 📝 开发指南 ### 状态管理 项目使用 Pinia 进行状态管理，主要包含以下 store： - **recordStore**：管理账单、账本、分类数据 - **dateStore**：管理当前选择的日期 - **userStore**：管理用户信息 ### 组件使用 项目提供了丰富的公共组件，位于 `src/components/common/` 目录： - `BookSelector`：账本选择器，支持多账本切换 - `CategorySelector`：分类选择器，支持主分类和子分类 - `RecordInput`：账单输入组件，包含金额输入、分类选择等 - `UserSelector`：用户选择器，支持多选用户 - `DateTimeSelector`：日期时间选择器 - `MonthSelector`：月份选择器 ### 路由配置 路由配置位于 `src/pages.json`，采用分包加载策略： - 主包：首页、菜单、统计、个人中心 - 分包：账本管理、分类管理、账单管理、个人资料 ### 样式规范 项目使用 Tailwind CSS 进行样式开发，主要特点： - 原子化 CSS 类，减少样式代码 - 响应式设计支持 - 统一的颜色和间距规范 ## 🔧 开发工具 ### 推荐 IDE - [HBuilderX](https://www.dcloud.io/hbuilderx.html) - DCloud 官方 IDE - [VS Code](https://code.visualstudio.com/) + uni-app 插件 ### 代码规范 - 使用 TypeScript 进行类型检查 - 遵循 Vue 3 Composition API 规范 - 使用 ESLint 进行代码检查（如已配置） ## 📄 许可证 本项目采用 MIT 许可证，详见 [LICENSE](LICENSE) 文件。 ## 🙏 致谢 - [uni-app](https://uniapp.dcloud.net.cn/) - 跨平台应用开发框架 - [Vue.js](https://cn.vuejs.org/) - 渐进式 JavaScript 框架 - [uv-ui](https://www.uvui.cn/) - uni-app 生态 UI 组件库 - [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架 - [Pinia](https://pinia.web3doc.top/) - Vue 状态管理库 ## 📚 参考文档 开发者也可参考以下文章手动搭建类似的脚手架工程： [使用命令行方式搭建 uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui 开发脚手架](https://blog.csdn.net/kingslave1/article/details/135454239)