feat🔫: 搭建框架，完成bill图表展示

src/model/index.ts

@@ -0,0 +1,8 @@
+export interface IBill {
+    _id?: string,
+    date: string,
+    money: number,
+    cls: string,
+    label: string,
+    options?: string
+}

src/pages/Home/Home.module.scss

@@ -0,0 +1,12 @@
+.home {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .total {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 10px;
+    align-items: flex-start;
+  }
+}

src/pages/Home/Home.tsx

@@ -0,0 +1,63 @@
+import styles from "./Home.module.scss"
+import * as R from 'ramda'
+import { IBill } from "../../model"
+import Bar from "../../components/charts/bar"
+import { useContext, useEffect, useState } from "react";
+import { BillContext } from "../../store";
+import { observer } from "mobx-react-lite";
+import Pie from "../../components/charts/pie";
+import { Card, ConfigProvider, DatePicker } from "antd";
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+import locale from 'antd/es/locale/zh_CN';
+
+const Home = () => {
+    const billStore = useContext(BillContext)
+
+    const transformer = (record: Record<string, IBill[]>) => {
+        return R.map((key: string) => {
+            const moneys = record[key].map(bill => bill.money)
+            return {
+                x: key,
+                y: Number(R.sum(moneys).toFixed(2)),
+            }
+        })(R.keys(record))
+    }
+
+    const now = new Date();
+    const [year, setYear] = useState(now.getFullYear())
+    const [month, setMonth] = useState(now.getMonth() + 1)
+
+    useEffect(() => {
+        billStore.fetch(year, month)
+    }, [year, month])
+
+    const changeDate = (date: moment.Moment | null, datestring: string) => {
+        const d = date?.toDate() ?? new Date()
+        setYear(d.getFullYear())
+        setMonth(d.getMonth() + 1)
+    }
+
+    const TotalMoney = () => <Card>
+        {"总金额"}
+        ￥{billStore.totalMoney}
+    </Card>
+
+    return (
+        <div className={styles.home}>
+            <div className={styles.total}>
+                <DatePicker
+                    picker="month"
+                    value={moment(`${year}-${month}`, 'YYYY-MM')}
+                    onChange={changeDate}
+                />
+                <TotalMoney />
+            </div>
+            <Bar data={transformer(billStore.listAllByDate)} />
+            <Pie data={transformer(billStore.listAllByClass)} />
+        </div >
+    )
+}
+
+
+export default observer(Home)

src/pages/Record/Record.tsx

@@ -0,0 +1,9 @@
+import styles from "./Record.module.scss"
+
+
+export default function Record() {
+
+    return (
+        <></>
+    )
+}