喵叔

本篇文章我们一起来实现收支分类功能。收支分类和前篇文章的主币种设置界面大体类似。我们将详细介绍如何创建和管理不同的收支分类，以便用户可以更好地组织和跟踪他们的财务状况。

主分支中的代码是可用于发布的稳定代码，Dev分支是开发分支。系列专栏的Web客户端开发专栏。

项目配置就这些，大家跟着一起配置即可，没什么技术含量。

这篇文章是Web版开发的第一篇文章，因此讲解的比较详细，但是在后续的文章中将只会讲解核心代码和重要代码。完整代码大家可以在github上下载，但是我建议大家先自己实现代码，然后再对比github上的代码。

在这一片文章中我们开始开发个人中心功能集，它包含：重置密码、安全设置、修改用户名、注销账户和退出功能。其中前三个功能我们使用弹出窗的形式实现，后两个功能由于没有需要输入的功能，因此只有一个简单的链接。要实现的功能前面已经说了，在这一小节我们来看一下原型。这个原型功能很简单，鼠标移动到右上角的用户头像上时会显示下拉菜单，菜单上的功能就是我们要实现的，三个弹窗对应了三个需要交互的功能。我们根据前面所说的功能，分析出三个数据模型：ResetPassword（重置密码）、SecuritySetting（安全设置

在本节中，我们通过使用 Element Plus 的组件来实现个人中心的主页 UI。首先，原型图包括了左侧菜单和顶部 Header，菜单包含多个功能模块如首页、账本、报表等，Header 则包含了 Logo 和个人头像。为实现这个布局，我们使用了布局组件，并配合el-headerel-aside和el-main来实现响应式页面结构。同时，我们采用el-menu组件来构建左侧菜单和顶部导航栏，菜单项通过和el-submenu组件实现，支持嵌套和功能操作。

这篇文章介绍了如何在孢子记账项目中实现主币种设置功能。首先，文章通过展示一个原型图，明确了功能需求，包括显示和设置主币种以及查看汇率信息。接着，文章详细介绍了三大组件的实现：面包屑导航、主币种显示与设置、以及汇率表。在实现主币种设置时，利用了 Element Plus 的组件实现了面包屑导航，帮助用户定位当前页面；el-form和el-select用于展示和编辑主币种，通过简单的表单和下拉框让用户进行币种选择和修改；而汇率表则通过el-table和结合使用，展示汇率数据并支持分页显示。