增加插件卡片自定义能力 || Add plug-in card customization ability (#114)

* 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

@@ -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) => {

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

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;