fix(web): Fix sql format error (#1319)

This commit is contained in:
Hzh_97
2024-03-21 17:41:25 +08:00
committed by GitHub
parent 86a7b6c6f3
commit 04322de4f3
49 changed files with 69256 additions and 236 deletions

View File

@@ -1,9 +1,9 @@
import { Datum } from '@antv/ava';
import { Table, Tabs, TabsProps } from 'antd';
import React from 'react';
import { format } from 'sql-formatter';
import { AutoChart, BackEndChartType, getChartType } from '@/components/chart/autoChart';
import { CodePreview } from './code-preview';
import { formatSql } from '@/utils';
function ChartView({ data, type, sql }: { data: Datum[]; type: BackEndChartType; sql: string }) {
const columns = data?.[0]
@@ -20,10 +20,11 @@ function ChartView({ data, type, sql }: { data: Datum[]; type: BackEndChartType;
label: 'Chart',
children: <AutoChart data={data} chartType={getChartType(type)} />,
};
const SqlItem = {
key: 'sql',
label: 'SQL',
children: <CodePreview language="sql" code={format(sql ?? '', { language: 'mysql' }) as string} />,
children: <CodePreview language="sql" code={formatSql(sql)} />,
};
const DataItem = {
key: 'data',

View File

@@ -1,7 +1,6 @@
import { LinkOutlined, ReadOutlined, SyncOutlined } from '@ant-design/icons';
import ReactMarkdown from 'react-markdown';
import { Table, Image, Tag, Tabs, TabsProps, Popover } from 'antd';
import { format } from 'sql-formatter';
import { Reference } from '@/types/chat';
import { AutoChart, BackEndChartType, getChartType } from '@/components/chart';
import { CodePreview } from './code-preview';
@@ -15,6 +14,7 @@ import VisChart from './vis-chart';
import VisDashboard from './vis-dashboard';
import VisPlugin from './vis-plugin';
import VisCode from './vis-code';
import { formatSql } from '@/utils';
type MarkdownComponent = Parameters<typeof ReactMarkdown>['0']['components'];
@@ -228,7 +228,7 @@ const extraComponents: MarkdownComponent = {
const SqlItem = {
key: 'sql',
label: 'SQL',
children: <CodePreview code={format(data?.sql, { language: 'mysql' }) as string} language={'sql'} />,
children: <CodePreview code={formatSql(data?.sql, 'mysql')} language="sql" />,
};
const DataItem = {
key: 'data',

View File

@@ -1,5 +1,5 @@
import { format } from 'sql-formatter';
import { CodePreview } from './code-preview';
import { formatSql } from '@/utils';
interface Props {
data: {
@@ -15,7 +15,7 @@ function VisConvertError({ data }: Props) {
<div className="p-3 text-white bg-red-500 whitespace-normal">{data.display_type}</div>
<div className="p-3 bg-red-50">
<div className="mb-2 whitespace-normal">{data.thought}</div>
<CodePreview code={format(data.sql)} language="sql" />
<CodePreview code={formatSql(data.sql)} language="sql" />
</div>
</div>
);

View File

@@ -2,7 +2,7 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import Editor, { OnChange, loader } from '@monaco-editor/react';
import classNames from 'classnames';
import { useMemo } from 'react';
import { format } from 'sql-formatter';
import { formatSql } from '@/utils';
loader.config({ monaco });
@@ -21,9 +21,9 @@ export default function MonacoEditor({ className, value, language = 'mysql', onC
return value;
}
if (thoughts && thoughts.length > 0) {
return format(`-- ${thoughts} \n${value}`);
return formatSql(`-- ${thoughts} \n${value}`);
}
return format(value);
return formatSql(value);
}, [value, thoughts]);
return (