feat: web panel support add background color which useful for transpa…

…rent background website
msgbyte · Nov 10, 2023 · 5fe0ff0 · 5fe0ff0
1 parent 3b7973e
commit 5fe0ff0
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -64,7 +64,7 @@ export interface GroupPanel {
   /**
    * 面板的其他数据
    */
-  meta?: object;
+  meta?: Record<string, any>;
 
   /**
    * 身份组或者用户的权限