feat: 话题插件创建按钮

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<ButtonProps, 'shape'> {
   title?: string;
 }
 export const IconBtn: React.FC<IconBtnProps> = 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<IconBtnProps> = 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}

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;
   }>;

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;
+    }
+  }
 }

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 (
     <div className="plugin-topic-group-panel">
       {Array.isArray(list) && list.length > 0 ? (
         list.map((_, i) => <TopicCard key={i} />)
       ) : (
-        <Empty />
+        <Empty description={Translate.noTopic}>
+          <Button type="primary" onClick={handleCreateTopic}>
+            {Translate.createBtn}
+          </Button>
+        </Empty>
       )}
+
+      <IconBtn
+        className="create-btn"
+        size="large"
+        icon="mdi:plus"
+        title={Translate.createBtn}
+        onClick={handleCreateTopic}
+      />
     </div>
   );
 });

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' }),
 };