fix: revise .dockerignore

.dockerignore

@@ -11,6 +11,7 @@
 script
 
 README.md
-
+.dockerignore
 docker-compose.yaml
-Dockerfile
+Dockerfile
+node_modules

package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build && pwsh scripts/build.ps1",
+    "build": "tsc && vite build",
+    "deploy": "tsc && vite build && pwsh scripts/build.ps1",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -32,4 +33,4 @@
     "@vitejs/plugin-react": "^2.0.0",
     "vite": "^3.0.0"
   }
-}
+}

scripts/build.ps1

@@ -1,8 +1,5 @@
-docker build . -t registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev
+$server_path='fadinglight:/root/docker/caddy/site/www'
 
-docker push registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev
+ssh fadinglight "rm ${server_path}/* -r"
 
-ssh aliyun "cd /root/docker/bill-sys/;
-            docker compose down; 
-            docker pull registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev; 
-            docker compose up -d"
+scp -r dist/* $server_path

scripts/build.sh

@@ -2,7 +2,7 @@ docker build . -t registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev
 
 docker push registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev
 
-ssh aliyun "cd /root/docker/bill-sys/;
+ssh fadinglight  "cd /root/docker/bill-sys/;
             docker compose down; 
             docker pull registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-go:dev; 
             docker compose up -d"

src/App.tsx

@@ -1,31 +1,23 @@
 import Layout from './components/layout'
-import {Routes, Route} from 'react-router-dom'
-import {useEffect} from "react";
+import { Routes, Route } from 'react-router-dom'
 import Home from './pages/Home/Home'
 import NotFound from './pages/NotFound'
-import {Bill, BillContext} from "./store";
+import { Bill, BillContext } from "./store";
 import './App.css'
 import Record from "./pages/Record/Record";
 
 function App() {
     const billStore = new Bill()
-    const now = new Date()
-
-    useEffect(() => {
-        billStore.fetch(now.getFullYear(), now.getMonth() + 1)
-            .then()
-            .catch(console.dir)
-    }, [])
 
     return (
         <div className="App">
             <BillContext.Provider value={billStore}>
                 <Layout home>
                     <Routes>
-                        <Route path={"/"} element={<Home/>}/>
-                        <Route path={"/home"} element={<Home/>}/>
-                        <Route path={"/record"} element={<Record/>}/>
-                        <Route path={"/*"} element={<NotFound/>}/>
+                        <Route path={"/"} element={<Home />} />
+                        <Route path={"/home"} element={<Home />} />
+                        <Route path={"/record"} element={<Record />} />
+                        <Route path={"/*"} element={<NotFound />} />
                     </Routes>
                 </Layout>
             </BillContext.Provider>

src/api/bills.ts

@@ -2,16 +2,16 @@ import request from "./request";
 import {IBill} from "../model";
 
 export async function getBills(year: number, month: number) {
-    const data = await request.get(`/search/${year}/${month}`)
+    const data = await request.get(`/bill/${year}/${month}`)
     return data.data
 }
 
-export async function getClass() {
-    const data = await request.get(`/class`)
+export async function getLabels() {
+    const data = await request.get(`/label/`)
     return data.data
 }
 
-export async function createBill(bill: IBill) {
-    const data = await request.post(`/create`, bill)
+export async function postBills(bills: Array<IBill>) {
+    const data = await request.post(`/bill/`, bills)
     return data.data
 }

src/api/request.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const request = axios.create({
-    baseURL: "/api",
+    baseURL: "/api/",
     timeout: 30000,
 })
 

src/components/charts/bar/index.tsx

@@ -17,6 +17,7 @@ interface IProps {
     data: BarData[];
     title?: string;
     subTitle?: string;
+    onClickItem?: (date: string) => void;
 }
 
 export const Bar = (props: IProps) => {
@@ -37,33 +38,6 @@ export const Bar = (props: IProps) => {
                 subtext: subTitle ?? "",
                 left: 'center'
             },
-            xAxis: {
-                type: 'category',
-                data: data.map(item => {
-                    return dayjs(item.x).format("MM-DD")
-                }),
-            },
-            yAxis: {
-                type: "value"
-            },
-            series: [
-                {
-                    type: "bar",
-                    label: {
-                        show: true,
-                        position: "top",
-                        margin: 8
-                    }, 
-                    data: data.map(item => {
-                        return {
-                            value: item.y,
-                            itemStyle: {
-                                color: colors(item.y)
-                            }
-                        }
-                    }),
-                },
-            ],
             tooltip: {
                 show: true,
                 trigger: "item",
@@ -80,13 +54,44 @@ export const Bar = (props: IProps) => {
                 },
                 borderWidth: 0,
                 padding: 5
-            }
+            },
+            xAxis: {
+                type: 'category',
+                data: data.map(item => {
+                    return dayjs(item.x).format("MM-DD")
+                }),
+            },
+            yAxis: {
+                type: "value"
+            },
+            series: [
+                {
+                    type: "bar",
+                    label: {
+                        show: true,
+                        position: "top",
+                        margin: 8
+                    },
+                    data: data.map(item => {
+                        return {
+                            value: item.y,
+                            itemStyle: {
+                                color: colors(item.y)
+                            }
+                        }
+                    }),
+                },
+            ],
         };
     }, [data, title, subTitle])
 
-
     const bar = useMemo(() => {
-        return chartRef.current ? echarts.init(chartRef.current, undefined, { renderer: "svg" }) : null;
+        const chart = chartRef.current ? echarts.init(chartRef.current, undefined, { renderer: "svg" }) : null;
+        chart?.on('click', (params) => {
+            const date = dayjs(props.data[0].x).format("YYYY-") + params.name
+            if (props.onClickItem) props.onClickItem(date)
+        })
+        return chart
     }, [chartRef.current])
 
     useEffect(() => {

src/components/charts/config/index.ts

@@ -14,6 +14,8 @@ import {
     TitleComponentOption,
     TooltipComponent,
     TooltipComponentOption,
+    LegendComponent,
+    LegendComponentOption,
     GridComponent,
     GridComponentOption,
     // 数据集组件
@@ -34,6 +36,7 @@ export type ECOption = echarts.ComposeOption<
     | PieSeriesOption
     | TitleComponentOption
     | TooltipComponentOption
+    | LegendComponentOption
     | GridComponentOption
     | DatasetComponentOption>;
 
@@ -41,6 +44,7 @@ export type ECOption = echarts.ComposeOption<
 echarts.use([
     TitleComponent,
     TooltipComponent,
+    LegendComponent,
     GridComponent,
     DatasetComponent,
     TransformComponent,

src/components/charts/pie/index.module.scss

@@ -1,4 +1,4 @@
 .pie {
-  width: 100%;
-  height: 100%;
+  width: 400px;
+  height: 400px;
 }

src/components/charts/pie/index.tsx

@@ -33,15 +33,15 @@ export default function Pie(props: IProps) {
             },
             tooltip: {
                 trigger: 'item',
-                formatter: '{a} <br/>{b} : {c} ({d}%)',
+                formatter: '{b} : ￥{c} ({d}%)',
+            },
+            legend: {
+                orient: 'vertical',
+                left: 'left'
             },
-            // legend: {
-            //     orient: 'vertical',
-            //     left: 'left',
-            // },
             series: [
                 {
-                    name: "金额",
+                    // name: "金额",
                     type: "pie",
                     radius: ['40%', '70%'],
                     // roseType: "radius",
@@ -49,17 +49,17 @@ export default function Pie(props: IProps) {
                         borderRadius: 10,
                         borderColor: '#fff',
                         borderWidth: 2,
-                        
+
                     },
                     label: {
-                        show: true,
+                        show: false,
                         // position: "top",
                         margin: 8,
                         formatter: "{b}: {c}"
                     },
                     emphasis: {
                         label: {
-                            show: true
+                            show: false,
                         }
                     },
                     data: data.map(item => {

src/main.tsx

@@ -6,9 +6,9 @@ import 'antd/dist/antd.css';
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
+  // <React.StrictMode>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </React.StrictMode>
+  // </React.StrictMode>
 )

src/model/index.ts

@@ -1,8 +1,8 @@
 import dayjs from 'dayjs'
 
 export enum BillType {
-    consume = 0,
-    income,
+    CONSUME = 0,
+    INCOME,
 }
 
 export interface IBill {
@@ -21,7 +21,7 @@ export function EmptyBill(): IBill {
     return {
         date: dayjs().format("YYYY-MM-DD"),
         money: 0,
-        type: BillType.consume,
+        type: BillType.CONSUME,
         cls: "",
         label: "",
         options: "",

src/pages/Home/Home.module.scss

@@ -1,12 +1,21 @@
-.home {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  .total {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    gap: 10px;
-    align-items: flex-start;
-  }
-}
+.home {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .total {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 10px;
+    align-items: flex-start;
+  }
+
+  .monthBar {
+    height: 300px;
+  }
+
+  .cards {
+    display: grid;
+    grid: repeat(2, auto) / auto-flow auto;
+  }
+}

src/pages/Home/Home.tsx

@@ -1,83 +1,131 @@
-import styles from "./Home.module.scss"
-import * as R from 'ramda'
-import { BillType, 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, DatePicker, Radio, Space } from "antd";
-import moment from 'moment';
-import 'moment/locale/zh-cn';
-import dayjs from 'dayjs'
-
-const Home = () => {
-    const billStore = useContext(BillContext)
-
-    const transformer = (record: Record<string, IBill[]>) => {
-        const funcs = R.compose(
-            R.sort((a: { x: string, y: number }, b) => {
-                const date1 = dayjs(a.x).toDate().getTime()
-                const date2 = dayjs(b.x).toDate().getTime()
-
-                return date1 - date2
-            }),
-            R.map((key: string) => {
-                const moneys = record[key].map(bill => bill.money)
-                return {
-                    x: key,
-                    y: Number(R.sum(moneys).toFixed(2)),
-                }
-            }))
-        return funcs(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).then()
-    }, [year, month])
-
-    const changeDate = (date: moment.Moment | null, datestring: string) => {
-        const d = date?.toDate() ?? new Date()
-        setYear(d.getFullYear())
-        setMonth(d.getMonth() + 1)
-    }
-
-    const typeOpt = [
-        { label: '支出', value: BillType.consume },
-        { label: '收入', value: BillType.income },
-    ];
-    const [billType, setBillType] = useState(BillType.consume)
-
-    return (
-        <div className={styles.home}>
-            <div className={styles.total}>
-                <Space align="start">
-                    <DatePicker
-                        picker="month"
-                        value={moment(`${year}-${month}`, 'YYYY-MM')}
-                        onChange={changeDate}
-                    />
-                    <Radio.Group
-                        options={typeOpt}
-                        optionType="button"
-                        buttonStyle="solid"
-                        value={billType}
-                        onChange={e => setBillType(e.target.value)}
-                    />
-                    <Card>
-                        {"总金额"}
-                        ￥{billStore.getTotalMoney(billType)}
-                    </Card>
-                </Space>
-            </div>
-            <Bar data={transformer(billStore.groupByDate(billType))} />
-            <Pie data={transformer(billStore.groupByClass(billType))} />
-        </div>
-    )
-}
-
+import styles from "./Home.module.scss"
+import * as R from 'ramda'
+import { BillType, 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, Modal, DatePicker, Radio, Space } from "antd";
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+import dayjs from 'dayjs'
+
+const Home = () => {
+    const billStore = useContext(BillContext)
+
+    const transformer = (record: Record<string, IBill[]>) => {
+        const funcs = R.compose(
+            R.sort((a: { x: string, y: number }, b) => {
+                const date1 = dayjs(a.x).toDate().getTime()
+                const date2 = dayjs(b.x).toDate().getTime()
+
+                return date1 - date2
+            }),
+            R.map((key: string) => {
+                const moneys = record[key].map(bill => bill.money)
+                return {
+                    x: key,
+                    y: Number(R.sum(moneys).toFixed(2)),
+                }
+            }))
+        return funcs(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).then()
+    }, [year, month])
+
+    const changeDate = (date: moment.Moment | null, datestring: string) => {
+        const d = date?.toDate() ?? new Date()
+        setYear(d.getFullYear())
+        setMonth(d.getMonth() + 1)
+    }
+
+    const typeOpt = [
+        { label: '支出', value: BillType.CONSUME },
+        { label: '收入', value: BillType.INCOME },
+    ];
+    const [billType, setBillType] = useState(BillType.CONSUME)
+
+    // 点击bar弹出当天pie
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [modalTitle, setModalTitle] = useState("");
+    const [modalData, setModalData] = useState<{
+        x: string
+        y: number
+    }[]>([]);
+
+    // 显示单个cls的饼状图，查看cls内部的label的消费情况，
+    // 这里有一个cls列表
+    const clsesForShow = ["餐饮", "恋爱"]
+
+    return (
+        <div className={styles.home}>
+            <div className={styles.total}>
+                <Space align="start">
+                    <DatePicker
+                        picker="month"
+                        value={moment(`${year}-${month}`, 'YYYY-MM')}
+                        onChange={changeDate}
+                    />
+                    <Radio.Group
+                        options={typeOpt}
+                        optionType="button"
+                        buttonStyle="solid"
+                        value={billType}
+                        onChange={e => setBillType(e.target.value)}
+                    />
+                    <Card>
+                        {"总金额"}
+                        ￥{billStore.getTotalMoney(billType)}
+                    </Card>
+                </Space>
+            </div>
+            <div className={styles.monthBar}>
+                <Bar
+                    data={transformer(billStore.groupByDate(billType))}
+                    onClickItem={date => {
+                        setIsModalOpen(true)
+                        setModalTitle(date)
+                        setModalData(transformer(billStore.groupByClass(billType, date)))
+                    }}
+                />
+            </div>
+            <div className={styles.cards}>
+                <Card >
+                    <Pie
+                        title="本月消费分类"
+                        data={transformer(billStore.groupByClass(billType))}
+                    />
+                </Card>
+                {
+                    clsesForShow.map(cls => {
+                        return (<Card key={cls.toString()}>
+                            <Pie
+                                title={cls}
+                                data={transformer(billStore.groupByLabelOfClass(cls))}
+                            />
+                        </Card>)
+                    })
+                }
+            </div>
+            <Modal
+                visible={isModalOpen}
+                onOk={() => setIsModalOpen(false)}
+                onCancel={() => setIsModalOpen(false)}
+                title={modalTitle}
+            >
+                <Pie
+                    data={modalData}
+                />
+            </Modal>
+        </div>
+    )
+}
+
 export default observer(Home)

src/pages/Record/Record.tsx

@@ -1,13 +1,13 @@
-import {Button, DatePicker, Input, InputNumber, message, Radio, Select, Space, Table, Tag} from "antd";
-import {ArrowDownOutlined, CloudUploadOutlined, DeleteOutlined,} from "@ant-design/icons";
-import {useContext, useEffect, useRef, useState} from "react";
-import {BillType, EmptyBill, IBill} from "../../model";
+import { Button, DatePicker, Input, InputNumber, message, Radio, Select, Space, Table, Tag } from "antd";
+import { ArrowDownOutlined, CloudUploadOutlined, DeleteOutlined, } from "@ant-design/icons";
+import { useContext, useEffect, useRef, useState } from "react";
+import { BillType, EmptyBill, IBill } from "../../model";
 import moment from "moment/moment";
-import {BillContext} from "../../store";
-import {observer} from "mobx-react-lite";
+import { BillContext } from "../../store";
+import { observer } from "mobx-react-lite";
 import styles from "./Record.module.scss"
-import {BaseSelectRef} from "rc-select/lib/BaseSelect";
-import {createBill} from "../../api/bills";
+import { BaseSelectRef } from "rc-select/lib/BaseSelect";
+import { postBills } from "../../api/bills";
 
 
 function Record() {
@@ -28,6 +28,9 @@ function Record() {
         if (!!clsRef.current) clsRef.current.focus()
     }, [clsRef])
 
+    useEffect(() => {
+        billStore.fetchLabels().then()
+    }, [])
 
     // table
     const columns = [
@@ -50,7 +53,7 @@ function Record() {
             title: "金额",
             key: "money",
             render: (_: any, record: IBill) => {
-                const isConsume = record.type === BillType.consume
+                const isConsume = record.type === BillType.CONSUME
                 const color = isConsume ? "red" : "green"
                 const flag = isConsume ? "-" : "+"
                 return <Tag color={color}>{flag}{record.money}</Tag>
@@ -69,7 +72,7 @@ function Record() {
                     <Button
                         type="primary"
                         danger
-                        icon={<DeleteOutlined/>}
+                        icon={<DeleteOutlined />}
                         onClick={() => setDataSource(datasource.filter(bill => bill !== record))}
                     />
                 </Space>
@@ -79,8 +82,8 @@ function Record() {
     const [datasource, setDataSource] = useState<IBill[]>([])
 
     const typeOpt = [
-        {label: '支出', value: BillType.consume},
-        {label: '收入', value: BillType.income},
+        { label: '支出', value: BillType.CONSUME },
+        { label: '收入', value: BillType.INCOME },
     ];
 
     // 提交到表格
@@ -93,7 +96,7 @@ function Record() {
         bill.money = Number(money)
         bill.options = options
         const checkBill = () => {
-            return bill.cls !== '' && (billType === BillType.income || bill.label !== '') && bill.money > 0
+            return bill.cls !== '' && (billType === BillType.INCOME || bill.label !== '') && bill.money > 0
         }
         const reset = () => {
             setCls("")
@@ -117,26 +120,22 @@ function Record() {
     const [uploadLoading, setUploadLoading] = useState(false)
     const upload = async () => {
         setUploadLoading(true)
-        const failures = []
-        for (let bill of datasource) {
-            try {
-                const {id} = await createBill(bill)
-                if (!id) failures.push(bill)
-            } catch (e) {
-                failures.push(bill)
-            }
+        datasource.forEach(it => Reflect.deleteProperty(it, "key"))
+        try {
+            await postBills(datasource)
+            setDataSource([])
+        } catch (err) {
         }
-        setDataSource(failures)
         setUploadLoading(false)
     }
 
-    let classData: string[]
+    let classData: string[] = []
     switch (billType) {
-        case BillType.consume:
-            classData = Object.keys(cls2label.consume)
+        case BillType.CONSUME:
+            classData = cls2label.consume.map(it => it.name)
             break
-        case BillType.income:
-            classData = cls2label.income
+        case BillType.INCOME:
+            classData = cls2label.income.map(it => it.name)
             break
     }
 
@@ -145,7 +144,7 @@ function Record() {
             <div className={styles.new}>
                 <Space align="start">
                     <Radio.Group
-                        style={{width: 120}}
+                        style={{ width: 120 }}
                         options={typeOpt}
                         optionType="button"
                         buttonStyle="solid"
@@ -153,14 +152,14 @@ function Record() {
                         onChange={e => setBillType(e.target.value)}
                     />
                     <DatePicker
-                        style={{width: 120}}
+                        style={{ width: 120 }}
                         allowClear={false}
                         value={moment(date, 'YYYY-MM-DD')}
                         onChange={(_, dateStr) => setDate(dateStr)}
                     />
                     <Select
                         ref={clsRef}
-                        style={{width: 120}}
+                        style={{ width: 120 }}
                         // showSearch
                         placeholder="类别"
                         optionFilterProp="children"
@@ -170,16 +169,16 @@ function Record() {
                         value={cls === "" ? null : cls}
                         onChange={c => {
                             setCls(c)
-                            if (billType === BillType.consume) setLabel(cls2label.consume[c][0])
+                            // if (billType === BillType.CONSUME) setLabel(cls2label.consume[c][0])
                         }}
                     >
                         {
                             classData.map(c => <Select.Option key={c} value={c}>{c}</Select.Option>)
                         }
                     </Select>
-                    {billType === BillType.consume && (
+                    {billType === BillType.CONSUME && (
                         <Select
-                            style={{width: 120}}
+                            style={{ width: 120 }}
                             // showSearch
                             placeholder="标签"
                             optionFilterProp="children"
@@ -189,14 +188,15 @@ function Record() {
                             value={label === "" ? null : label}
                             onChange={setLabel}>
                             {cls !== "" &&
-                                cls2label.consume[cls]
+                                cls2label.consume
+                                    .find(it => it.name === cls)?.labels
                                     .map(la => <Select.Option key={la} value={la}>{la}</Select.Option>)
                             }
                             <Select.Option key={"other"} value={"其他"}>{"其他"}</Select.Option>)
                         </Select>
                     )}
                     <InputNumber
-                        style={{width: 120}}
+                        style={{ width: 120 }}
                         placeholder="money"
                         prefix="￥"
                         value={money}
@@ -204,7 +204,7 @@ function Record() {
                         onKeyDown={e => e.key === "Enter" && submit()}
                     />
                     <Input.TextArea
-                        style={{width: 180}}
+                        style={{ width: 180 }}
                         rows={1}
                         placeholder="备注"
                         value={options}
@@ -213,7 +213,7 @@ function Record() {
                     />
                     <Button
                         type="primary"
-                        icon={<ArrowDownOutlined/>}
+                        icon={<ArrowDownOutlined />}
                         onKeyUp={e => e.key === "Tab" && clsRef.current!.focus()}
                         onClick={submit}
                     >
@@ -228,7 +228,7 @@ function Record() {
                     size="small"
                 />
                 <Button
-                    icon={<CloudUploadOutlined/>}
+                    icon={<CloudUploadOutlined />}
                     type="primary"
                     loading={uploadLoading}
                     onClick={upload}

src/store/index.ts

@@ -1,123 +1,144 @@
-import { makeAutoObservable, runInAction } from "mobx";
-import { createContext } from "react";
-import { createBill, getBills, getClass } from "../api/bills";
-import { BillType, IBill } from "../model";
-import * as R from "ramda"
-
-/**
- * 仅存储一个月的数据
- */
-export class Bill {
-    private _bills: IBill[] = [];
-    // _cls2label: IClass = {consume: new Map<string, string[]>(), income: []}
-    private _cls2label: { consume: Record<string, string[]>, income: [] } = { consume: {}, income: [] }
-
-    constructor() {
-        makeAutoObservable(this)
-        this.fetchClass().then()
-    }
-
-    get bills() {
-        return this._bills
-    }
-
-    get cls2label() {
-        return this._cls2label
-    }
-
-    groupByDate(type?: BillType) {
-        const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type)
-        const functions = R.compose(
-            R.groupBy((bill: IBill) => bill.date),
-            classFun,
-        )
-        return functions(this._bills)
-    }
-
-    groupByClass(type?: BillType) {
-        const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type)
-        const functions = R.compose(
-            R.groupBy((bill: IBill) => bill.cls),
-            classFun,
-        )
-        return functions(this._bills)
-    }
-
-    get listDailyMoney() {
-        return this.groupByDate
-    }
-
-    get totalMoney() {
-        const functions = R.compose(
-            Number,
-            (s: number) => s.toFixed(2),
-            R.sum,
-            R.map((bill: IBill) => bill.money)
-        )
-        return functions(this._bills)
-    }
-
-    get consumeMoney() {
-        const functions = R.compose(
-            Number,
-            (s: number) => s.toFixed(2),
-            R.sum,
-            R.map((bill: IBill) => bill.money),
-            R.filter((bill: IBill) => bill.type === BillType.consume),
-        )
-        return functions(this._bills)
-    }
-
-    get incomeMoney() {
-        const functions = R.compose(
-            Number,
-            (s: number) => s.toFixed(2),
-            R.sum,
-            R.map((bill: IBill) => bill.money),
-            R.filter((bill: IBill) => bill.type === BillType.income),
-        )
-        return functions(this._bills)
-    }
-
-    getTotalMoney(type?: BillType) {
-        switch (type) {
-            case BillType.income:
-                return this.incomeMoney
-            case BillType.consume:
-                return this.consumeMoney
-            default:
-                return this.totalMoney
-        }
-    }
-
-    get meanMoneyByDate() {
-        const days = Reflect.ownKeys(this.groupByDate).length
-        if (days === 0) return 0
-        return this.totalMoney / days
-    }
-
-
-    async add(bill: IBill) {
-        const { id } = await createBill(bill)
-        bill.id = id
-        runInAction(() => {
-            this._bills.push(bill);
-        })
-    }
-
-    async fetch(year: number, month: number) {
-        const data = await getBills(year, month)
-        runInAction(() => {
-            this._bills = data
-        })
-    }
-
-    async fetchClass() {
-        const cls2label = await getClass()
-        runInAction(() => {
-            this._cls2label = cls2label
-        })
-    }
-}
-
-export const BillContext = createContext<Bill>(new Bill());
+import { makeAutoObservable, runInAction } from "mobx";
+import { createContext } from "react";
+import { postBills, getBills, getLabels } from "../api/bills";
+import { BillType, IBill } from "../model";
+import * as R from "ramda"
+import { BillLabel } from "./types";
+
+
+/**
+ * 仅存储一个月的数据
+ */
+export class Bill {
+    private _bills: IBill[] = [];
+    // _cls2label: IClass = {consume: new Map<string, string[]>(), income: []}
+    private _cls2label: BillLabel = { consume: [], income: [] }
+
+    constructor() {
+        makeAutoObservable(this)
+    }
+
+    get bills() {
+        return this._bills
+    }
+
+    get cls2label() {
+        return this._cls2label
+    }
+
+    groupByDate(type?: BillType) {
+        const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type)
+        const functions = R.compose(
+            R.groupBy((bill: IBill) => bill.date),
+            classFun,
+        )
+        return functions(this._bills)
+    }
+
+    groupByClass(type?: BillType, date?: string) {
+        const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type && (date ? bill.date === date : true))
+        const functions = R.compose(
+            R.groupBy((bill: IBill) => bill.cls),
+            classFun,
+        )
+        return functions(this._bills)
+    }
+
+    groupByLabelOfClass(className: string) {
+        const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.cls === className)
+        const functions = R.compose(
+            R.groupBy((bill: IBill) => bill.label),
+            classFun,
+        )
+        return functions(this._bills)
+    }
+
+
+    get listDailyMoney() {
+        return this.groupByDate
+    }
+
+    get totalMoney() {
+        const functions = R.compose(
+            Number,
+            (s: number) => s.toFixed(2),
+            R.sum,
+            R.map((bill: IBill) => bill.money)
+        )
+        return functions(this._bills)
+    }
+
+    get consumeMoney() {
+        const functions = R.compose(
+            Number,
+            (s: number) => s.toFixed(2),
+            R.sum,
+            R.map((bill: IBill) => bill.money),
+            R.filter((bill: IBill) => bill.type === BillType.CONSUME),
+        )
+        return functions(this._bills)
+    }
+
+    get incomeMoney() {
+        const functions = R.compose(
+            Number,
+            (s: number) => s.toFixed(2),
+            R.sum,
+            R.map((bill: IBill) => bill.money),
+            R.filter((bill: IBill) => bill.type === BillType.INCOME),
+        )
+        return functions(this._bills)
+    }
+
+    getTotalMoney(type?: BillType) {
+        switch (type) {
+            case BillType.INCOME:
+                return this.incomeMoney
+            case BillType.CONSUME:
+                return this.consumeMoney
+            default:
+                return this.totalMoney
+        }
+    }
+
+    get meanMoneyByDate() {
+        const days = Reflect.ownKeys(this.groupByDate).length
+        if (days === 0) return 0
+        return this.totalMoney / days
+    }
+
+
+    async add(bill: IBill) {
+        const { id } = await postBills([bill])
+        bill.id = id
+        runInAction(() => {
+            this._bills.push(bill);
+        })
+    }
+
+    async fetch(year: number, month: number) {
+        const data = await getBills(year, month)
+        runInAction(() => {
+            this._bills = data.map((data: any) => {
+                return {
+                    id: data.id,
+                    type: data.type.toUpperCase === 'INCOME' ? BillType.INCOME : BillType.CONSUME,
+                    date: data.date,
+                    money: data.money,
+                    cls: data.cls,
+                    label: data.label,
+                    options: data.options
+                }
+            })
+        })
+    }
+
+    async fetchLabels() {
+        const cls2label = await getLabels()
+        runInAction(() => {
+            this._cls2label = cls2label
+        })
+    }
+}
+
+export const BillContext = createContext<Bill>(new Bill());

src/store/types.ts

@@ -0,0 +1,9 @@
+export type BillLabel = {
+    consume: Array<BillLabelOption>,
+    income: Array<BillLabelOption>,
+}
+
+type BillLabelOption = {
+    name: string,
+    labels: Array<string>,
+}

vite.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   server: {
     proxy: {
       "/api/": {
-        target: "http://www.fadinglight.cn:8080/",
+        target: "https://bill.fadinglight.cn/api/",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ""),
       }