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 = {
password: string;
database: string;
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 {
static create(config: DBInfo) {
return backendApi.post('query/testConnectDb', config);
......@@ -21,41 +36,30 @@ export default class ConnectDb {
static getDbDBML(config: DBInfo) {
return backendApi.post('query/getDbDBML', config);
}
static addDbForSchema(params: {
'config': DBInfo,
'schemaId':string,
'name':string
}) {
return backendApi.post('query/createDbConnect',params);
static addDbForSchema(params: { config: DBInfo; schemaId: string; name: string }) {
return backendApi.post('query/createDbConnect', params);
}
static getAllForSchema(schemaId:string) {
static getAllForSchema(schemaId: string) {
return backendApi.get(`query/${schemaId}/DbConnect`);
}
static removeDbForSchema(DbID:string) {
static removeDbForSchema(DbID: string) {
return backendApi.delete(`query/DbConnect/${DbID}`);
}
static addQuery(query: {
schemaId:string,
DbID:string,
name:string,
content: {
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 addQuery(query: Query) {
return backendApi.post('query/add', query);
}
static deleteQuery(queryId: string) {
return backendApi.delete(`/query/${queryId}`);
}
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>) {
return backendApi.post(`query/run/${queryId}`,{params})
static updateQuery(queryId: string, functions: string) {
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 {
IconCode,
IconEye,
......@@ -38,6 +38,8 @@ import { XML } from '@/utils/getXMLContent';
import { useWorker } from '@koale/useworker';
import dynamic from 'next/dynamic';
const ReactJson = dynamic(() => import('react-json-view'), { ssr: false });
import { Parser } from 'acorn';
import ConnectDb, { Query } from '@/client/api/connectDb';
const CollapseItem = Collapse.Item;
......@@ -93,9 +95,13 @@ function ReactView() {
export function ChatView({
defaultNode,
props: propsRaw,
id,
functions,
}: {
defaultNode?: ReactElement;
props: Record<string, any>;
id: string;
functions: Query['content']['functions'];
}) {
const [showCode, setShowCode] = useState(true);
const reqRef = useRef(nanoid());
......@@ -177,7 +183,6 @@ export function ChatView({
autoTerminate: false,
}
);
console.log(workerStatus, 'workerStatus');
const onKeyDown = editor?.onKeyDown!;
const KeyDownEvent = useRef<ReturnType<typeof onKeyDown>>();
......@@ -239,40 +244,115 @@ export function ChatView({
}, [editor, props]);
const [functionName, setFunctionName] = useState('');
const [FunctionOption, setFunctionOption] = useState<ReturnType<typeof Parser.parse>[]>([]);
return (
<div>
{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]">
<Collapse style={{ maxWidth: 1180 }}>
<CollapseItem
header="数据处理"
header={
<div>
数据处理
<span className="text-[var(--pc)] mx-[10px] text-[12px]">
(注释 + Tab 生成函数)
</span>
</div>
}
name="1"
extra={
<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
className="mr-[10px]"
className="ml-[10px]"
onClick={async () => {
if (!functionName) return;
if (!functionName) {
setProps(propsRaw);
return;
}
const data = await workerFn(
propsRaw,
`${editor?.getValue()};\n return ${functionName}(data);`
);
console.log(data);
ConnectDb.updateQuery(
id,
`${editor?.getValue()}\n`
);
setProps(data);
}}
type="primary"
size="mini"
shape="round"
>
Run
运行
</Button>
<Input
size="mini"
placeholder="执行函数名称"
onChange={value => {
setFunctionName(value);
}}
/>
</div>
}
>
......@@ -283,38 +363,11 @@ export function ChatView({
}}
height="300px"
defaultLanguage="javascript"
defaultValue={init}
defaultValue={functions || init}
/>
</CollapseItem>
</Collapse>
</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="执行成功" />
......
pages/actions/queriesList.tsx
View file @ 41a93931
......@@ -38,7 +38,7 @@ const {
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');
return (
<div>
......@@ -52,7 +52,10 @@ export const DataTable = ({ data: preViewDataArr, loading }: any) => {
<div>
<div>
<ChatView
content={content}
id={id}
props={data[0]}
functions={functions}
defaultNode={
<Table
loading={loading}
......@@ -101,6 +104,7 @@ function Item({
id,
getListFx,
queryDescription,
functions,
}: {
name: string;
i: number;
......@@ -115,6 +119,7 @@ function Item({
id: string;
getListFx: () => any;
queryDescription: string;
functions: string;
}) {
const [active, setActive] = useState(false);
const [formInstance] = Form.useForm();
......@@ -283,7 +288,13 @@ function Item({
style={{ marginBottom: 20 }}
labelStyle={{ paddingRight: 36 }}
/>
<DataTable data={previewData} loading={isRun} />
<DataTable
data={previewData}
loading={isRun}
id={id}
content={content}
functions={functions}
/>
</div>
) : null}
</Card>
......@@ -345,6 +356,7 @@ function QueriesRender({ modelId, refresh }: { modelId: string; refresh?: boolea
i={index}
updatedAt={updatedAt}
content={get(content, 'executions', [])}
functions={get(content, 'functions', '')}
params={get(content, 'params', {})}
queryDescription={get(content, 'info.queryDescription')}
id={id}
......
pnpm-lock.yaml
View file @ 41a93931
......@@ -35,6 +35,9 @@ dependencies:
'@types/react-dom':
specifier: 18.0.10
version: 18.0.10
acorn:
specifier: ^8.10.0
version: 8.10.0
autoprefixer:
specifier: ^10.4.13
version: 10.4.13(postcss@8.4.14)
......@@ -131,6 +134,9 @@ dependencies:
styled-components:
specifier: 6.0.0-rc.3
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:
specifier: ^2.0.3
version: 2.0.3(react@18.2.0)
......@@ -2503,12 +2509,12 @@ packages:
eslint-visitor-keys: 3.3.0
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==}
peerDependencies:
acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies:
acorn: 8.8.2
acorn: 8.10.0
dev: false
/acorn-node@1.8.2:
......@@ -2530,8 +2536,8 @@ packages:
hasBin: true
dev: false
/acorn@8.8.2:
resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
/acorn@8.10.0:
resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
engines: {node: '>=0.4.0'}
hasBin: true
dev: false
......@@ -3594,8 +3600,8 @@ packages:
resolution: {integrity: sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies:
acorn: 8.8.2
acorn-jsx: 5.3.2(acorn@8.8.2)
acorn: 8.10.0
acorn-jsx: 5.3.2(acorn@8.10.0)
eslint-visitor-keys: 3.3.0
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