首页界面
根据设计稿可以将其规划为顶部的navbar，居中的svg，下方的button以及右下角的floatButton。
为了后续更好的复用，可以对其中的navbar、button以及floatButton进行造轮子。
Button组件
效果预览：
对Button组件做了一些样式
此外在对Butotn增加点击事件时，由于我们使用的是Vue3和TSX会出现一些标红问题。在Button组件中声明props即可消除。
FloatButton组件
效果预览：
我们写了一个Icon组件用来引入svg图标，可以根据文件名字引入，
然后对FloatButton进行样式设置
这样写在后期测试时发现 FloatButton的name为空也是能够运行不报错的。所以声明一个类型IconName，并且强制要求
只有在FloatButton内强制写iconName才能够正常显示。
Center组件
在后面的设计稿中可以看出中间的主体部分基本都是局中的，为了方便后续的工作，在这里写一个center组件供我们复用。 考虑到中间的内容可能不止一张图片，如果是多张那么需要给定一个选项看看是纵向排列还是横向 所以这里采取表编程，通过额外的class决定是水平还是垂直，并在CSS中表现出来
效果预览：
Navbar组件
做一个记账的顶部导航栏。
在开始界面料理规定好slot的default和icon即可。
效果预览：
Overlay组件
点击导航栏的菜单按钮会弹出一个浮层。浮层内容如下
要实现点击出现浮层，首先需要给Icon组件添加一个事件监听。由于Icon不能自己控制，所以是要通过props来得知父组件的事件来进行关闭。
此时父组件要做的是给浮层一个默认关闭的ref。若触发了点击事件再显示。
这样就实现了，点击按钮触发事件从而让浮层显示。
要实现关闭，就在Overlay组件的mask里面设置，同样Overlay组件并不能控制自己是否关闭，要在副组件中声明事件并通过props传递给Overlay。
父组件添加事件，此时也传递给了Overlay。
效果预览：
本节完。
