From a1492dde15bfff3c13a3c6bfee052cf292636624 Mon Sep 17 00:00:00 2001
From: wwsun <ww.sun@outlook.com>
Date: Fri, 12 Jul 2024 16:54:06 +0800
Subject: [PATCH] fix: allow pass system props to WorkspaceView

---
 packages/designer/src/workspace-view.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/designer/src/workspace-view.tsx b/packages/designer/src/workspace-view.tsx
index 0218d0f..2f4ec40 100644
--- a/packages/designer/src/workspace-view.tsx
+++ b/packages/designer/src/workspace-view.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
-import { Box } from 'coral-system';
+import cx from 'classnames';
+import { Box, HTMLCoralProps } from 'coral-system';
 import { observer, useDesigner } from '@music163/tango-context';
 import { DesignerViewType } from '@music163/tango-core';
 import { ComponentsPopover } from './components';
 
-export interface WorkspaceViewProps {
+export interface WorkspaceViewProps extends HTMLCoralProps<'div'> {
   /**
    * 视图面板模式，对应 Workspace 的模式
    */
   mode?: DesignerViewType;
-  children: React.ReactNode;
 }
 
 export const WorkspaceView = observer((props: WorkspaceViewProps) => {
-  const { mode = 'design', children } = props;
+  const { mode = 'design', children, className, ...rest } = props;
   const designer = useDesigner();
   const display = mode !== designer.activeView ? 'none' : 'block';
   // 云音乐移动端模式小屏幕适配，可能会溢出屏幕
@@ -21,11 +21,12 @@ export const WorkspaceView = observer((props: WorkspaceViewProps) => {
     designer.simulator.name === 'phone' ? 'auto' : designer.isPreview ? 'auto' : 'hidden';
   return (
     <Box
-      className={`ViewPanel ${mode}`}
+      className={cx('ViewPanel', mode, className)}
       display={designer.activeView === 'dual' ? 'block' : display}
-      flex="1"
       overflow={overflow}
+      flex="1"
       position="relative"
+      {...rest}
     >
       {children}
       {/* 添加组件弹层 */}