From 5fe0ff06d7c9248f3769a9c3294f7485764e5b44 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 11 Nov 2023 01:53:11 +0800
Subject: [PATCH] feat: web panel support add background color which useful for
 transparent background website

---
 .../design/components/WebMetaForm/types/Checkbox.tsx       | 2 +-
 .../com.msgbyte.webview/src/group/GroupWebPanelRender.tsx  | 7 ++++++-
 client/web/plugins/com.msgbyte.webview/src/index.tsx       | 5 +++++
 client/web/plugins/com.msgbyte.webview/src/translate.ts    | 4 ++++
 .../src/components/modals/GroupPanel/ModifyGroupPanel.tsx  | 2 +-
 packages/types/src/model/group.ts                          | 2 +-
 6 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/client/packages/design/components/WebMetaForm/types/Checkbox.tsx b/client/packages/design/components/WebMetaForm/types/Checkbox.tsx
index 1fe4470a83d..ba7501f39a8 100644
--- a/client/packages/design/components/WebMetaForm/types/Checkbox.tsx
+++ b/client/packages/design/components/WebMetaForm/types/Checkbox.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Form, Checkbox } from 'antd';
 import type { FastifyFormFieldComponent } from 'react-fastify-form';
 import { getValidateStatus } from '../utils';
diff --git a/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx b/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx
index 2aff8fb36db..71c7d9b7b56 100644
--- a/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx
+++ b/client/web/plugins/com.msgbyte.webview/src/group/GroupWebPanelRender.tsx
@@ -20,10 +20,15 @@ const GroupWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
     // 不包含协议, 但是是个网址
     url = 'https://' + url;
   }
+  const background = panelInfo?.meta?.background ?? false;
 
   return (
     <GroupPanelContainer groupId={groupId} panelId={panelId}>
-      <WebviewKeepAlive key={String(url)} className="w-full h-full" url={url} />
+      <WebviewKeepAlive
+        key={String(url)}
+        className={`w-full h-full ${background ? 'bg-white' : ''}`}
+        url={url}
+      />
     </GroupPanelContainer>
   );
 };
diff --git a/client/web/plugins/com.msgbyte.webview/src/index.tsx b/client/web/plugins/com.msgbyte.webview/src/index.tsx
index 19e462222c3..b84dc89f515 100644
--- a/client/web/plugins/com.msgbyte.webview/src/index.tsx
+++ b/client/web/plugins/com.msgbyte.webview/src/index.tsx
@@ -13,6 +13,11 @@ regGroupPanel({
       name: 'url',
       label: Translate.website,
     },
+    {
+      type: 'checkbox',
+      name: 'background',
+      label: Translate.addBackground,
+    },
   ],
   render: Loadable(() => import('./group/GroupWebPanelRender')),
   menus: [
diff --git a/client/web/plugins/com.msgbyte.webview/src/translate.ts b/client/web/plugins/com.msgbyte.webview/src/translate.ts
index 77c3a231a88..019f0178464 100644
--- a/client/web/plugins/com.msgbyte.webview/src/translate.ts
+++ b/client/web/plugins/com.msgbyte.webview/src/translate.ts
@@ -14,6 +14,10 @@ export const Translate = {
     'zh-CN': '网址',
     'en-US': 'Website',
   }),
+  addBackground: localTrans({
+    'zh-CN': '添加背景色',
+    'en-US': 'Add Background Color',
+  }),
   htmlcode: localTrans({
     'zh-CN': 'HTML代码',
     'en-US': 'HTML Code',
diff --git a/client/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx b/client/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx
index 141a18507e5..9e55b938cdf 100644
--- a/client/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx
+++ b/client/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx
@@ -56,7 +56,7 @@ export const ModalModifyGroupPanel: React.FC<{
   }
 
   return (
-    <ModalWrapper title={t('编辑群组面板')} style={{ maxWidth: 600 }}>
+    <ModalWrapper title={t('编辑群组面板')} style={{ width: 600 }}>
       <WebMetaForm
         schema={schema}
         fields={fields.filter((f) => f.type !== 'type')} // 变更时不显示类型
diff --git a/packages/types/src/model/group.ts b/packages/types/src/model/group.ts
index bde3b690a06..1d7f60d6518 100644
--- a/packages/types/src/model/group.ts
+++ b/packages/types/src/model/group.ts
@@ -64,7 +64,7 @@ export interface GroupPanel {
   /**
    * 面板的其他数据
    */
-  meta?: object;
+  meta?: Record<string, any>;
 
   /**
    * 身份组或者用户的权限