# Simple Web Bill

**Repository Path**: goldenapplepie/simple-web-bill

## Basic Information

- **Project Name**: Simple Web Bill
- **Description**: 简单账单网页，主要是用来公开展示账单内容，包括支出和收入。
- **Primary Language**: HTML/CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-14
- **Last Updated**: 2025-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript, HTML, CSS, 账单, 网页

## README

#### 介绍

简单账单网页，主要是用来公开展示账单内容，包括支出和收入、包括日期、费用来源。但由于这个页面仍存在一些bug，所以功能不是很完善。


#### 展示

`https://blog.goldenapplepie.xyz/bill/`


#### 功能

1.  **添加账单** ：在第一个窗口处填写日期、来源、金额后可以直接将其添加进下方的账单列表内；

2.  **下载账单** ：提供了两种文件格式的下载：json&csv，其中json文件可以用于“选择账单”和“上传账单”；

3.  **选择账单** ：点击后选择你本地存储的账单json文件；

4.  **上传账单** ：选择账单后，覆盖当前页面内的账单，但这个覆盖是临时性的；

5.  **清除账单** ：清空当前页面内的账单，主要用于debug；

6.  **账单列表** ：会根据账单支出和收入情况自动按一定顺序排列，并展示出日期、来源、金额，同时每10条更换1页。最后计算并展示总金额，；

7. [开发中] **统计图** ：展示支出和收入的统计图


#### 使用方法

 _（省略部署过程）_ 

1.  通过添加账单的窗口，为账单列表添加临时账单；

2.  接下来下载json格式的账单，这个json文件就包含了你刚刚创建的临时账单的内容；

3.  将bills文件夹内的bills.json文件覆盖掉；

4.  重新刷新网页即可显示账单内容，此时的账单列表内只会显示你自己的账单，无论怎么修改，只要页面刷新立马恢复


#### TodoList

1. 访客/开发者模式切换：这样能够根据上面的描述自动显示相应的功能组件，但是需要经过认证才能开启开发者模式

2. 统计图：展示支出和收入的统计图

3. 数据库：将账单的数据存储至数据库中

……


#### 已知bug

1. 手机端无法下载账单

2. 当前的统计图无法正确的显示收入的日期


#### 其它说明

1. 本人非专业人士，对于前端开发也只知道些皮毛，主打能凑合用就行；

2. 页面样式如果引起不适，请自行设计（x）；

3. 如果还有其它不适，请关闭此项目的页面（bushi）