fix: use accessorFn to avoid table dot notation case

src/components/MonacoEditor/index.tsx

@@ -3,8 +3,9 @@ import Typography from '@mui/material/Typography';
 import { css } from '@emotion/css';
 import * as monaco from './monaco';
 import Editor, { loader, useMonaco } from '@monaco-editor/react';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import TypeScriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import JSONWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 
 type Monaco = typeof monaco;
 
@@ -16,9 +17,11 @@ if (!loader.__getMonacoInstance()) {
   self.MonacoEnvironment = {
     getWorker(_, label) {
       if (label === 'typescript' || label === 'javascript') {
-        return new tsWorker();
+        return new TypeScriptWorker();
+      } else if (label === 'json') {
+        return new JSONWorker();
       }
-      return new editorWorker();
+      return new EditorWorker();
     },
   };
 }

src/components/OutputBox/RawResult/index.tsx

@@ -24,7 +24,7 @@ export default function RawResult({ result }: { result: ConsoleResult }) {
 
   return (
     <Box m={0} p={1} height="100%" overflow="auto">
-      <MonacoEditor value={dstStr} readOnly language="javascript" themeMode={themeMode} />
+      <MonacoEditor value={dstStr} readOnly language="json" themeMode={themeMode} />
     </Box>
   );
 }

src/components/OutputBox/TableResult/index.tsx

@@ -1,30 +1,44 @@
+import { observer } from 'mobx-react-lite';
 import Box from '@mui/material/Box';
 import { Table } from '@vesoft-inc/ui-components';
+import { MRT_Localization_ZH_HANS } from 'material-react-table/locales/zh-Hans';
 import type { ConsoleResult } from '@/interfaces/console';
+import { useStore } from '@/stores';
 import { JSONBig, transformNebulaResult } from '@/utils';
 
-export default function TableResult({ result }: { result: ConsoleResult }) {
+export default observer(function TableResult({ result }: { result: ConsoleResult }) {
+  const { commonStore } = useStore();
   const { headers = [], tables = [] } = result.data || {};
-  const columns = headers.map((header) => ({ accessorKey: header, header }));
+  const columns = headers.map((header) => ({
+    accessorFn: (row: Record<string, string>) => row[header],
+    header,
+  }));
   const data = tables.map((item) => {
     const obj = headers.reduce(
       (acc, key) => {
         acc[key] = JSONBig.stringify(transformNebulaResult(item[key]));
         return acc;
       },
-      {} as Record<string, unknown>
+      {} as Record<string, string>
     );
     return obj;
   });
+  const localization = commonStore.isEnLang ? undefined : MRT_Localization_ZH_HANS;
   return (
     <Box m={0} p={1} height="100%" overflow="hidden">
       <Table
         columns={columns}
         data={data}
-        renderBottomToolbar={false}
         enableStickyHeader
-        muiTableContainerProps={{ sx: { maxHeight: '280px' } }}
+        enableSorting
+        muiPaginationProps={{
+          showRowsPerPage: false,
+          size: 'small',
+        }}
+        paginationDisplayMode="pages"
+        muiTableContainerProps={{ sx: { maxHeight: '286px' } }}
+        localization={localization}
       />
     </Box>
   );
-}
+});

src/components/OutputBox/styles.tsx

@@ -55,7 +55,7 @@ export const StyledIconButton = styled(IconButton)`
 `;
 
 export const OutputContent = styled(Box)`
-  height: 300px;
+  height: 360px;
   border-top: ${getVesoftBorder};
   border-bottom: ${getVesoftBorder};
   display: flex;

src/stores/common.ts

@@ -1,4 +1,4 @@
-import { makeAutoObservable, observable } from 'mobx';
+import { computed, makeAutoObservable, observable } from 'mobx';
 import { Base64 } from 'js-base64';
 import i18n, { Language } from '@/utils/i18n';
 import { connect, disconnect } from '@/services';
@@ -24,7 +24,7 @@ export class CommonStore {
       rootStore: observable.ref,
 
       // computed
-      // ...
+      isEnLang: computed,
 
       // actions, beging with 'set', 'add', 'delete', etc.
       changeLanguage: false,
@@ -35,6 +35,10 @@ export class CommonStore {
     i18n.on('languageChanged', this.setLanguage);
   }
 
+  get isEnLang() {
+    return this.language === Language.EN_US;
+  }
+
   setLoading = (loading: boolean) => {
     this.loading = loading;
   };