.dockerignore

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

package.json

@@ -5,8 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && pwsh scripts/build.ps1",
-    "deploy": "tsc && vite build && pwsh scripts/build.ps1",
     "preview": "vite preview"
   },
   "dependencies": {

scripts/build.ps1

@@ -1,5 +1,8 @@
-$server_path='fadinglight:/root/docker/caddy/site/www'
+docker build . -t registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev
 
-ssh fadinglight "rm ${server_path}/* -r"
+docker push registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react:dev
 
-scp -r dist/* $server_path
+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"

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 fadinglight  "cd /root/docker/bill-sys/;
+ssh aliyun "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,5 +1,6 @@
 import Layout from './components/layout'
 import {Routes, Route} from 'react-router-dom'
+import {useEffect} from "react";
 import Home from './pages/Home/Home'
 import NotFound from './pages/NotFound'
 import {Bill, BillContext} from "./store";
@@ -8,6 +9,13 @@ 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">

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(`/bill/${year}/${month}`)
+    const data = await request.get(`/search/${year}/${month}`)
     return data.data
 }
 
-export async function getLabels() {
+export async function getClass() {
-    const data = await request.get(`/label/`)
+    const data = await request.get(`/class`)
     return data.data
 }
 
-export async function postBills(bills: Array<IBill>) {
+export async function createBill(bill: IBill) {
-    const data = await request.post(`/bill/`, bills)
+    const data = await request.post(`/create`, bill)
     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,7 +17,6 @@ interface IProps {
     data: BarData[];
     title?: string;
     subTitle?: string;
-    onClickItem?: (date: string) => void;
 }
 
 export const Bar = (props: IProps) => {
@@ -38,23 +37,6 @@ export const Bar = (props: IProps) => {
                 subtext: subTitle ?? "",
                 left: 'center'
             },
-            tooltip: {
-                show: true,
-                trigger: "item",
-                triggerOn: "mousemove|click",
-                axisPointer: {
-                    type: "line"
-                },
-                showContent: true,
-                alwaysShowContent: false,
-                showDelay: 0,
-                hideDelay: 100,
-                textStyle: {
-                    fontSize: 14
-                },
-                borderWidth: 0,
-                padding: 5
-            },
             xAxis: {
                 type: 'category',
                 data: data.map(item => {
@@ -82,16 +64,29 @@ export const Bar = (props: IProps) => {
                     }),
                 },
             ],
+            tooltip: {
+                show: true,
+                trigger: "item",
+                triggerOn: "mousemove|click",
+                axisPointer: {
+                    type: "line"
+                },
+                showContent: true,
+                alwaysShowContent: false,
+                showDelay: 0,
+                hideDelay: 100,
+                textStyle: {
+                    fontSize: 14
+                },
+                borderWidth: 0,
+                padding: 5
+            }
         };
     }, [data, title, subTitle])
 
+
     const bar = useMemo(() => {
-        const chart = chartRef.current ? echarts.init(chartRef.current, undefined, { renderer: "svg" }) : null;
+        return 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,8 +14,6 @@ import {
     TitleComponentOption,
     TooltipComponent,
     TooltipComponentOption,
-    LegendComponent,
-    LegendComponentOption,
     GridComponent,
     GridComponentOption,
     // 数据集组件
@@ -36,7 +34,6 @@ export type ECOption = echarts.ComposeOption<
     | PieSeriesOption
     | TitleComponentOption
     | TooltipComponentOption
-    | LegendComponentOption
     | GridComponentOption
     | DatasetComponentOption>;
 
@@ -44,7 +41,6 @@ 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: 400px;
+  width: 100%;
-  height: 400px;
+  height: 100%;
 }

src/components/charts/pie/index.tsx

@@ -33,15 +33,15 @@ export default function Pie(props: IProps) {
             },
             tooltip: {
                 trigger: 'item',
-                formatter: '{b} : ￥{c} ({d}%)',
+                formatter: '{a} <br/>{b} : {c} ({d}%)',
-            },
-            legend: {
-                orient: 'vertical',
-                left: 'left'
             },
+            // legend: {
+            //     orient: 'vertical',
+            //     left: 'left',
+            // },
             series: [
                 {
-                    // name: "金额",
+                    name: "金额",
                     type: "pie",
                     radius: ['40%', '70%'],
                     // roseType: "radius",
@@ -52,14 +52,14 @@ export default function Pie(props: IProps) {
                         
                     },
                     label: {
-                        show: false,
+                        show: true,
                         // position: "top",
                         margin: 8,
                         formatter: "{b}: {c}"
                     },
                     emphasis: {
                         label: {
-                            show: false,
+                            show: true
                         }
                     },
                     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,
+    consume = 0,
-    INCOME,
+    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

@@ -9,13 +9,4 @@
     gap: 10px;
     align-items: flex-start;
   }
-
-  .monthBar {
-    height: 300px;
-  }
-
-  .cards {
-    display: grid;
-    grid: repeat(2, auto) / auto-flow auto;
-  }
 }

src/pages/Home/Home.tsx

@@ -6,7 +6,7 @@ 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 { Card, DatePicker, Radio, Space } from "antd";
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 import dayjs from 'dayjs'
@@ -47,22 +47,10 @@ const Home = () => {
     }
 
     const typeOpt = [
-        { label: '支出', value: BillType.CONSUME },
+        { label: '支出', value: BillType.consume },
-        { label: '收入', value: BillType.INCOME },
+        { label: '收入', value: BillType.income },
     ];
-    const [billType, setBillType] = useState(BillType.CONSUME)
+    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}>
@@ -86,44 +74,8 @@ const Home = () => {
                     </Card>
                 </Space>
             </div>
-            <div className={styles.monthBar}>
+            <Bar data={transformer(billStore.groupByDate(billType))} />
-                <Bar
+            <Pie data={transformer(billStore.groupByClass(billType))} />
-                    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>
     )
 }

src/pages/Record/Record.tsx

@@ -7,7 +7,7 @@ import { BillContext } from "../../store";
 import {observer} from "mobx-react-lite";
 import styles from "./Record.module.scss"
 import {BaseSelectRef} from "rc-select/lib/BaseSelect";
-import { postBills } from "../../api/bills";
+import {createBill} from "../../api/bills";
 
 
 function Record() {
@@ -28,9 +28,6 @@ function Record() {
         if (!!clsRef.current) clsRef.current.focus()
     }, [clsRef])
 
-    useEffect(() => {
-        billStore.fetchLabels().then()
-    }, [])
 
     // table
     const columns = [
@@ -53,7 +50,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>
@@ -82,8 +79,8 @@ function Record() {
     const [datasource, setDataSource] = useState<IBill[]>([])
 
     const typeOpt = [
-        { label: '支出', value: BillType.CONSUME },
+        {label: '支出', value: BillType.consume},
-        { label: '收入', value: BillType.INCOME },
+        {label: '收入', value: BillType.income},
     ];
 
     // 提交到表格
@@ -96,7 +93,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("")
@@ -120,22 +117,26 @@ function Record() {
     const [uploadLoading, setUploadLoading] = useState(false)
     const upload = async () => {
         setUploadLoading(true)
-        datasource.forEach(it => Reflect.deleteProperty(it, "key"))
+        const failures = []
+        for (let bill of datasource) {
             try {
-            await postBills(datasource)
+                const {id} = await createBill(bill)
-            setDataSource([])
+                if (!id) failures.push(bill)
-        } catch (err) {
+            } catch (e) {
+                failures.push(bill)
             }
+        }
+        setDataSource(failures)
         setUploadLoading(false)
     }
 
-    let classData: string[] = []
+    let classData: string[]
     switch (billType) {
-        case BillType.CONSUME:
+        case BillType.consume:
-            classData = cls2label.consume.map(it => it.name)
+            classData = Object.keys(cls2label.consume)
             break
-        case BillType.INCOME:
+        case BillType.income:
-            classData = cls2label.income.map(it => it.name)
+            classData = cls2label.income
             break
     }
 
@@ -169,14 +170,14 @@ 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}}
                             // showSearch
@@ -188,8 +189,7 @@ function Record() {
                             value={label === "" ? null : label}
                             onChange={setLabel}>
                             {cls !== "" &&
-                                cls2label.consume
+                                cls2label.consume[cls]
-                                    .find(it => it.name === cls)?.labels
                                     .map(la => <Select.Option key={la} value={la}>{la}</Select.Option>)
                             }
                             <Select.Option key={"other"} value={"其他"}>{"其他"}</Select.Option>)

src/store/index.ts

@@ -1,10 +1,8 @@
 import { makeAutoObservable, runInAction } from "mobx";
 import { createContext } from "react";
-import { postBills, getBills, getLabels } from "../api/bills";
+import { createBill, getBills, getClass } from "../api/bills";
 import { BillType, IBill } from "../model";
 import * as R from "ramda"
-import { BillLabel } from "./types";
-
 
 /**
  * 仅存储一个月的数据
@@ -12,10 +10,11 @@ import { BillLabel } from "./types";
 export class Bill {
     private _bills: IBill[] = [];
     // _cls2label: IClass = {consume: new Map<string, string[]>(), income: []}
-    private _cls2label: BillLabel = { consume: [], income: [] }
+    private _cls2label: { consume: Record<string, string[]>, income: [] } = { consume: {}, income: [] }
 
     constructor() {
         makeAutoObservable(this)
+        this.fetchClass().then()
     }
 
     get bills() {
@@ -35,8 +34,8 @@ export class Bill {
         return functions(this._bills)
     }
 
-    groupByClass(type?: BillType, date?: string) {
+    groupByClass(type?: BillType) {
-        const classFun = R.filter((bill: IBill) => R.of(bill.type).length === 0 || bill.type === type && (date ? bill.date === date : true))
+        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,
@@ -44,16 +43,6 @@ export class Bill {
         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
     }
@@ -74,7 +63,7 @@ export class Bill {
             (s: number) => s.toFixed(2),
             R.sum,
             R.map((bill: IBill) => bill.money),
-            R.filter((bill: IBill) => bill.type === BillType.CONSUME),
+            R.filter((bill: IBill) => bill.type === BillType.consume),
         )
         return functions(this._bills)
     }
@@ -85,16 +74,16 @@ export class Bill {
             (s: number) => s.toFixed(2),
             R.sum,
             R.map((bill: IBill) => bill.money),
-            R.filter((bill: IBill) => bill.type === BillType.INCOME),
+            R.filter((bill: IBill) => bill.type === BillType.income),
         )
         return functions(this._bills)
     }
 
     getTotalMoney(type?: BillType) {
         switch (type) {
-            case BillType.INCOME:
+            case BillType.income:
                 return this.incomeMoney
-            case BillType.CONSUME:
+            case BillType.consume:
                 return this.consumeMoney
             default:
                 return this.totalMoney
@@ -109,7 +98,7 @@ export class Bill {
 
 
     async add(bill: IBill) {
-        const { id } = await postBills([bill])
+        const { id } = await createBill(bill)
         bill.id = id
         runInAction(() => {
             this._bills.push(bill);
@@ -119,22 +108,12 @@ export class Bill {
     async fetch(year: number, month: number) {
         const data = await getBills(year, month)
         runInAction(() => {
-            this._bills = data.map((data: any) => {
+            this._bills = data
-                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() {
+    async fetchClass() {
-        const cls2label = await getLabels()
+        const cls2label = await getClass()
         runInAction(() => {
             this._cls2label = cls2label
         })

src/store/types.ts

@@ -1,9 +0,0 @@
-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: "https://bill.fadinglight.cn/api/",
+        target: "http://www.fadinglight.cn:8080/",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ""),
       }