From 867fbd322318db87531a4043c8e57149d21333fc Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Wed, 11 Jan 2023 23:26:46 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20admin=20=E5=A2=9E=E5=8A=A0dashboard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pnpm-lock.yaml | 11 ++- server/admin/app/ra/App.tsx | 3 + .../admin/app/ra/dashboard/CardWithIcon.tsx | 70 ++++++++++++++++ server/admin/app/ra/dashboard/Welcome.tsx | 77 +++++++++++++++++ server/admin/app/ra/dashboard/cartouche.png | Bin 0 -> 1117 bytes .../admin/app/ra/dashboard/cartoucheDark.png | Bin 0 -> 1117 bytes server/admin/app/ra/dashboard/index.tsx | 78 ++++++++++++++++++ server/admin/app/ra/dashboard/logo.svg | 17 ++++ server/admin/app/ra/resources/group.tsx | 6 +- server/admin/package.json | 1 + 10 files changed, 254 insertions(+), 9 deletions(-) create mode 100644 server/admin/app/ra/dashboard/CardWithIcon.tsx create mode 100644 server/admin/app/ra/dashboard/Welcome.tsx create mode 100644 server/admin/app/ra/dashboard/cartouche.png create mode 100644 server/admin/app/ra/dashboard/cartoucheDark.png create mode 100644 server/admin/app/ra/dashboard/index.tsx create mode 100644 server/admin/app/ra/dashboard/logo.svg diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7e2d3c44..9a7c17e1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -921,6 +921,7 @@ importers: react: ^18.2.0 react-admin: ^4.6.3 react-dom: ^18.2.0 + react-router-dom: ^6.5.0 ts-node: ^10.9.1 typescript: ^4.8.4 dependencies: @@ -937,10 +938,11 @@ importers: isbot: 3.6.5 lodash: 4.17.21 morgan: 1.10.0 - ra-data-json-server: 4.6.3_biqbaboplfbrettd7655fr4n2y + ra-data-json-server: 4.6.3_7gebip3sgfc5uoqbhvi5xascza react: 18.2.0 react-admin: 4.6.3_ib3m5ricvtkl2cll7qpr2f6lvq react-dom: 18.2.0_react@18.2.0 + react-router-dom: 6.5.0_biqbaboplfbrettd7655fr4n2y ts-node: 10.9.1_typescript@4.9.4 devDependencies: '@remix-run/dev': 1.9.0_biqbaboplfbrettd7655fr4n2y @@ -31066,7 +31068,7 @@ packages: quill-delta: 3.6.3 dev: false - /ra-core/4.6.3_biqbaboplfbrettd7655fr4n2y: + /ra-core/4.6.3_7gebip3sgfc5uoqbhvi5xascza: resolution: {integrity: sha512-++UW1HJDy1m5EG8/6nRNr8btHxb7I5e5dMJXo83h0E7g5st2U6bIR0XLzIdcirOy5k3h3rM0lZP+tEA9M/Oxyw==} peerDependencies: history: ^5.1.0 @@ -31088,6 +31090,7 @@ packages: react-dom: 18.2.0_react@18.2.0 react-is: 17.0.2 react-query: 3.39.2_biqbaboplfbrettd7655fr4n2y + react-router-dom: 6.5.0_biqbaboplfbrettd7655fr4n2y transitivePeerDependencies: - react-native dev: false @@ -31122,11 +31125,11 @@ packages: - react-native dev: false - /ra-data-json-server/4.6.3_biqbaboplfbrettd7655fr4n2y: + /ra-data-json-server/4.6.3_7gebip3sgfc5uoqbhvi5xascza: resolution: {integrity: sha512-KChdLr/quUimzzsl5XTBc6jGg7EvQgjlRFi4Ymk8ovD/I11m2Vz8iXwgAV2kWDMKPqFuaRC9/xd6XZwjD/5zQQ==} dependencies: query-string: 7.1.3 - ra-core: 4.6.3_biqbaboplfbrettd7655fr4n2y + ra-core: 4.6.3_7gebip3sgfc5uoqbhvi5xascza transitivePeerDependencies: - history - react diff --git a/server/admin/app/ra/App.tsx b/server/admin/app/ra/App.tsx index 78aa81db..8b84c958 100644 --- a/server/admin/app/ra/App.tsx +++ b/server/admin/app/ra/App.tsx @@ -18,6 +18,7 @@ import MessageIcon from '@mui/icons-material/Message'; import GroupIcon from '@mui/icons-material/Group'; import AttachFileIcon from '@mui/icons-material/AttachFile'; import { theme } from './theme'; +import { Dashboard } from './dashboard'; const httpClient: typeof fetchUtils.fetchJson = (url, options = {}) => { try { @@ -43,6 +44,8 @@ export const App = () => ( diff --git a/server/admin/app/ra/dashboard/CardWithIcon.tsx b/server/admin/app/ra/dashboard/CardWithIcon.tsx new file mode 100644 index 00000000..752f1e07 --- /dev/null +++ b/server/admin/app/ra/dashboard/CardWithIcon.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import { FC, createElement } from 'react'; +import { Card, Box, Typography, Divider } from '@mui/material'; +import { Link, To } from 'react-router-dom'; +import { ReactNode } from 'react'; +import { LoadingIndicator } from 'react-admin'; + +import cartouche from './cartouche.png'; +import cartoucheDark from './cartoucheDark.png'; + +interface Props { + icon: FC; + to: To; + title?: string; + subtitle?: string | number; + children?: ReactNode; +} + +const CardWithIcon = (props: Props) => { + const { icon, title, subtitle, to, children } = props; + + return ( + + + + `url(${ + theme.palette.mode === 'dark' ? cartoucheDark : cartouche + }) no-repeat`, + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + '& .icon': { + color: (theme) => + theme.palette.mode === 'dark' ? 'inherit' : '#dc2440', + }, + }} + > + + {createElement(icon, { fontSize: 'large' })} + + + {title} + + {subtitle || } + + + + + {children && } + {children} + + ); +}; + +export default CardWithIcon; diff --git a/server/admin/app/ra/dashboard/Welcome.tsx b/server/admin/app/ra/dashboard/Welcome.tsx new file mode 100644 index 00000000..8376ca84 --- /dev/null +++ b/server/admin/app/ra/dashboard/Welcome.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import { Card, Box, Typography, CardActions, Button } from '@mui/material'; +import HomeIcon from '@mui/icons-material/Home'; +import CodeIcon from '@mui/icons-material/Code'; +import logoSvg from './logo.svg'; + +export const Welcome: React.FC = React.memo(() => { + return ( + + theme.palette.mode === 'dark' + ? '#535353' + : `linear-gradient(to right, #1a1d26 0%, #232c50 35%)`, + + color: '#fff', + padding: '20px', + marginTop: 2, + marginBottom: '1em', + }} + > + + + + 欢迎使用 Tailchat 后台管理程序 + + + + Tailchat 是一个完全开源的即时通讯应用 + + + + + + + + + + + ); +}); +Welcome.displayName = 'Welcome'; diff --git a/server/admin/app/ra/dashboard/cartouche.png b/server/admin/app/ra/dashboard/cartouche.png new file mode 100644 index 0000000000000000000000000000000000000000..06de31c0a16cb7e975857aae50539493fb8feabf GIT binary patch literal 1117 zcmW+#e^Aq993IH;UnN7~yeq^GoF|@g5DQ`vb2w(Y5x+VznVAJxCk6|xH9!J!Knjva z3|znr5)3`PI2p}d$8SPlt~n4^5!>GH_q(wH-{IJI1A50F@AE#N&wZZf`MiI;!c;cX z-)D~xiA3^er7+S+Bo_>?7$m+U+)BvDHU zY%Zmq$VhfzMh9Xf^aj{~#Ezm6Um}PD#qfm%0y9`p)Q%Y(7`CoA*mXJr!)&O*uGbT& zQw8OA)QON2P_ENCfDsPcfx!lwh*2(=+o2X12{?&i&NviX(JU^_&A|@zCxBD94sGE8 zVzewS!qR~t1d3Tvqg9XC5rYE&2WGIL=qmJwCVIUy5yNI?W}t%u?yN&pDiwiX4#cpG zAnSVMr4~SLhfBhU?OYsylRJPKzLUdCW2bK|M3anhOH^=B9sH#E;@gwew4qNI3;#Pe z7JpNpSUK#KkYE2ui-!l)P1Gt=DtZo$oSgdT!}~1Vwf%R~>|FnuAJ`s>rm%u6$>Z_a z@M_T#Wyd-<0c6WJ5TEgPXDzUJ=k{wX>8 zmeK5u-IJBM#NWAdgj(viR2Rd^|5!nD(=imvXM-}gp$vs`g={)N39k{e#f1e)VW%y; z7c%$C3Wf3^-*22E>5MkLN!jlD`JUie!%fONoSFXM%jB^JlXHr)*Mf`TlezP znVeuv%{1%vjhpZ~GG&hng(Y(|-?%6Rb^cKu znJiFl7k%$OJRhYnKh6!?A3>b9MrsEc95@_C>||Kppmf9~D!X@+Z*$CO`)# zYd2Xiu&uToKBYR_j&E7Ih8SSHsjD&u?CFzMGQjy6CrYi-a$T1o~0}PMTBo!u3i%zj+9olwshF$ zf9HFCQy0VS1L7<11U;pi`#)$6PQpD+{z(3}MLnXt$r4x1+UEytRX0qF^tQLwJAYl8G7Zor_tqQl|MR4u3*TtJ#tcKg@7ncgQ&a5qS(E-(W8#2u-FL!lB5bI|1ZK<9->b}W*06ztZmCR=J I(9e|r58|kj>;M1& literal 0 HcmV?d00001 diff --git a/server/admin/app/ra/dashboard/cartoucheDark.png b/server/admin/app/ra/dashboard/cartoucheDark.png new file mode 100644 index 0000000000000000000000000000000000000000..98d1f76e8eab69c21d0317701b14fea3195ece3c GIT binary patch literal 1117 zcmeAS@N?(olHy`uVBq!ia0y~yVEh7PM{+O&$^U=VY=9JFage(ch~s;u;JF0RaI(fj}?-3i$i`14(yx_n@F4KR-Vp36z1bA+p}y z-arOiJwz5r0>yzwLBt`XgM$N*0aT0zJUu;uDuIF!!-2K{Ed{Fd^74YKhX?`{`1<-n z1U)=FfLefT2(Y%ch8PP}qphtCG0n}*4afj$fp8%zfo!0SS#vwwfd2F^3Gxg6|InD> zjpbYO=i1lB_suS_KG$V?H1%=Oqm+|Ylb+eP9^Gsw5-!T?t4Ba zYQ5*v4)v8mzvFptOz~s8I8!k{Z1Ij$H$R9*vX!JTFfgt2ba4!+nDh4T^)L}f3D<{A zjfM+n9AjD3R2Xt5@{HG)zw*bq->+W1`}}^tsc+tMzFM=lfzfKo5(D#kp0^WB{4*0T z+Oj-#xp?`~k-aQOLoQzaDEv-SL$!OJ-@KxHN5$ALCAapnwzgcnys4V!l*Z!a#_vou zlzQi#+x2`wi`lQPYCf-w#mkG|*=i{C%{#Z7ec^1YU##C1N`l?}#qV}s@Ra*IsanwL z3JZoOkl``4asu@Z)ndYP{ojXncbhe7628i7CeV41rbH3@PTwR{W zZ3B_(uAX8wdH(OqEmoK3o+4W>n?IjveD$*X^Or$aC!0UFEc!ax{dwoaufgWeZ*JfX zaDT3Ofmgu%dF6ZE3ue!oPN-!p{>(RB&13fGZOhCwW`B;`=EgDmGuyGS7qdREyP9@l z*5|ONWh-WV{`aM=W0t@Wt_Y5g#RbU^?4J|roa1~+z@zD-nL9$-nl39-;vr19%GxI*Mh&_G`w)($@zJ^ z{re8Ksn&nIRGZgh@M86!slTsCEUo`^J^xPnF%R4B{k7lk)h6{^)Bf4s|L(EVLW>{E z*S literal 0 HcmV?d00001 diff --git a/server/admin/app/ra/dashboard/index.tsx b/server/admin/app/ra/dashboard/index.tsx new file mode 100644 index 00000000..d1b4c470 --- /dev/null +++ b/server/admin/app/ra/dashboard/index.tsx @@ -0,0 +1,78 @@ +import React from 'react'; +import CardWithIcon from './CardWithIcon'; +import { Welcome } from './Welcome'; +import PersonIcon from '@mui/icons-material/Person'; +import MessageIcon from '@mui/icons-material/Message'; +import GroupIcon from '@mui/icons-material/Group'; +import AttachFileIcon from '@mui/icons-material/AttachFile'; +import { useGetList } from 'react-admin'; +import { Grid } from '@mui/material'; + +export const Dashboard: React.FC = React.memo(() => { + const { total: usersNum } = useGetList('users', { + pagination: { page: 1, perPage: 1 }, + }); + const { total: tempUsersNum } = useGetList('users', { + filter: { temporary: true }, + pagination: { page: 1, perPage: 1 }, + }); + const { total: messageNum } = useGetList('messages', { + pagination: { page: 1, perPage: 1 }, + }); + const { total: groupNum } = useGetList('groups', { + pagination: { page: 1, perPage: 1 }, + }); + const { total: fileNum } = useGetList('file', { + pagination: { page: 1, perPage: 1 }, + }); + + return ( +
+ + + + + + + + + + + + + + + + + + + +
+ ); +}); +Dashboard.displayName = 'Dashboard'; diff --git a/server/admin/app/ra/dashboard/logo.svg b/server/admin/app/ra/dashboard/logo.svg new file mode 100644 index 00000000..b2c7ed9f --- /dev/null +++ b/server/admin/app/ra/dashboard/logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/server/admin/app/ra/resources/group.tsx b/server/admin/app/ra/resources/group.tsx index 973e68f4..82a8732a 100644 --- a/server/admin/app/ra/resources/group.tsx +++ b/server/admin/app/ra/resources/group.tsx @@ -29,11 +29,7 @@ export const GroupList: React.FC = () => ( - - - - - + diff --git a/server/admin/package.json b/server/admin/package.json index 1795efed..613e0e8f 100644 --- a/server/admin/package.json +++ b/server/admin/package.json @@ -28,6 +28,7 @@ "react": "^18.2.0", "react-admin": "^4.6.3", "react-dom": "^18.2.0", + "react-router-dom": "^6.5.0", "ts-node": "^10.9.1" }, "devDependencies": {