From 22f08c98e4dea774534bbd5bbe8125fa33f78ef4 Mon Sep 17 00:00:00 2001
From: SSDCc <35004442+SSDCc@users.noreply.github.com>
Date: Sun, 23 Jul 2023 00:15:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8F=92=E4=BB=B6=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E8=87=AA=E5=AE=9A=E4=B9=89=E8=83=BD=E5=8A=9B=20||=20A?=
 =?UTF-8?q?dd=20plug-in=20card=20customization=20ability=20(#114)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 增加视频上传和播放

* fix: 修复播放

* fix: 修改视频播放为插件

* feat: 增加插件卡片自定义能力

* feat: 增加插件卡片自定义能力

* fix: 卡片更加抽象一些

* Update reg.ts

* Update index.tsx

* Update index.tsx

---------

Co-authored-by: lihl <lihl@kamfu.com.cn>
Co-authored-by: moonrailgun <moonrailgun@gmail.com>
---
 client/web/src/components/Card/FileCard.tsx |  5 ++---
 client/web/src/components/Card/index.tsx    | 18 ++++++++++++++----
 client/web/src/plugin/common/reg.ts         | 13 ++++++++++++-
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/client/web/src/components/Card/FileCard.tsx b/client/web/src/components/Card/FileCard.tsx
index 6b827def..be80cb7f 100644
--- a/client/web/src/components/Card/FileCard.tsx
+++ b/client/web/src/components/Card/FileCard.tsx
@@ -4,12 +4,11 @@ import { Icon } from 'tailchat-design';
 import { useMemoizedFn, t } from 'tailchat-shared';
 import { IconBtn } from '../IconBtn';
 import { CardWrapper } from './Wrapper';
-
-export interface FileCardPayload {
+import type { BaseCardPayload } from '@/components/Card/index';
+interface FileCardPayload extends BaseCardPayload {
   label: string;
   url: string;
 }
-
 export const FileCard: React.FC<{
   payload: FileCardPayload;
 }> = React.memo((props) => {
diff --git a/client/web/src/components/Card/index.tsx b/client/web/src/components/Card/index.tsx
index cebabf49..5501ace4 100644
--- a/client/web/src/components/Card/index.tsx
+++ b/client/web/src/components/Card/index.tsx
@@ -1,15 +1,25 @@
 import React from 'react';
 import { t } from 'tailchat-shared';
-import { FileCard, FileCardPayload } from './FileCard';
+import { FileCard } from './FileCard';
 import { CardWrapper } from './Wrapper';
+import { pluginCardItemMap } from '@/plugin/common';
 
 interface Props {
-  type: 'file';
-  payload: FileCardPayload;
+  type: string;
+  payload: BaseCardPayload;
+}
+export interface BaseCardPayload {
+  [key: string]: any;
 }
 export const Card: React.FC<Props> = React.memo((props) => {
+  if (pluginCardItemMap[props.type]) {
+    const info = pluginCardItemMap[props.type];
+    const Component = info.render;
+    return <Component payload={props.payload} />;
+  }
+
   if (props.type === 'file') {
-    return <FileCard payload={props.payload} />;
+    return <FileCard payload={props.payload as any} />;
   }
 
   return <CardWrapper>{t('未知的卡片类型')}</CardWrapper>;
diff --git a/client/web/src/plugin/common/reg.ts b/client/web/src/plugin/common/reg.ts
index 052104cf..53339996 100644
--- a/client/web/src/plugin/common/reg.ts
+++ b/client/web/src/plugin/common/reg.ts
@@ -14,7 +14,8 @@ import {
 import type { MetaFormFieldMeta } from 'tailchat-design';
 import type { FullModalFactoryConfig } from '@/components/FullModal/Factory';
 import type { ReactElement } from 'react';
-
+import type { BaseCardPayload } from '@/components/Card';
+export type { BaseCardPayload };
 /**
  * 注册自定义面板
  */
@@ -304,6 +305,16 @@ interface PluginInboxItem {
 export const [pluginInboxItemMap, regPluginInboxItemMap] =
   buildRegMap<PluginInboxItem>();
 
+interface PluginCardItem {
+  render: React.ComponentType<{ payload: BaseCardPayload }>;
+}
+
+/**
+ * 注册卡片类型
+ */
+export const [pluginCardItemMap, regPluginCardItem] =
+  buildRegMap<PluginCardItem>();
+
 export const [pluginGroupConfigItems, regPluginGroupConfigItem] = buildRegList<{
   name: string;
   title: string;