fix: table support dark theme

Author: Sky-FE

src/components/editor_panel/editor_panel.tsx

@@ -24,12 +24,14 @@ export const EditorPanel = (props) => {
   const onEditorDidMount: OnMount = (editor, monaco) => {
 		editorRef.current = editor;
     const bgColor = rgba2hex(color.bgCommonLower);
+    const errorColor = rgba2hex(color.bgDangerDefault);
     monaco.editor.defineTheme("customTheme", {
       base: monacoTheme,
       inherit: true,
       rules: [{ background: bgColor, token: "" }],
       colors: {
         "editor.background": bgColor,
+        "editorError.foreground": errorColor,
       },
     });
     monaco.editor.setTheme("customTheme");

src/render_components/components/table/styled.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { BaseTable, BaseTableProps } from 'ali-react-table';
+import { ThemeName, deepPurple, getThemeName } from '@apitable/components';
+import { applyDefaultTheme } from '../utils';
+
+const ThemeBaseTable: any = styled(BaseTable).attrs(applyDefaultTheme)`
+  &.scriptTable {
+    ${props => {
+      const { isDark } = props.colorConfig;
+      const { lowestBg, lineColor, firstLevelText, defaultBg } = props.theme.color;
+      const hoverBgColor = isDark ? '#393649' : deepPurple[50];
+      
+      return css`
+        --border-color: ${lineColor};
+        --header-bgcolor: ${lowestBg};
+        --header-color: ${firstLevelText};
+        --color: ${firstLevelText};
+        --bgcolor: ${defaultBg};
+        --header-hover-bgcolor: ${hoverBgColor};
+        --hover-bgcolor: ${hoverBgColor};
+      `;
+    }}
+    --font-size: 13px;
+    cursor: auto;
+  }
+  .art-table-header-cell {
+    font-weight: bold;
+  }
+`;
+
+export const CustomBaseTable = React.forwardRef<BaseTable, BaseTableProps>((props, ref) => {
+  return (
+    <ThemeBaseTable 
+      ref={ref} 
+      className={'scriptTable'} 
+      colorConfig={{ 
+        isDark: getThemeName() === ThemeName.Dark 
+      }}
+      {...props} 
+    />
+  );
+});

src/render_components/components/table/table.tsx

@@ -1,10 +1,10 @@
 import { isObject } from 'lodash';
 import React, { FC, useMemo } from 'react';
-import { BaseTable } from 'ali-react-table';
 import { StyleSheetManager } from 'styled-components';
 import { IContentWindow } from '../../render_base';
 import { Strings } from '../../../utils';
 import { t } from '@apitable/widget-sdk';
+import { CustomBaseTable } from './styled';
 
 interface ITableProps {
   data: (string | number | Object)[];
@@ -51,7 +51,7 @@ export const Table: FC<ITableProps> = (props) => {
     <StyleSheetManager 
       target={window.document.head}
     >
-      <BaseTable 
+      <CustomBaseTable 
         dataSource={data}
         columns={columns}
         hasHeader={isItemObject}