mirror of https://github.com/msgbyte/tailchat
feat: 增加身份组基本框架
moonrailgun
3 years ago
parent
7b52326a91
commit
5f6064473d
@ -0,0 +1,28 @@
|
||||
import { Col, Row, Switch } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
interface PermissionItemProps {
|
||||
title: string;
|
||||
desc?: string;
|
||||
}
|
||||
|
||||
export const PermissionItem: React.FC<PermissionItemProps> = React.memo(
|
||||
(props) => {
|
||||
return (
|
||||
<div className="mx-2 py-3 border-b border-white border-opacity-20">
|
||||
<Row>
|
||||
<Col flex={1} className="font-bold">
|
||||
{props.title}
|
||||
</Col>
|
||||
|
||||
<Col>
|
||||
<Switch />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<div className="text-gray-400">{props.desc}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
PermissionItem.displayName = 'PermissionItem';
|
||||
@ -0,0 +1,20 @@
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
export const RoleItem: React.FC<{
|
||||
active: boolean;
|
||||
}> = React.memo((props) => {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'px-2 py-1 rounded cursor-pointer mb-1 hover:bg-black hover:bg-opacity-20',
|
||||
{
|
||||
'bg-black bg-opacity-20': props.active,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
RoleItem.displayName = 'RoleItem';
|
||||
@ -0,0 +1,59 @@
|
||||
import { IconBtn } from '@/components/IconBtn';
|
||||
import { PillTabPane, PillTabs } from '@/components/PillTabs';
|
||||
import { UserListItem } from '@/components/UserListItem';
|
||||
import { Button } from 'antd';
|
||||
import React, { useCallback } from 'react';
|
||||
import { t, useGroupInfo } from 'tailchat-shared';
|
||||
import { PermissionItem } from './PermissionItem';
|
||||
import { RoleItem } from './RoleItem';
|
||||
|
||||
interface GroupPermissionProps {
|
||||
groupId: string;
|
||||
}
|
||||
export const GroupRole: React.FC<GroupPermissionProps> = React.memo((props) => {
|
||||
const { groupId } = props;
|
||||
const groupInfo = useGroupInfo(groupId);
|
||||
const members = groupInfo?.members ?? [];
|
||||
|
||||
const handleAddMember = useCallback(() => {}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-full">
|
||||
<div className="pr-2 mr-2 w-40 border-r border-white border-opacity-20">
|
||||
{/* 角色列表 */}
|
||||
<RoleItem active={true}>{t('所有人')}</RoleItem>
|
||||
|
||||
<RoleItem active={false}>{t('添加角色')}</RoleItem>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<PillTabs>
|
||||
<PillTabPane key="permission" tab="权限">
|
||||
{/* 权限详情 */}
|
||||
<PermissionItem
|
||||
title={t('发送消息')}
|
||||
desc={t('允许成员在文字频道发送消息')}
|
||||
/>
|
||||
</PillTabPane>
|
||||
<PillTabPane key="member" tab="管理成员">
|
||||
{/* 管理成员 */}
|
||||
<div className="text-right mb-2">
|
||||
<Button type="primary" onClick={handleAddMember}>
|
||||
添加成员
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{members.map((m) => (
|
||||
<UserListItem
|
||||
key={m.userId}
|
||||
userId={m.userId}
|
||||
actions={[<IconBtn key="remove" icon="mdi:close" />]}
|
||||
/>
|
||||
))}
|
||||
</PillTabPane>
|
||||
</PillTabs>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
GroupRole.displayName = 'GroupRole';
|
||||
Loading…
Reference in New Issue