fix: allow pass system props to WorkspaceView

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}
       {/* 添加组件弹层 */}