From fe569d7328720dd9af7ea373902ed202f7e9c8db Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Sun, 2 Oct 2022 15:17:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AF=9D=E9=A2=98=E6=8F=92=E4=BB=B6?= =?UTF-8?q?=E5=88=9B=E5=BB=BA=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/web/src/components/IconBtn.tsx | 7 +++-- client/web/tailchat.d.ts | 22 +++++++++++--- .../src/group/GroupTopicPanelRender.less | 11 +++++++ .../src/group/GroupTopicPanelRender.tsx | 29 ++++++++++++++++--- .../com.msgbyte.topic/src/translate.ts | 2 ++ 5 files changed, 60 insertions(+), 11 deletions(-) diff --git a/client/web/src/components/IconBtn.tsx b/client/web/src/components/IconBtn.tsx index c2b7be2e..828d7355 100644 --- a/client/web/src/components/IconBtn.tsx +++ b/client/web/src/components/IconBtn.tsx @@ -2,7 +2,7 @@ import { Button, ButtonProps, Tooltip } from 'antd'; import clsx from 'clsx'; import React from 'react'; import { isValidStr } from 'tailchat-shared'; -import { Icon } from './Icon'; +import { Icon } from 'tailchat-design'; type IconBtnShapeType = 'circle' | 'square'; @@ -23,7 +23,7 @@ interface IconBtnProps extends Omit { title?: string; } export const IconBtn: React.FC = React.memo( - ({ icon, iconClassName, title, ...props }) => { + ({ icon, iconClassName, title, className, ...props }) => { const shape = calcShape(props.shape); const iconEl = ( @@ -38,7 +38,8 @@ export const IconBtn: React.FC = React.memo( 'border-0 text-white text-opacity-80 hover:text-opacity-100', props.danger ? 'bg-red-600 bg-opacity-80 hover:bg-opacity-100' - : 'bg-black bg-opacity-20 hover:bg-opacity-60' + : 'bg-black bg-opacity-20 hover:bg-opacity-60', + className )} {...props} shape={shape} diff --git a/client/web/tailchat.d.ts b/client/web/tailchat.d.ts index 8fbeaea4..587a66e7 100644 --- a/client/web/tailchat.d.ts +++ b/client/web/tailchat.d.ts @@ -109,13 +109,16 @@ declare module '@capital/common' { export const uploadFile: any; - export const showToasts: any; + export const showToasts: ( + message: string, + type?: 'info' | 'success' | 'error' | 'warning' + ) => void; - export const showErrorToasts: any; + export const showErrorToasts: (error: any) => void; export const fetchAvailableServices: any; - export const isValidStr: any; + export const isValidStr: (str: any) => str is string; export const useGroupPanelInfo: any; @@ -252,7 +255,16 @@ declare module '@capital/component' { */ export const notification: any; - export const Empty: any; + export const Empty: React.FC< + React.PropsWithChildren<{ + prefixCls?: string; + className?: string; + style?: React.CSSProperties; + imageStyle?: React.CSSProperties; + image?: React.ReactNode; + description?: React.ReactNode; + }> + >; export const Avatar: any; @@ -266,7 +278,9 @@ declare module '@capital/component' { export const IconBtn: React.FC<{ icon: string; + className?: string; iconClassName?: string; + size?: 'small' | 'middle' | 'large'; shape?: 'circle' | 'square'; title?: string; }>; diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.less b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.less index a4ac3d29..92eac355 100644 --- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.less +++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.less @@ -2,4 +2,15 @@ display: flex; flex-direction: column; width: 100%; + position: relative; + + .create-btn { + position: absolute; + right: 20px; + bottom: 20px; + + > .anticon { + font-size: 24px; + } + } } diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx index dbb3ffae..d6580bf4 100644 --- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx +++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx @@ -1,9 +1,14 @@ -import React, { useEffect } from 'react'; +import React, { useCallback, useEffect } from 'react'; import { TopicCard } from '../components/TopicCard'; -import { useAsyncRequest, useGroupPanelContext } from '@capital/common'; -import { Empty } from '@capital/component'; +import { + showToasts, + useAsyncRequest, + useGroupPanelContext, +} from '@capital/common'; +import { Button, Empty, IconBtn } from '@capital/component'; import { request } from '../request'; import './GroupTopicPanelRender.less'; +import { Translate } from '../translate'; const GroupTopicPanelRender: React.FC = React.memo(() => { const panelInfo = useGroupPanelContext(); @@ -27,13 +32,29 @@ const GroupTopicPanelRender: React.FC = React.memo(() => { fetch(); }, [fetch]); + const handleCreateTopic = useCallback(() => { + showToasts('TODO: 创建话题'); + }, []); + return (
{Array.isArray(list) && list.length > 0 ? ( list.map((_, i) => ) ) : ( - + + + )} + +
); }); diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/translate.ts b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/translate.ts index 63a9cade..b8c1a59f 100644 --- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/translate.ts +++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/translate.ts @@ -2,4 +2,6 @@ import { localTrans } from '@capital/common'; export const Translate = { topicpanel: localTrans({ 'zh-CN': '话题面板', 'en-US': 'Topic Panel' }), + noTopic: localTrans({ 'zh-CN': '暂无话题', 'en-US': 'No Topic' }), + createBtn: localTrans({ 'zh-CN': '创建话题', 'en-US': 'Create Topic' }), };