Browse Source

commit

main
mac 6 days ago
parent
commit
30fa4a7ca5
  1. BIN
      public/favicon.ico
  2. 2
      public/index.html
  3. 4
      src/api/chat.ts
  4. 4
      src/app.css
  5. BIN
      src/assets/img/logo.png
  6. 13
      src/components/Menu/index.tsx
  7. 10
      src/components/MyTable/index.tsx
  8. 27
      src/components/buzzup/BuzzFaceURL.tsx
  9. 92
      src/pages/chat/group-list/index.tsx
  10. 65
      src/pages/chat/user-list/index.tsx
  11. 28
      src/route/routes.ts
  12. 4
      src/utils/axios.ts
  13. 13
      src/utils/index.ts

BIN
public/favicon.ico

2
public/index.html

@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React Antd Admin管理后台</title>
<title>BuzzUp</title>
</head> </head>
<body> <body>

4
src/api/chat.ts

@ -0,0 +1,4 @@
import $axios from '@/utils/axios'
export const chat_userList = (params) => $axios.post('/admin/openImUserList', params)
export const chat_groupList = (params) => $axios.post('/admin/openImGroupList', params)

4
src/app.css

@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.text-overflow { .text-overflow {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;

BIN
src/assets/img/logo.png

Before

Width: 64  |  Height: 64  |  Size: 1.5 KiB

After

Width: 672  |  Height: 469  |  Size: 15 KiB

13
src/components/Menu/index.tsx

@ -6,7 +6,7 @@ import MyIconFont from '@/components/MyIconfont'
import { getKeyName, flattenRoutes } from '@/assets/js/publicFunc' import { getKeyName, flattenRoutes } from '@/assets/js/publicFunc'
import menus from '@/route/routes' import menus from '@/route/routes'
import logo from '@/assets/img/logo.png' import logo from '@/assets/img/logo.png'
import { connect } from 'react-redux'
import { connect, useSelector } from 'react-redux'
import * as actions from '@/store/actions' import * as actions from '@/store/actions'
import styles from './Menu.module.less' import styles from './Menu.module.less'
@ -17,7 +17,9 @@ interface Props extends ReduxProps { }
type MenuType = CommonObjectType<string> type MenuType = CommonObjectType<string>
const MenuView: FC<Props> = ({ storeData: { theme, userInfo, collapsed } }) => {
const MenuView: FC<Props> = () => {
const { theme, userInfo, collapsed } = useSelector((state: ReduxProps) => state.storeData)
const { pathname } = useLocation() const { pathname } = useLocation()
const { tabKey: curKey = 'home' } = getKeyName(pathname) const { tabKey: curKey = 'home' } = getKeyName(pathname)
const [current, setCurrent] = useState(curKey) const [current, setCurrent] = useState(curKey)
@ -123,7 +125,7 @@ const MenuView: FC<Props> = ({ storeData: { theme, userInfo, collapsed } }) => {
<div className="logo"> <div className="logo">
<Link to={{ pathname: '/' }}> <Link to={{ pathname: '/' }}>
<img alt="logo" src={logo} /> <img alt="logo" src={logo} />
{!collapsed && <h1>React Antd Admin</h1>}
{!collapsed && <h1>BuzzUp Admin</h1>}
</Link> </Link>
</div> </div>
<Menu <Menu
@ -139,7 +141,4 @@ const MenuView: FC<Props> = ({ storeData: { theme, userInfo, collapsed } }) => {
) )
} }
export default connect(
(state) => state,
actions
)(MenuView)
export default MenuView

10
src/components/MyTable/index.tsx

@ -124,6 +124,16 @@ const MyTable: FC<TableProps> = forwardRef(
total = validData.total; total = validData.total;
} }
if (validData.users) {
tableData = validData.users;
total = validData.total;
}
if (validData.groups) {
tableData = validData.groups;
total = validData.total;
}
// const validData = response?.data ? response.data : {} // const validData = response?.data ? response.data : {}
// const { rows: tableData = [], total } = validData // const { rows: tableData = [], total } = validData

27
src/components/buzzup/BuzzFaceURL.tsx

@ -0,0 +1,27 @@
import React from "react"
interface BuzzFaceURLProps {
faceUrl: string,
name: string,
size?: number
}
const BuzzFaceURL = (props: BuzzFaceURLProps) => {
const { faceUrl, name, size = 40 } = props
return faceUrl ? (
<img src={faceUrl} alt="" style={{
width: size, height: size, objectFit: 'cover', borderRadius: 5, display: 'flex', justifyContent: 'center',
alignItems: 'center'
}} />
) : (
<div style={{
width: size, height: size, objectFit: 'cover', borderRadius: 5, background: '#FBBA5A', display: 'flex', justifyContent: 'center',
alignItems: 'center'
}}>
{name.toLocaleUpperCase().substring(0, 1)}
</div>
)
}
export default BuzzFaceURL

92
src/pages/chat/group-list/index.tsx

@ -0,0 +1,92 @@
import { chat_groupList, chat_userList } from "@/api/chat"
import BuzzFaceURL from "@/components/buzzup/BuzzFaceURL";
import MyTable from "@/components/MyTable"
import { getTime, isGender, isPlatformId } from "@/utils";
import React from "react"
const ChatGroupList = () => {
const columns = [
{
title: '头像',
dataIndex: "",
width: 100,
render: (row) => (
<div>
<BuzzFaceURL faceUrl={row.groupInfo.faceURL} name={row.groupInfo.groupName} />
</div>
)
},
{
title: '群组名称',
dataIndex: "",
width: 150,
render: (row) => (
<div>
{row.groupInfo.groupName}
</div>
)
},
{
title: '群组ID',
dataIndex: "",
width: 150,
render: (row) => (
<div>
{row.groupInfo.groupID}
</div>
)
},
{
title: '群主ID',
dataIndex: "",
width: 150,
render: (row) => (
<div>
{row.groupOwnerUserID}
</div>
)
},
{
title: '群组人数',
dataIndex: "",
width: 150,
render: (row) => (
<div>
{row.groupInfo.memberCount}
</div>
)
},
{
title: '创建时间',
dataIndex: "",
render: (row) => (
<div>
{getTime(row.groupInfo.createTime)}
</div>
)
},
{
title: 'options',
fixed: 'right',
width: 100,
render: (item) => (
<div className="flex">
<div className="text-4xl"></div>
<div className="text-4xl"></div>
</div>
)
}
]
// 用户头像 用户昵称 用户ID 性别 手机号 在线状态
return (
<MyTable
apiFun={chat_groupList}
columns={columns}
/>
)
}
export default ChatGroupList

65
src/pages/chat/user-list/index.tsx

@ -0,0 +1,65 @@
import { chat_userList } from "@/api/chat"
import BuzzFaceURL from "@/components/buzzup/BuzzFaceURL";
import MyTable from "@/components/MyTable"
import { isGender, isPlatformId } from "@/utils";
import React from "react"
const ChatUserList = () => {
const columns = [
{
title: '头像',
dataIndex: "",
width: 100,
render: (row) => (
<div>
<BuzzFaceURL faceUrl={row.faceURL} name={row.nickname} />
</div>
)
},
{
title: '用户昵称',
dataIndex: "nickname",
width: 300
},
{
title: '用户ID',
dataIndex: "userID",
width: 300
},
{
title: '性别',
dataIndex: "gender",
width: 200,
render: (gender) => (
<div>{isGender(gender)}</div>
)
},
{
title: 'BuzzID',
dataIndex: "publicKey",
width: 200,
// render: (publicKey) => (
// <div>{isGender(gender)}</div>
// )
},
{
title: '在线状态',
dataIndex: "platformID",
render: (platformID) => (
<div>{isPlatformId(platformID)}</div>
)
},
]
// 用户头像 用户昵称 用户ID 性别 手机号 在线状态
return (
<MyTable
apiFun={chat_userList}
columns={columns}
/>
)
}
export default ChatUserList

28
src/route/routes.ts

@ -6,6 +6,8 @@ import BUZZUPNews from "@/pages/notify/news"
import Visa from "@/pages/visa" import Visa from "@/pages/visa"
import LotteryTime from "@/pages/lotteryTime" import LotteryTime from "@/pages/lotteryTime"
import WalletVersion from "@/pages/walletVersion" import WalletVersion from "@/pages/walletVersion"
import ChatUserList from "@/pages/chat/user-list"
import ChatGroupList from "@/pages/chat/group-list"
const routes = [ const routes = [
{ {
@ -17,6 +19,32 @@ const routes = [
component: Home, component: Home,
routes: [] routes: []
}, },
{
path: '/chat',
name: 'IM模块',
exact: true,
type: 'subMenu',
key: 'chat',
icon: SolutionOutlined,
routes: [
{
path: '/user-list',
name: '用户列表',
exact: true,
key: 'uset-list',
component: ChatUserList,
routes: []
},
{
path: '/group-list',
name: '群组列表',
exact: true,
key: 'group-list',
component: ChatGroupList,
routes: []
}
]
},
{ {
path: '/swiper', path: '/swiper',
name: 'DAPP', name: 'DAPP',

4
src/utils/axios.ts

@ -12,8 +12,8 @@ interface AxiosConfig {
} }
export const getBaseUrl = () => { export const getBaseUrl = () => {
// return `http://192.168.124.20:8008/api/v1`
return `https://apk.buzz-up.io/api/v1`
return `http://192.168.124.20:8008/api/v1`
// return `https://apk.buzz-up.io/api/v1`
} }
const config: AxiosConfig = { const config: AxiosConfig = {

13
src/utils/index.ts

@ -3,6 +3,19 @@ import './axios'
import { getBaseUrl } from './axios'; import { getBaseUrl } from './axios';
import { store } from '@/store'; import { store } from '@/store';
const genders = ['保密', '男', '女']
const platformId = ['-', 'IOS', 'Android', 'Windows', 'OSX', 'Web', 'MiniWeb', 'Linux', 'APad', 'IPad', 'Admin']
export const isGender = (index: number | string) => {
let _idx = typeof index === 'string' ? Number(index) : index
return genders[_idx] || '-'
}
export const isPlatformId = (index: number | string) => {
let _idx = typeof index === 'string' ? Number(index) : index
return platformId[_idx] || '-'
}
export const splitAddress = (address: string, index?: number) => { export const splitAddress = (address: string, index?: number) => {
try { try {
let idx = index ? index : 5; let idx = index ? index : 5;

Loading…
Cancel
Save