feat: 话题卡片增加已读未读容器

msgbyte · Feb 3, 2023 · 84584c8 · 84584c8
1 parent 8b5b045
commit 84584c8
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 59 deletions.
diff --git a/client/web/src/plugin/component/index.tsx b/client/web/src/plugin/component/index.tsx
@@ -29,6 +29,7 @@ export {
 } from 'tailchat-design';
 export { Link } from 'react-router-dom';
 
+export { MessageAckContainer } from '@/components/ChatBox/ChatMessageList/MessageAckContainer';
 export { Image } from '@/components/Image';
 export { IconBtn } from '@/components/IconBtn';
 export { PillTabs, PillTabPane } from '@/components/PillTabs';

diff --git a/client/web/tailchat.d.ts b/client/web/tailchat.d.ts
@@ -110,6 +110,10 @@ declare module '@capital/common' {
 
   export const getCachedConverseInfo: any;
 
+  export const getCachedBaseGroupInfo: any;
+
+  export const getCachedUserSettings: any;
+
   /**
    * 本地翻译
    * @example
@@ -166,6 +170,8 @@ declare module '@capital/common' {
 
   export const joinArray: any;
 
+  export const navigate: any;
+
   export const useLocation: any;
 
   export const useNavigate: any;
@@ -302,6 +308,10 @@ declare module '@capital/common' {
 
   export const regUserExtraInfo: any;
 
+  export const pluginSettings: any;
+
+  export const regPluginSettings: any;
+
   export const useGroupIdContext: () => string;
 
   export const useGroupPanelContext: () => {
@@ -380,6 +390,10 @@ declare module '@capital/component' {
 
   export const metaFormFieldSchema: any;
 
+  export const Link: any;
+
+  export const MessageAckContainer: any;
+
   export const Image: any;
 
   export const IconBtn: React.FC<{

diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx
@@ -5,7 +5,13 @@ import {
   showSuccessToasts,
   useAsyncRequest,
 } from '@capital/common';
-import { IconBtn, Input, UserName, UserAvatar } from '@capital/component';
+import {
+  IconBtn,
+  Input,
+  UserName,
+  UserAvatar,
+  MessageAckContainer,
+} from '@capital/component';
 import styled from 'styled-components';
 import type { GroupTopic } from '../types';
 import { Translate } from '../translate';
@@ -32,7 +38,7 @@ const Root = styled.div`
     flex: 1;
     user-select: text;
 
-    .header {·
+    .header {
       display: flex;
       line-height: 32px;
 
@@ -85,49 +91,51 @@ export const TopicCard: React.FC<{
   }, [topic.groupId, topic.panelId, topic._id, comment]);
 
   return (
-    <Root>
-      <div className="left">
-        <UserAvatar userId={topic.author} />
-      </div>
-
-      <div className="right">
-        <div className="header">
-          <div className="name">
-            <UserName userId={topic.author} />
-          </div>
-          <div className="date">{showMessageTime(topic.createdAt)}</div>
+    <MessageAckContainer>
+      <Root>
+        <div className="left">
+          <UserAvatar userId={topic.author} />
         </div>
 
-        <div className="body">
-          <div className="content">{getMessageRender(topic.content)}</div>
+        <div className="right">
+          <div className="header">
+            <div className="name">
+              <UserName userId={topic.author} />
+            </div>
+            <div className="date">{showMessageTime(topic.createdAt)}</div>
+          </div>
 
-          {Array.isArray(topic.comments) && topic.comments.length > 0 && (
-            <TopicComments comments={topic.comments} />
-          )}
-        </div>
+          <div className="body">
+            <div className="content">{getMessageRender(topic.content)}</div>
 
-        <div className="footer">
-          <IconBtn
-            title={Translate.reply}
-            icon="mdi:message-reply-text-outline"
-            onClick={toggleShowReply}
-          />
-        </div>
+            {Array.isArray(topic.comments) && topic.comments.length > 0 && (
+              <TopicComments comments={topic.comments} />
+            )}
+          </div>
 
-        {showReply && (
-          <ReplyBox>
-            <Input
-              autoFocus
-              placeholder={Translate.replyThisTopic}
-              disabled={loading}
-              value={comment}
-              onChange={(e) => setComment(e.target.value)}
-              onPressEnter={handleComment}
+          <div className="footer">
+            <IconBtn
+              title={Translate.reply}
+              icon="mdi:message-reply-text-outline"
+              onClick={toggleShowReply}
             />
-          </ReplyBox>
-        )}
-      </div>
-    </Root>
+          </div>
+
+          {showReply && (
+            <ReplyBox>
+              <Input
+                autoFocus
+                placeholder={Translate.replyThisTopic}
+                disabled={loading}
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                onPressEnter={handleComment}
+              />
+            </ReplyBox>
+          )}
+        </div>
+      </Root>
+    </MessageAckContainer>
   );
 });
 TopicCard.displayName = 'TopicCard';
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/types/tailchat.d.ts b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/types/tailchat.d.ts
@@ -110,6 +110,10 @@ declare module '@capital/common' {
 
   export const getCachedConverseInfo: any;
 
+  export const getCachedBaseGroupInfo: any;
+
+  export const getCachedUserSettings: any;
+
   /**
    * 本地翻译
    * @example
@@ -123,14 +127,20 @@ declare module '@capital/common' {
 
   export const sharedEvent: any;
 
-  export const useAsync: any;
+  export const useAsync: <T extends (...args: any[]) => Promise<any>>(
+    fn: T,
+    deps?: React.DependencyList
+  ) => { loading: boolean; value?: any; error?: Error };
 
-  export const useAsyncFn: any;
+  export const useAsyncFn: <T extends (...args: any[]) => Promise<any>>(
+    fn: T,
+    deps?: React.DependencyList
+  ) => [{ loading: boolean; value?: any; error?: Error }, T];
 
   export const useAsyncRefresh: <T extends (...args: any[]) => Promise<any>>(
     fn: T,
     deps?: React.DependencyList
-  ) => [{ loading: boolean; value?: any; error?: Error }, T];
+  ) => { loading: boolean; value?: any; error?: Error; refresh: () => void };
 
   export const useAsyncRequest: <T extends (...args: any[]) => Promise<any>>(
     fn: T,
@@ -158,12 +168,22 @@ declare module '@capital/common' {
 
   export const showMessageTime: any;
 
+  export const joinArray: any;
+
+  export const navigate: any;
+
   export const useLocation: any;
 
   export const useNavigate: any;
 
+  /**
+   * @deprecated please use createMetaFormSchema from @capital/component
+   */
   export const createFastFormSchema: any;
 
+  /**
+   * @deprecated please use metaFormFieldSchema from @capital/component
+   */
   export const fieldSchema: any;
 
   export const useCurrentUserInfo: any;
@@ -183,13 +203,21 @@ declare module '@capital/common' {
 
   export const regGroupPanel: any;
 
-  export const messageInterpreter: any;
+  export const messageInterpreter: {
+    name?: string;
+    explainMessage: (message: string) => React.ReactNode;
+  }[];
 
-  export const regMessageInterpreter: any;
+  export const regMessageInterpreter: (interpreter: {
+    name?: string;
+    explainMessage: (message: string) => React.ReactNode;
+  }) => void;
 
-  export const getMessageRender: any;
+  export const getMessageRender: (message: string) => React.ReactNode;
 
-  export const regMessageRender: any;
+  export const regMessageRender: (
+    render: (message: string) => React.ReactNode
+  ) => void;
 
   export const getMessageTextDecorators: any;
 
@@ -224,7 +252,23 @@ declare module '@capital/common' {
 
   export const pluginPanelActions: any;
 
-  export const regPluginPanelAction: any;
+  export const regPluginPanelAction: (
+    action:
+      | {
+          name: string;
+          label: string;
+          icon: string;
+          position: 'group';
+          onClick: (ctx: { groupId: string; panelId: string }) => void;
+        }
+      | {
+          name: string;
+          label: string;
+          icon: string;
+          position: 'dm';
+          onClick: (ctx: { converseId: string }) => void;
+        }
+  ) => void;
 
   export const pluginPermission: any;
 
@@ -260,6 +304,14 @@ declare module '@capital/common' {
 
   export const regPluginGroupTextPanelExtraMenu: any;
 
+  export const pluginUserExtraInfo: any;
+
+  export const regUserExtraInfo: any;
+
+  export const pluginSettings: any;
+
+  export const regPluginSettings: any;
+
   export const useGroupIdContext: () => string;
 
   export const useGroupPanelContext: () => {
@@ -308,15 +360,41 @@ declare module '@capital/component' {
     }>
   >;
 
+  export const TextArea: any;
+
   export const Avatar: any;
 
   export const SensitiveText: React.FC<{ className?: string; text: string }>;
 
-  export const TextArea: any;
+  export const Icon: React.FC<{ icon: string } & React.SVGProps<SVGSVGElement>>;
 
-  export const Image: any;
+  export const CopyableText: React.FC<{
+    className?: string;
+    style?: React.CSSProperties;
+    config?:
+      | boolean
+      | {
+          text?: string;
+          onCopy?: (event?: React.MouseEvent<HTMLDivElement>) => void;
+          icon?: React.ReactNode;
+          tooltips?: boolean | React.ReactNode;
+          format?: 'text/plain' | 'text/html';
+        };
+  }>;
 
-  export const Icon: React.FC<{ icon: string } & React.SVGProps<SVGSVGElement>>;
+  export const WebFastForm: any;
+
+  export const WebMetaForm: any;
+
+  export const createMetaFormSchema: any;
+
+  export const metaFormFieldSchema: any;
+
+  export const Link: any;
+
+  export const MessageAckContainer: any;
+
+  export const Image: any;
 
   export const IconBtn: React.FC<{
     icon: string;
@@ -325,6 +403,9 @@ declare module '@capital/component' {
     size?: 'small' | 'middle' | 'large';
     shape?: 'circle' | 'square';
     title?: string;
+    danger?: boolean;
+    active?: boolean;
+    disabled?: boolean;
     onClick?: React.MouseEventHandler<HTMLElement>;
   }>;
 
@@ -334,14 +415,6 @@ declare module '@capital/component' {
 
   export const LoadingSpinner: React.FC<{ tip?: string }>;
 
-  export const WebFastForm: any;
-
-  export const WebMetaForm: any;
-
-  export const createMetaFormSchema: any;
-
-  export const metaFormFieldSchema: any;
-
   export const FullModalField: any;
 
   export const DefaultFullModalInputEditorRender: any;
@@ -408,12 +481,22 @@ declare module '@capital/component' {
 
   export const ErrorBoundary: any;
 
-  export const UserAvatar: any;
+  export const UserAvatar: React.FC<{
+    userId: string;
+    className?: string;
+    style?: React.CSSProperties;
+    size?: 'large' | 'small' | 'default' | number;
+  }>;
 
   export const UserName: React.FC<{
     userId: string;
     className?: string;
+    style?: React.CSSProperties;
   }>;
 
   export const Markdown: any;
+
+  export const Webview: any;
+
+  export const WebviewKeepAlive: any;
 }