Frontend

[FerdinandSu]

Hi, I'm the developer of this Program, but I don't have enough time to make my program perfect. I'll appreciate it if you can help me improve it and become a contributor. Here is an existing issue:

This is an HTTP based ledger system that supports the following functions:
-Revenue and expenditure records
-Classification records, types can overlap
-Automatically classify by item name and memory
-Regularly and automatically generate classified reports
But currently it does not include a web front-end, and the graphical interface only has a simple report page. The other interfaces are called through direct HTTP requests and verified through the header.
The project provides a primitive MobileSuit based command line client, typically used in conjunction with IOS "shortcut instructions".
At present, it is worth considering adding more front-end pages to improve their usability.

1. Implement a simple web front-end that is compatible with current authentication methods; Verify that information is stored in localStorage to ensure security
2. The web front-end should at least include report query function
3. You can refer to the CLI client to complete the implementation

Tech. Details:

1. DO NOT use out-of-date techs, e.g., npm, vue2, angularjs. vite and yarn pnp/pnpm are recommended
2. TypeScript is better.
3. Attach screenshots in your PR, or it will not be checked.

这是一个基于HTTP的账本系统，支持以下功能：

• 收入和支出记录
• 分类记录，类型可以重叠
• 按照条目名称，依照记忆自动分类
• 定期自动生成分类报表

但目前未包含Web前端，图形接口仅有一个简单的报表页面，其余接口都是通过直接的HTTP请求完成调用，通过Header完成验证。

项目提供了一个原始的、基于MobileSuit的命令行客户端，一般结合IOS“快捷指令”使用。

目前，值得考虑增加更多的前端页面，以提高其可用性。

1. 实现一套简单的Web前端，兼容目前的验证方式；验证信息储存在localStorage，确保安全性
2. Web前端至少应该包含报表查询功能
3. 可以参考CLI客户端完成实现

技术细节：

1. 请避免使用任何过时技术，优先使用vite, yarn pnp/pnpm
2. 鼓励使用TypeScript而非JavaScript
3. 请在PR中附上截图，否则我不会检查它

[abc2513]

预计的前端技术选型：框架react、脚手架生成器react-create-app、TS和ReactTS声明库、请求库axios、状态管理库redux、样式预处理器sass和对应的加载器SassLoader、组件库AntiDesign、代码风格工具eslint^-^

[FerdinandSu]

https://github.com/HIT-ReFreSH/WebLedger/tree/dev-frontend-net8

Hi @abc2513 ,

I've integrated frontend projects with backend in the dev-frontend-net8 branch, some folders are renamed, you need to:

1. Install .NET 8 SDK (or just update your Visual Studio).
2. DROP old database. The new one will be automatically created when firstly start backend.
3. Configure dependencies with Yarn latest PnP (which is much more faster than old Yarn 1.22)

cd client
corepack enable
yarn set version stable
yarn install

4. Start backend app, and the frontend will be started automatically with backend connected

[SinoKcil]

我发现两个分支的前端都没有利用到已有的api，于是我决定继续实现这个前端应用。
我预计在main分支的client基础上进行维护，沿用Vue3+ElementPlus+Vite，增加登录功能，并利用已有的HTTP接口实现图形化的收支统计、分类管理、报表展示等。目前已经完成的前端界面如下。完成后续功能后我会提起PR ^ ^

[sundiya]

添加一个access管理页面

[HongXiangpro]

在成功添加记录后增加了提示，并修改了格式

[Mercury-circle]

发现当前页面存在组件溢出问题，在代码中减少了一些非必要容器和元素，提升了布局灵活性。
修改了布局，整体全屏效果如下。

缩小屏幕后不会再出现溢出问题。

当屏幕更小时，切换为垂直布局，并出现滚动栏。