refactor🥊: 去除不需要的页面组件和npm包

package.json

@@ -5,15 +5,11 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && pwsh scripts/build.ps1",
     "preview": "vite preview"
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@bytemd/plugin-gfm": "^1.17.2",
-    "@bytemd/plugin-highlight": "^1.17.2",
-    "@bytemd/react": "^1.17.2",
-    "@nextui-org/react": "^1.0.0-beta.9",
     "antd": "^4.22.8",
     "axios": "^0.27.2",
     "dayjs": "^1.11.5",

src/App.tsx

@@ -2,9 +2,6 @@ import Layout from './components/layout'
 import {Routes, Route} from 'react-router-dom'
 import {useEffect} from "react";
 import Home from './pages/Home/Home'
-import Login from './pages/Login'
-import Chat from './components/chat'
-import {MdEditor} from './components/editor'
 import NotFound from './pages/NotFound'
 import {Bill, BillContext} from "./store";
 import './App.css'
@@ -28,9 +25,7 @@ function App() {
                         <Route path={"/"} element={<Home/>}/>
                         <Route path={"/home"} element={<Home/>}/>
                         <Route path={"/record"} element={<Record/>}/>
-                        <Route path={"/chat"} element={<Chat/>}/>
+                        <Route path={"/*"} element={<NotFound/>}/>
-                        <Route path={"/editor"} element={<MdEditor/>}/>
-                        <Route path={'/login'} element={<Login/>}/>
                     </Routes>
                 </Layout>
             </BillContext.Provider>

src/components/chat/index.tsx

@@ -1,13 +0,0 @@
-import { Left } from "../../assets/icon/Left";
-import styles from "./chat.module.scss"
-
-export default function Chat() {
-
-    return (
-        <div className={styles.chatContainer}>
-            <Left size={50} fill="currentColor" />
-            <header className={styles.chatHeader}></header>
-            <footer className={styles.chatFooter}></footer>
-        </div>
-    )
-}

src/components/editor/index.tsx

@@ -1,26 +0,0 @@
-import {Editor} from '@bytemd/react'
-import 'bytemd/dist/index.css'
-import highlight from '@bytemd/plugin-highlight'
-import gfm from "@bytemd/plugin-gfm"
-import {useState} from 'react'
-
-
-const plugins = [
-    gfm(),
-    highlight()
-]
-
-export const MdEditor = () => {
-
-    const [value, setValue] = useState('')
-
-    return (
-        <Editor
-            value={value}
-            plugins={plugins}
-            onChange={(v) => {
-                setValue(v)
-            }}
-        />
-    )
-}

src/components/layout/index.tsx

@@ -22,11 +22,8 @@ export default function Layout(props: IProps) {
     const { children, home } = props
 
     const items = [
-        { label: <NavLink to={"/home"}>Home</NavLink>, key: '/home', icon: <HomeOutlined /> },
+        { label: <NavLink to={"/home"}>统计</NavLink>, key: '/home', icon: <HomeOutlined /> },
-        { label: <NavLink to={"/record"}>Record</NavLink>, key: '/record', icon: <FormOutlined /> },
+        { label: <NavLink to={"/record"}>记账</NavLink>, key: '/record', icon: <FormOutlined /> },
-        { label: <NavLink to={"/login"}>Login</NavLink>, key: '/login', icon: <LoginOutlined /> },
-        { label: <NavLink to={"/chat"}>Chat</NavLink>, key: '/chat', icon: <WechatOutlined /> },
-        { label: <NavLink to={"/editor"}>Editor</NavLink>, key: '/editor', icon: <EditOutlined /> },
     ]
 
 

src/main.tsx

@@ -1,4 +1,3 @@
-import { NextUIProvider } from '@nextui-org/react'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
@@ -8,10 +7,8 @@ import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <NextUIProvider >
+    <BrowserRouter>
-      <BrowserRouter>
+      <App />
-        <App />
+    </BrowserRouter>
-      </BrowserRouter>
-    </NextUIProvider>
   </React.StrictMode>
 )

src/pages/Home/Home.tsx

@@ -43,11 +43,6 @@ const Home = () => {
     ];
     const [billType, setBillType] = useState(BillType.consume)
 
-    const TotalMoney = () => <Card>
-        {"总金额"}
-        ￥{billStore.totalMoney}
-    </Card>
-
     return (
         <div className={styles.home}>
             <div className={styles.total}>
@@ -64,7 +59,10 @@ const Home = () => {
                         value={billType}
                         onChange={e => setBillType(e.target.value)}
                     />
-                    <TotalMoney/>
+                     <Card>
+                        {"总金额"}
+                        ￥{billStore.getTotalMoney(billType)}
+                    </Card>
                 </Space>
             </div>
             <Bar data={transformer(billStore.groupByDate(billType))}/>
@@ -73,5 +71,4 @@ const Home = () => {
     )
 }
 
-
 export default observer(Home)

src/pages/Login.tsx

@@ -1,76 +0,0 @@
-import {
-    Button,
-    Card,
-    Checkbox,
-    Input,
-    Row,
-    Spacer,
-    Text,
-} from "@nextui-org/react";
-import { Mail } from "../assets/icon/Mail";
-import { Password } from "../assets/icon/Password";
-import { React } from "../assets/icon/React";
-import { useState } from "react";
-
-const Login = () => {
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
-
-    return (
-        <Card css={{ p: "$6", mw: "400px" }}>
-            <Card.Header>
-                <React fill="currentColor" />
-                <Text size={18}>
-                    Welcome to CLZ's
-                    <Text b size={18}>
-                        {" "}
-                        BillAPP
-                    </Text>
-                </Text>
-            </Card.Header>
-            <Card.Divider />
-            <Card.Body>
-                <Input
-                    clearable
-                    bordered
-                    fullWidth
-                    color="primary"
-                    size="lg"
-                    placeholder="Email"
-                    contentLeft={<Mail fill="currentColor" />}
-                    value={email}
-                    onChange={e => setEmail(e.target.value)}
-                />
-                <Spacer />
-                <Input.Password
-                    clearable
-                    bordered
-                    fullWidth
-                    color="primary"
-                    size="lg"
-                    placeholder="Password"
-                    contentLeft={<Password fill="currentColor" />}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                />
-                <Spacer />
-                <Row justify="space-between">
-                    <Checkbox>
-                        <Text size={14}>Remember me</Text>
-                    </Checkbox>
-                    <Text size={14}>Forgot password?</Text>
-                </Row>
-            </Card.Body>
-            <Card.Footer>
-                <Row justify="center">
-                    <Button size="sm" light>
-                        Clear
-                    </Button>
-                    <Button size="sm">Sign in</Button>
-                </Row>
-            </Card.Footer>
-        </Card>
-    );
-};
-
-export default Login;

src/store/index.ts

@@ -1,7 +1,7 @@
-import {makeAutoObservable, runInAction} from "mobx";
+import { makeAutoObservable, runInAction } from "mobx";
-import {createContext} from "react";
+import { createContext } from "react";
-import {createBill, getBills, getClass} from "../api/bills";
+import { createBill, getBills, getClass } from "../api/bills";
-import {BillType, IBill} from "../model";
+import { BillType, IBill } from "../model";
 import * as R from "ramda"
 
 /**
@@ -10,7 +10,7 @@ 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: []}
+    private _cls2label: { consume: Record<string, string[]>, income: [] } = { consume: {}, income: [] }
 
     constructor() {
         makeAutoObservable(this)
@@ -57,6 +57,32 @@ export class Bill {
         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) {
+        return !type ? this.totalMoney : type === BillType.income ? this.incomeMoney : this.consumeMoney
+    }
+
     get meanMoneyByDate() {
         const days = Reflect.ownKeys(this.groupByDate).length
         if (days === 0) return 0
@@ -65,7 +91,7 @@ export class Bill {
 
 
     async add(bill: IBill) {
-        const {id} = await createBill(bill)
+        const { id } = await createBill(bill)
         bill.id = id
         runInAction(() => {
             this._bills.push(bill);