Skip to content

C
chat-query
Commit 41a93931 authored by jaden's avatar jaden
Browse files
Options

improve: improve ui

parent 553a7038
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 79 deletions
client/api/connectDb.ts
View file @ 41a93931
...@@ -11,9 +11,24 @@ export type DBInfo = { ...@@ -11,9 +11,24 @@ export type DBInfo = {
password: string; password: string;
database: string; database: string;
client: 'mysql2'; client: 'mysql2';
name?: string name?: string;
}; };
export interface Query {
schemaId: string;
DbID: string;
name: string;
content: {
executions: {
content: string;
type: string;
};
params: Record<string, any>;
info: { queryDescription: string; queryName: string };
functions?: string;
};
}
export default class ConnectDb { export default class ConnectDb {
static create(config: DBInfo) { static create(config: DBInfo) {
return backendApi.post('query/testConnectDb', config); return backendApi.post('query/testConnectDb', config);
...@@ -21,41 +36,30 @@ export default class ConnectDb { ...@@ -21,41 +36,30 @@ export default class ConnectDb {
static getDbDBML(config: DBInfo) { static getDbDBML(config: DBInfo) {
return backendApi.post('query/getDbDBML', config); return backendApi.post('query/getDbDBML', config);
} }
static addDbForSchema(params: { static addDbForSchema(params: { config: DBInfo; schemaId: string; name: string }) {
'config': DBInfo, return backendApi.post('query/createDbConnect', params);
'schemaId':string,
'name':string
}) {
return backendApi.post('query/createDbConnect',params);
} }
static getAllForSchema(schemaId:string) { static getAllForSchema(schemaId: string) {
return backendApi.get(`query/${schemaId}/DbConnect`); return backendApi.get(`query/${schemaId}/DbConnect`);
} }
static removeDbForSchema(DbID:string) { static removeDbForSchema(DbID: string) {
return backendApi.delete(`query/DbConnect/${DbID}`); return backendApi.delete(`query/DbConnect/${DbID}`);
} }
static addQuery(query: { static addQuery(query: Query) {
schemaId:string, return backendApi.post('query/add', query);
DbID:string, }
name:string, static deleteQuery(queryId: string) {
content: { return backendApi.delete(`/query/${queryId}`);
executions:{
content: string;
type: string
},
params:Record<string,any>
info: { queryDescription:string,queryName:string}
}
}) {
return backendApi.post("query/add",query)
}
static deleteQuery(queryId:string) {
return backendApi.delete(`/query/${queryId}`)
} }
static getQueries(schemaId: string) { static getQueries(schemaId: string) {
return backendApi.get(`query/${schemaId}/queries`) return backendApi.get(`query/${schemaId}/queries`);
}
static runQuery(queryId: string, params: Record<string, any>) {
return backendApi.post(`query/run/${queryId}`, { params });
} }
static runQuery(queryId: string,params:Record<string, any>) { static updateQuery(queryId: string, functions: string) {
return backendApi.post(`query/run/${queryId}`,{params}) return backendApi.put(`/query/${queryId}`, {
functions,
});
} }
} }
pages/actions/View/chatView.tsx
View file @ 41a93931
import { Alert, Button, Card, Collapse, Input, Spin } from '@arco-design/web-react'; import { Alert, Button, Card, Collapse, Input, Select, Spin } from '@arco-design/web-react';
import { import {
IconCode, IconCode,
IconEye, IconEye,
...@@ -38,6 +38,8 @@ import { XML } from '@/utils/getXMLContent'; ...@@ -38,6 +38,8 @@ import { XML } from '@/utils/getXMLContent';
import { useWorker } from '@koale/useworker'; import { useWorker } from '@koale/useworker';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
const ReactJson = dynamic(() => import('react-json-view'), { ssr: false }); const ReactJson = dynamic(() => import('react-json-view'), { ssr: false });
import { Parser } from 'acorn';
import ConnectDb, { Query } from '@/client/api/connectDb';
const CollapseItem = Collapse.Item; const CollapseItem = Collapse.Item;
...@@ -93,9 +95,13 @@ function ReactView() { ...@@ -93,9 +95,13 @@ function ReactView() {
export function ChatView({ export function ChatView({
defaultNode, defaultNode,
props: propsRaw, props: propsRaw,
id,
functions,
}: { }: {
defaultNode?: ReactElement; defaultNode?: ReactElement;
props: Record<string, any>; props: Record<string, any>;
id: string;
functions: Query['content']['functions'];
}) { }) {
const [showCode, setShowCode] = useState(true); const [showCode, setShowCode] = useState(true);
const reqRef = useRef(nanoid()); const reqRef = useRef(nanoid());
...@@ -177,7 +183,6 @@ export function ChatView({ ...@@ -177,7 +183,6 @@ export function ChatView({
autoTerminate: false, autoTerminate: false,
} }
); );
console.log(workerStatus, 'workerStatus');
const onKeyDown = editor?.onKeyDown!; const onKeyDown = editor?.onKeyDown!;
const KeyDownEvent = useRef<ReturnType<typeof onKeyDown>>(); const KeyDownEvent = useRef<ReturnType<typeof onKeyDown>>();
...@@ -239,40 +244,115 @@ export function ChatView({ ...@@ -239,40 +244,115 @@ export function ChatView({
}, [editor, props]); }, [editor, props]);
const [functionName, setFunctionName] = useState(''); const [functionName, setFunctionName] = useState('');
const [FunctionOption, setFunctionOption] = useState<ReturnType<typeof Parser.parse>[]>([]);
return ( return (
<div> <div>
{props.length ? ( {props.length ? (
<> <>
<div className="flex justify-between items-center mb-[20px]">
<AI
simpleMode="input"
startView={3}
inputProps={{
style: { width: 400 },
height: 36,
className: 'overflow-hidden simple-mode-border',
prefix: (
<span className="text-[var(--pc)]">
{t('component display')}
</span>
),
autoFocus: false,
}}
SendButton={SendButton}
messageList={[]}
setMessageList={function (value: any[]) {
return false;
}}
/>
{data && (
<Button shape="circle" onClick={() => setShowTable(!showTable)}>
<IconSwap />
</Button>
)}
</div>
<div className="w-full mb-[20px]"> <div className="w-full mb-[20px]">
<Collapse style={{ maxWidth: 1180 }}> <Collapse style={{ maxWidth: 1180 }}>
<CollapseItem <CollapseItem
header="数据处理" header={
<div>
数据处理
<span className="text-[var(--pc)] mx-[10px] text-[12px]">
(注释 + Tab 生成函数)
</span>
</div>
}
name="1" name="1"
extra={ extra={
<div className="flex"> <div className="flex">
<Select
placeholder="执行函数名称"
size="mini"
allowClear
style={{
width: '200px',
}}
showSearch={{
retainInputValue: true,
}}
onFocus={() => {
if (editor) {
const root: any = Parser.parse(
editor.getValue(),
{
ecmaVersion: 6,
}
);
console.log(root, 'content');
const body: ReturnType<typeof Parser.parse>[] =
get(root, 'body');
setFunctionOption(
body.filter(
v => v.type === 'FunctionDeclaration'
)
);
}
}}
onChange={setFunctionName}
>
{FunctionOption.map(item => {
const name = get(item, 'id.name', '');
return (
<Select.Option key={name} value={name}>
{name}
</Select.Option>
);
})}
</Select>
<Button <Button
className="mr-[10px]" className="ml-[10px]"
onClick={async () => { onClick={async () => {
if (!functionName) return; if (!functionName) {
setProps(propsRaw);
return;
}
const data = await workerFn( const data = await workerFn(
propsRaw, propsRaw,
`${editor?.getValue()};\n return ${functionName}(data);` `${editor?.getValue()};\n return ${functionName}(data);`
); );
console.log(data); ConnectDb.updateQuery(
id,
`${editor?.getValue()}\n`
);
setProps(data); setProps(data);
}} }}
type="primary" type="primary"
size="mini" size="mini"
shape="round"
> >
Run 运行
</Button> </Button>
<Input
size="mini"
placeholder="执行函数名称"
onChange={value => {
setFunctionName(value);
}}
/>
</div> </div>
} }
> >
...@@ -283,38 +363,11 @@ export function ChatView({ ...@@ -283,38 +363,11 @@ export function ChatView({
}} }}
height="300px" height="300px"
defaultLanguage="javascript" defaultLanguage="javascript"
defaultValue={init} defaultValue={functions || init}
/> />
</CollapseItem> </CollapseItem>
</Collapse> </Collapse>
</div> </div>
<div className="flex justify-between items-center mb-[20px]">
<AI
simpleMode="input"
startView={3}
inputProps={{
style: { width: 400 },
height: 36,
className: 'overflow-hidden simple-mode-border',
prefix: (
<span className="text-[var(--pc)]">
{t('component display')}
</span>
),
autoFocus: false,
}}
SendButton={SendButton}
messageList={[]}
setMessageList={function (value: any[]) {
return false;
}}
/>
{data && (
<Button shape="circle" onClick={() => setShowTable(!showTable)}>
<IconSwap />
</Button>
)}
</div>
</> </>
) : ( ) : (
<Alert style={{ marginBottom: 20 }} type="success" content="执行成功" /> <Alert style={{ marginBottom: 20 }} type="success" content="执行成功" />
......
pages/actions/queriesList.tsx
View file @ 41a93931
...@@ -38,7 +38,7 @@ const { ...@@ -38,7 +38,7 @@ const {
const FormItem = Form.Item; const FormItem = Form.Item;
export const DataTable = ({ data: preViewDataArr, loading }: any) => { export const DataTable = ({ data: preViewDataArr, loading, id, content, functions }: any) => {
const { t } = useTranslation('queriesList'); const { t } = useTranslation('queriesList');
return ( return (
<div> <div>
...@@ -52,7 +52,10 @@ export const DataTable = ({ data: preViewDataArr, loading }: any) => { ...@@ -52,7 +52,10 @@ export const DataTable = ({ data: preViewDataArr, loading }: any) => {
<div> <div>
<div> <div>
<ChatView <ChatView
content={content}
id={id}
props={data[0]} props={data[0]}
functions={functions}
defaultNode={ defaultNode={
<Table <Table
loading={loading} loading={loading}
...@@ -101,6 +104,7 @@ function Item({ ...@@ -101,6 +104,7 @@ function Item({
id, id,
getListFx, getListFx,
queryDescription, queryDescription,
functions,
}: { }: {
name: string; name: string;
i: number; i: number;
...@@ -115,6 +119,7 @@ function Item({ ...@@ -115,6 +119,7 @@ function Item({
id: string; id: string;
getListFx: () => any; getListFx: () => any;
queryDescription: string; queryDescription: string;
functions: string;
}) { }) {
const [active, setActive] = useState(false); const [active, setActive] = useState(false);
const [formInstance] = Form.useForm(); const [formInstance] = Form.useForm();
...@@ -283,7 +288,13 @@ function Item({ ...@@ -283,7 +288,13 @@ function Item({
style={{ marginBottom: 20 }} style={{ marginBottom: 20 }}
labelStyle={{ paddingRight: 36 }} labelStyle={{ paddingRight: 36 }}
/> />
<DataTable data={previewData} loading={isRun} /> <DataTable
data={previewData}
loading={isRun}
id={id}
content={content}
functions={functions}
/>
</div> </div>
) : null} ) : null}
</Card> </Card>
...@@ -345,6 +356,7 @@ function QueriesRender({ modelId, refresh }: { modelId: string; refresh?: boolea ...@@ -345,6 +356,7 @@ function QueriesRender({ modelId, refresh }: { modelId: string; refresh?: boolea
i={index} i={index}
updatedAt={updatedAt} updatedAt={updatedAt}
content={get(content, 'executions', [])} content={get(content, 'executions', [])}
functions={get(content, 'functions', '')}
params={get(content, 'params', {})} params={get(content, 'params', {})}
queryDescription={get(content, 'info.queryDescription')} queryDescription={get(content, 'info.queryDescription')}
id={id} id={id}
......
pnpm-lock.yaml
View file @ 41a93931
...@@ -35,6 +35,9 @@ dependencies: ...@@ -35,6 +35,9 @@ dependencies:
'@types/react-dom': '@types/react-dom':
specifier: 18.0.10 specifier: 18.0.10
version: 18.0.10 version: 18.0.10
acorn:
specifier: ^8.10.0
version: 8.10.0
autoprefixer: autoprefixer:
specifier: ^10.4.13 specifier: ^10.4.13
version: 10.4.13(postcss@8.4.14) version: 10.4.13(postcss@8.4.14)
...@@ -131,6 +134,9 @@ dependencies: ...@@ -131,6 +134,9 @@ dependencies:
styled-components: styled-components:
specifier: 6.0.0-rc.3 specifier: 6.0.0-rc.3
version: 6.0.0-rc.3(react-dom@18.2.0)(react@18.2.0) version: 6.0.0-rc.3(react-dom@18.2.0)(react@18.2.0)
sucrase:
specifier: ^3.32.0
version: 3.32.0
swr: swr:
specifier: ^2.0.3 specifier: ^2.0.3
version: 2.0.3(react@18.2.0) version: 2.0.3(react@18.2.0)
...@@ -2503,12 +2509,12 @@ packages: ...@@ -2503,12 +2509,12 @@ packages:
eslint-visitor-keys: 3.3.0 eslint-visitor-keys: 3.3.0
dev: false dev: false
/acorn-jsx@5.3.2(acorn@8.8.2): /acorn-jsx@5.3.2(acorn@8.10.0):
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
peerDependencies: peerDependencies:
acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies: dependencies:
acorn: 8.8.2 acorn: 8.10.0
dev: false dev: false
/acorn-node@1.8.2: /acorn-node@1.8.2:
...@@ -2530,8 +2536,8 @@ packages: ...@@ -2530,8 +2536,8 @@ packages:
hasBin: true hasBin: true
dev: false dev: false
/acorn@8.8.2: /acorn@8.10.0:
resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==} resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
engines: {node: '>=0.4.0'} engines: {node: '>=0.4.0'}
hasBin: true hasBin: true
dev: false dev: false
...@@ -3594,8 +3600,8 @@ packages: ...@@ -3594,8 +3600,8 @@ packages:
resolution: {integrity: sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==} resolution: {integrity: sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies: dependencies:
acorn: 8.8.2 acorn: 8.10.0
acorn-jsx: 5.3.2(acorn@8.8.2) acorn-jsx: 5.3.2(acorn@8.10.0)
eslint-visitor-keys: 3.3.0 eslint-visitor-keys: 3.3.0
dev: false dev: false
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment