update
This commit is contained in:
589
src/pages/query-view/components/DetailsDialog.tsx
Normal file
589
src/pages/query-view/components/DetailsDialog.tsx
Normal file
@@ -0,0 +1,589 @@
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { DetailsTab, useQueryViewStore } from '../store';
|
||||
import { useShallow } from 'zustand/shallow';
|
||||
import { useStudioStore, filterRouteInfo, getPayload } from '@/pages/studio/store';
|
||||
import { QueryView } from '..';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { pickRouterViewData, RouterViewData, RouterViewItem } from '@kevisual/api/proxy';
|
||||
import { RouteInfo, fromJSONSchema } from '@kevisual/router/browser';
|
||||
import { pick } from 'es-toolkit';
|
||||
import { toast } from 'sonner';
|
||||
import { Play } from 'lucide-react';
|
||||
// 视图信息表格组件
|
||||
export const ViewInfoTable = ({ currentView }: { currentView?: RouterViewData }) => {
|
||||
|
||||
if (!currentView || !currentView.views || currentView.views.length === 0) {
|
||||
return (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
当前视图没有子视图信息
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 当前选中的视图 ID */}
|
||||
{currentView.viewId && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">当前视图 ID</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{currentView.viewId}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Link */}
|
||||
{currentView.link && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">链接</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md break-all">
|
||||
{currentView.link}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary */}
|
||||
{currentView.summary && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">摘要</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{currentView.summary}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
{currentView.tags && currentView.tags.length > 0 && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">标签</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{currentView.tags.map((tag: string, index: number) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-2 py-1 text-xs bg-gray-900 text-white rounded-md"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
{currentView.title && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">标题</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{currentView.title}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{currentView.description && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
|
||||
{currentView.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 子视图列表表格 */}
|
||||
<div>
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-2">视图列表</label>
|
||||
<div className="border border-gray-300 rounded-md overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-100 border-b border-gray-300">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-700">ID</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-700">标题</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-gray-700">查询</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentView.views.map((view: any, index: number) => {
|
||||
const isSelected = view.id === currentView.viewId;
|
||||
return (
|
||||
<tr
|
||||
key={view.id || index}
|
||||
className={`border-b border-gray-200 transition-colors ${isSelected
|
||||
? 'bg-gray-500 hover:bg-gray-900'
|
||||
: index % 2 === 0
|
||||
? 'bg-white hover:bg-gray-50'
|
||||
: 'bg-gray-50 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<td className={`px-4 py-2 text-sm ${isSelected ? 'text-white font-semibold' : 'text-gray-900'}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
{view.id || '-'}
|
||||
{isSelected && (
|
||||
<span className="px-2 py-0.5 text-xs bg-white text-gray-900 rounded-full font-medium">
|
||||
当前
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className={`px-4 py-2 text-sm ${isSelected ? 'text-white' : 'text-gray-900'}`}>{view.title || '-'}</td>
|
||||
<td className={`px-4 py-2 text-sm font-mono ${isSelected ? 'text-gray-200' : 'text-gray-600'}`}>
|
||||
{view.query || '-'}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const DetailsInfoPanel = ({ detailsData }: { detailsData: RouterViewItem | null }) => {
|
||||
const queryViewStore = useQueryViewStore(useShallow((state) => ({
|
||||
editing: state.editing,
|
||||
setEditing: state.setEditing,
|
||||
setDetailsData: state.setDetailsData,
|
||||
setDetailsActiveTab: state.setDetailsActiveTab
|
||||
})));
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
queryProxy: state.queryProxy,
|
||||
})));
|
||||
if (!detailsData) {
|
||||
return (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
无法获取详情信息
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const [action, setAction] = useState(detailsData.action ? JSON.stringify(detailsData.action, null, 2) : '');
|
||||
const otherFilds = useMemo(() => {
|
||||
const { type } = detailsData;
|
||||
if (type === 'api') {
|
||||
{/* 其他字段 */ }
|
||||
return <>{
|
||||
detailsData.api && (
|
||||
<div className="border-b border-gray-200 pb-3 w-full scrollbar">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">API</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs w-full">
|
||||
{JSON.stringify(detailsData.api, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
}
|
||||
if (type === 'context') {
|
||||
return <>{
|
||||
detailsData.context && (
|
||||
<div className="border-b border-gray-200 pb-3 w-full scrollbar">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">上下文</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs w-full">
|
||||
{JSON.stringify(detailsData.context, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
}
|
||||
if (type === 'page') {
|
||||
return <>{
|
||||
detailsData.page && (
|
||||
<div className="border-b border-gray-200 pb-3 w-full scrollbar">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">页面信息</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs w-full">
|
||||
{JSON.stringify(detailsData.page, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
}
|
||||
return null;
|
||||
}, [detailsData]);
|
||||
const onRun = useCallback(async () => {
|
||||
let _action = detailsData?.action;
|
||||
const isEditing = queryViewStore.editing;
|
||||
if (isEditing) {
|
||||
try {
|
||||
_action = JSON.parse(action as string);
|
||||
} catch (error) {
|
||||
toast.error('操作信息必须是合法的 JSON 格式');
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
if (!_action) {
|
||||
toast.error('没有操作信息可供执行');
|
||||
return;
|
||||
}
|
||||
if (!studioStore.queryProxy) {
|
||||
toast.error('没有可用的查询代理，无法执行操作');
|
||||
return;
|
||||
}
|
||||
const payload = getPayload(_action as any);
|
||||
const res = await studioStore.queryProxy.run({
|
||||
..._action,
|
||||
// @ts-ignore
|
||||
payload,
|
||||
})
|
||||
console.log('执行结果', res);
|
||||
if (res?.code === 200) {
|
||||
queryViewStore.setDetailsData({
|
||||
...detailsData,
|
||||
action: _action,
|
||||
response: res,
|
||||
});
|
||||
toast.success('操作执行成功', {
|
||||
action: {
|
||||
label: '查看数据',
|
||||
onClick: () => queryViewStore.setDetailsActiveTab('response'),
|
||||
},
|
||||
closeButton: true,
|
||||
duration: 2000,
|
||||
position: 'top-center',
|
||||
});
|
||||
} else {
|
||||
toast.error(`操作执行失败: ${res?.message || '未知错误'}`);
|
||||
}
|
||||
}, [queryViewStore.editing, studioStore.queryProxy, action]);
|
||||
const runCom = (
|
||||
<button
|
||||
className="inline-flex items-center gap-1 ml-2 px-2 py-0.5 text-xs rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors align-middle cursor-pointer"
|
||||
onClick={() => {
|
||||
console.log('点击执行', detailsData.action);
|
||||
onRun();
|
||||
}}
|
||||
>
|
||||
<Play className="w-3 h-3" />
|
||||
执行
|
||||
</button>
|
||||
)
|
||||
const editCom = (<>
|
||||
{queryViewStore.editing && <button
|
||||
className="inline-flex items-center gap-1 ml-2 px-2 py-0.5 text-xs rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors align-middle cursor-pointer"
|
||||
onClick={() => {
|
||||
if (queryViewStore.editing) {
|
||||
// 保存操作
|
||||
try {
|
||||
const parsedAction = JSON.parse(action);
|
||||
detailsData.action = parsedAction;
|
||||
queryViewStore.setEditing(false);
|
||||
queryViewStore.setDetailsData({ ...detailsData });
|
||||
toast.success('操作信息已更新');
|
||||
} catch (error) {
|
||||
toast.error('操作信息必须是合法的 JSON 格式');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}}>保存</button>}
|
||||
<button
|
||||
className="inline-flex items-center gap-1 ml-2 px-2 py-0.5 text-xs rounded-md border border-gray-300 hover:bg-gray-50 transition-colors align-middle cursor-pointer"
|
||||
onClick={() => {
|
||||
if (queryViewStore.editing) {
|
||||
setAction(detailsData.action ? JSON.stringify(detailsData.action, null, 2) : '');
|
||||
}
|
||||
queryViewStore.setEditing(!queryViewStore.editing);
|
||||
}}
|
||||
>
|
||||
{queryViewStore.editing ? '取消' : '编辑'}
|
||||
</button>
|
||||
</>)
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Type */}
|
||||
{detailsData.type && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">类型</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{detailsData.type}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
{detailsData.title && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">标题</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{detailsData.title}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{detailsData.description && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
|
||||
{detailsData.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action */}
|
||||
{!queryViewStore.editing && detailsData.action && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<div className="text-sm font-semibold text-gray-700 block mb-1 py-2 cursor-pointer">操作 {runCom} {editCom}</div>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs overflow-auto cursor-pointer" onClick={() => queryViewStore.setEditing(true)}>
|
||||
{JSON.stringify(detailsData.action, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{queryViewStore.editing && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<div className="text-sm font-semibold text-gray-700 block mb-1 py-2">操作 {runCom} {editCom} </div>
|
||||
<textarea
|
||||
className="text-sm text-gray-900 bg-gray-100 px-3 py-2 rounded-md w-full h-32 font-mono border-gray-600 focus:ring-2 focus:ring-gray-500 focus:outline-none scrollbar"
|
||||
value={action}
|
||||
onChange={(e) => {
|
||||
setAction(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{otherFilds}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const RouterInfoPanel = ({ routeInfo }: { routeInfo: RouteInfo | null }) => {
|
||||
if (!routeInfo) {
|
||||
return (
|
||||
<div className="text-sm text-gray-500 text-center py-8">
|
||||
无法获取路由信息
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const _routeInfo = pick(routeInfo, ['id', 'path', 'key', 'description', 'metadata']);
|
||||
const metadata = useMemo(() => {
|
||||
if (!_routeInfo.metadata) return null;
|
||||
const _metadata = _routeInfo.metadata;
|
||||
if (_metadata.viewItem) {
|
||||
_metadata.viewItem = filterRouteInfo(_metadata.viewItem);
|
||||
}
|
||||
return _metadata;
|
||||
}, [_routeInfo.metadata]);
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* ID */}
|
||||
{_routeInfo.id && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">ID{_routeInfo?.id.startsWith("rand") ? ' (当前id会随机变化)' : ''}</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{_routeInfo.id}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Path */}
|
||||
{_routeInfo.path && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">路径</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{_routeInfo.path}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Key */}
|
||||
{_routeInfo.key && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">Key</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
{_routeInfo.key}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{_routeInfo.description && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
|
||||
{_routeInfo.description}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
{metadata && (
|
||||
<div className="border-b border-gray-200 pb-3">
|
||||
<label className="text-sm font-semibold text-gray-700 block mb-1">Metadata</label>
|
||||
<div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
|
||||
<pre className="text-xs overflow-auto">
|
||||
{JSON.stringify(metadata, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>);
|
||||
}
|
||||
|
||||
export const DetailsDialog = () => {
|
||||
const queryViewStore = useQueryViewStore(
|
||||
useShallow((state) => ({
|
||||
showDetailsDialog: state.showDetailsDialog,
|
||||
setShowDetailsDialog: state.setShowDetailsDialog,
|
||||
detailsData: state.detailsData,
|
||||
detailsActiveTab: state.detailsActiveTab,
|
||||
setDetailsActiveTab: state.setDetailsActiveTab,
|
||||
allDetailsTabs: state.allDetailsTabs,
|
||||
setAllDetailsTabs: state.setAllDetailsTabs,
|
||||
editing: state.editing,
|
||||
setEditing: state.setEditing,
|
||||
}))
|
||||
);
|
||||
|
||||
const { currentView, queryProxy } = useStudioStore(useShallow((state) => ({
|
||||
currentView: state.currentView,
|
||||
queryProxy: state.queryProxy,
|
||||
})));
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
const [forceViewDialogOpen, setForceViewDialogOpen] = useState(false)
|
||||
const routeInfo = useMemo(() => {
|
||||
const action = queryViewStore?.detailsData?.action;
|
||||
if (!action) return null;
|
||||
if (!queryProxy) return null;
|
||||
const router = queryProxy!.router?.findRoute?.(action)
|
||||
if (!router) return null;
|
||||
return router as RouteInfo;
|
||||
}, [queryProxy, queryViewStore.detailsData]);
|
||||
console.log('metadata', queryViewStore.detailsData?._id, queryViewStore.detailsData);
|
||||
const onChangeTab = useCallback((key) => {
|
||||
if (key !== 'response') {
|
||||
queryViewStore.setDetailsActiveTab(key);
|
||||
return;
|
||||
}
|
||||
let needCheck = true;
|
||||
const action = queryViewStore?.detailsData?.action;
|
||||
if (!action) {
|
||||
needCheck = false
|
||||
toast.error('没有操作信息，无法查看响应数据');
|
||||
return
|
||||
}
|
||||
|
||||
const args = routeInfo?.metadata?.args || [];
|
||||
const keys = Object.keys(args);
|
||||
if (keys.length === 0) {
|
||||
needCheck = false;
|
||||
}
|
||||
if (!needCheck) {
|
||||
queryViewStore.setDetailsActiveTab(key);
|
||||
return;
|
||||
}
|
||||
console.log('args', args);
|
||||
|
||||
const payload = getPayload(action as any);
|
||||
payload.data = {}
|
||||
const schema = fromJSONSchema<true>(args, { mergeObject: true });
|
||||
console.log('payload', payload);
|
||||
console.log('schema', schema);
|
||||
const validateResult = schema.safeParse(payload);
|
||||
console.log('validateResult', validateResult);
|
||||
if (!validateResult.success) {
|
||||
// 参数不合法，无法查看响应数据，需要提示用户强制查看还是取消，如果用户选择强制查看，则直接切换到响应标签页，如果用户选择取消，则保持在当前标签页
|
||||
setForceViewDialogOpen(true);
|
||||
} else {
|
||||
queryViewStore.setDetailsActiveTab(key);
|
||||
}
|
||||
|
||||
}, [routeInfo])
|
||||
if (!queryViewStore.detailsData) return null;
|
||||
return (
|
||||
<>
|
||||
<Dialog open={forceViewDialogOpen} onOpenChange={setForceViewDialogOpen}>
|
||||
<DialogContent className="max-w-sm!">
|
||||
<DialogHeader>
|
||||
<DialogTitle>参数不合法</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="text-sm text-gray-600 py-2">
|
||||
当前参数不合法，可能导致请求失败。是否仍要强制查看响应数据？
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 mt-2">
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded-md border border-gray-300 hover:bg-gray-50 transition-colors"
|
||||
onClick={() => {
|
||||
setForceViewDialogOpen(false);
|
||||
queryViewStore.setEditing(true);
|
||||
queryViewStore.setDetailsActiveTab('details');
|
||||
}}
|
||||
>
|
||||
去编辑
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded-md border border-gray-300 hover:bg-gray-50 transition-colors"
|
||||
onClick={() => setForceViewDialogOpen(false)}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 text-sm rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors"
|
||||
onClick={() => {
|
||||
setForceViewDialogOpen(false);
|
||||
queryViewStore.setDetailsActiveTab('response');
|
||||
}}
|
||||
>
|
||||
强制查看
|
||||
</button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<Dialog open={queryViewStore.showDetailsDialog} onOpenChange={queryViewStore.setShowDetailsDialog}>
|
||||
<DialogContent className={`max-h-[80vh] overflow-hidden ${isFullscreen ? 'w-screen! h-screen! max-w-screen! max-h-screen! ' : 'max-w-3xl! '}`}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>详情信息</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex gap-2 border-b border-gray-200">
|
||||
{queryViewStore.allDetailsTabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => onChangeTab(tab.key as DetailsTab)}
|
||||
className={`px-4 py-2 text-sm font-medium transition-colors relative ${queryViewStore.detailsActiveTab === tab.key
|
||||
? 'text-gray-900 border-b-2 border-gray-900'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 h-[calc(80vh-200px)] overflow-auto scrollbar px-2">
|
||||
{/* 第一个标签页：详情信息 */}
|
||||
{queryViewStore.detailsActiveTab === 'details' && (
|
||||
<DetailsInfoPanel detailsData={queryViewStore.detailsData} />
|
||||
)}
|
||||
|
||||
{/* 第二个标签页：当前视图 */}
|
||||
{queryViewStore.detailsActiveTab === 'view' && (
|
||||
<ViewInfoTable currentView={currentView} />
|
||||
)}
|
||||
|
||||
{/* 第三个标签页：路由信息 */}
|
||||
{queryViewStore.detailsActiveTab === 'router' && (
|
||||
<RouterInfoPanel routeInfo={routeInfo} />
|
||||
)}
|
||||
|
||||
{/* 第三个标签页：响应 */}
|
||||
{queryViewStore.detailsActiveTab === 'response' && (
|
||||
<div className="space-y-4">
|
||||
<QueryView viewData={queryViewStore.detailsData} type={'message'} setIsFullscreen={setIsFullscreen} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog >
|
||||
</>
|
||||
);
|
||||
};
|
||||
373
src/pages/query-view/index.tsx
Normal file
373
src/pages/query-view/index.tsx
Normal file
@@ -0,0 +1,373 @@
|
||||
import { QueryProxy, RouterViewItem } from '@kevisual/api/proxy'
|
||||
import { app } from '@/agents'
|
||||
import { use, useEffect, useState, useRef, useId, useMemo } from 'react'
|
||||
import { flexRender, useReactTable, getCoreRowModel, ColumnDef } from '@tanstack/react-table'
|
||||
import { RefreshCw, Info, MoreVertical, Edit, Trash2, Download, Save, ExternalLink, Code, Delete, Maximize, Minimize } from 'lucide-react'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { filterRouteInfo, Message, useStudioStore } from '../studio/store'
|
||||
import { useQueryViewStore } from './store'
|
||||
import { DetailsDialog } from './components/DetailsDialog'
|
||||
import { useShallow } from 'zustand/shallow'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
import { toast } from 'sonner'
|
||||
import { Result } from '@kevisual/query'
|
||||
export const QueryViewTypes = ['component', 'page', 'message'] as const
|
||||
type Props = {
|
||||
type: typeof QueryViewTypes[number],
|
||||
viewData?: RouterViewItem,
|
||||
setIsFullscreen?: (isFullscreen: boolean) => void,
|
||||
}
|
||||
|
||||
const queryProxy = new QueryProxy({
|
||||
router: app as any
|
||||
});
|
||||
export const QueryView = (props: Props) => {
|
||||
const [data, setData] = useState<any[]>([])
|
||||
const [columns, setColumns] = useState<ColumnDef<any>[]>([])
|
||||
const [type] = useState<Props['type']>(props.type || 'page')
|
||||
const [viewData, setViewData] = useState<RouterViewItem | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [showMoreMenu, setShowMoreMenu] = useState(false)
|
||||
const [selectedRow, setSelectedRow] = useState<any | null>(null)
|
||||
const [isList, setIsList] = useState(true)
|
||||
const [obj, setObj] = useState<any>(null)
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
const routeViewRef = useRef<HTMLDivElement>(null)
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns: columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
})
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
deleteMessage: state.deleteMessage
|
||||
})))
|
||||
const queryViewStore = useQueryViewStore(useShallow((state) => ({
|
||||
setShowDetailsDialog: state.setShowDetailsDialog,
|
||||
setDetailsData: state.setDetailsData,
|
||||
setEditing: state.setEditing,
|
||||
})))
|
||||
const isPage = type === 'page'
|
||||
const isMessage = type === 'message'
|
||||
const id = useId()
|
||||
|
||||
const handleResponse = (response: Result) => {
|
||||
const list = response.data?.list
|
||||
if (!list) {
|
||||
setIsList(false);
|
||||
setObj(response.data);
|
||||
return;
|
||||
}
|
||||
if (isList === false) {
|
||||
setIsList(true);
|
||||
}
|
||||
setData(response.data.list)
|
||||
const [_, firstItem] = response.data.list || []
|
||||
if (firstItem) {
|
||||
const cols: ColumnDef<any>[] = Object.keys(firstItem).map(key => ({
|
||||
accessorKey: key,
|
||||
header: key.toUpperCase(),
|
||||
cell: info => info.getValue() + '',
|
||||
}))
|
||||
setColumns(cols)
|
||||
}
|
||||
}
|
||||
const main = async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const res = await queryProxy.runByRouteView(viewData!)
|
||||
const response = res.response;
|
||||
handleResponse(response)
|
||||
toast.success('数据获取成功')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefresh = () => {
|
||||
if (viewData) {
|
||||
setViewData({ ...viewData, response: undefined }) // 触发刷新
|
||||
}
|
||||
}
|
||||
|
||||
const handleShowDetails = (editing?: boolean) => {
|
||||
const data = filterRouteInfo(props.viewData!)
|
||||
queryViewStore.setDetailsData(data, 'details');
|
||||
queryViewStore.setShowDetailsDialog(true);
|
||||
if (typeof editing === 'boolean') {
|
||||
queryViewStore.setEditing(editing);
|
||||
} else {
|
||||
queryViewStore.setEditing(false);
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = () => {
|
||||
handleShowDetails(true)
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedRow) {
|
||||
console.log('Delete row:', selectedRow)
|
||||
// 在这里添加删除逻辑
|
||||
}
|
||||
studioStore.deleteMessage(props.viewData! as Message)
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
if (!viewData) return
|
||||
console.log('Export viewData:', viewData)
|
||||
}
|
||||
const handleExportCode = () => {
|
||||
if (!viewData) return
|
||||
console.log('Export code for viewData:', viewData)
|
||||
}
|
||||
const handleSave = () => {
|
||||
if (selectedRow) {
|
||||
console.log('Save row:', selectedRow)
|
||||
toast.success('保存成功')
|
||||
// 在这里添加保存逻辑
|
||||
}
|
||||
}
|
||||
|
||||
const handleSaveAndOpen = () => {
|
||||
if (selectedRow) {
|
||||
console.log('Save and open row:', selectedRow)
|
||||
toast.success('保存并打开成功')
|
||||
// 在这里添加保存并打开逻辑
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleFullscreen = () => {
|
||||
setIsFullscreen(!isFullscreen)
|
||||
if (props.setIsFullscreen) {
|
||||
props.setIsFullscreen(!isFullscreen)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (viewData && props.type !== 'message') {
|
||||
main()
|
||||
} else if (viewData && props.type === 'message' && !viewData.response) {
|
||||
main()
|
||||
}
|
||||
}, [viewData, props.type])
|
||||
|
||||
useEffect(() => {
|
||||
if (props.viewData) {
|
||||
const detailsData = cloneDeep(props.viewData) as RouterViewItem
|
||||
setViewData(detailsData)
|
||||
// 如果是 message 类型且有 response，直接处理响应
|
||||
if (props.type === 'message' && props.viewData.response) {
|
||||
handleResponse(props.viewData.response)
|
||||
}
|
||||
}
|
||||
}, [props.viewData])
|
||||
const RenderTable = () => {
|
||||
if (!isList) {
|
||||
return <pre className='bg-gray-100 p-4 rounded-lg overflow-auto'>
|
||||
{JSON.stringify(obj, null, 2)}
|
||||
</pre>
|
||||
}
|
||||
return <table className='w-full border-collapse min-w-max md:w-full'>
|
||||
<thead className='bg-gray-100 border-b-2 border-gray-300 sticky top-0'>
|
||||
{table.getHeaderGroups().map(headerGroup => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map(header => (
|
||||
<th
|
||||
key={header.id}
|
||||
className='px-4 py-3 text-left text-sm font-semibold text-gray-700 whitespace-nowrap'
|
||||
>
|
||||
{flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody>
|
||||
{table.getRowModel().rows.map((row, idx) => (
|
||||
<tr
|
||||
key={row.id}
|
||||
className={`border-b border-gray-200 transition-colors duration-200 ${idx % 2 === 0 ? 'bg-white' : 'bg-gray-50'
|
||||
} hover:bg-blue-50`}
|
||||
>
|
||||
{row.getVisibleCells().map(cell => (
|
||||
<td
|
||||
key={cell.id}
|
||||
className='px-4 py-3 text-sm text-gray-600'
|
||||
>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
|
||||
const typeClass = useMemo(() => {
|
||||
if (isFullscreen && type !== 'message') {
|
||||
return 'fixed inset-0 z-50 bg-white dark:bg-gray-900 w-screen h-screen'
|
||||
} else if (isFullscreen && type === 'message') {
|
||||
return 'absolute inset-0 z-50 bg-white dark:bg-gray-900 w-full h-full p-4'
|
||||
}
|
||||
switch (type) {
|
||||
case 'component':
|
||||
return 'max-h-150 overflow-y-auto'
|
||||
case 'page':
|
||||
return 'h-full overflow-auto'
|
||||
case 'message':
|
||||
return 'h-full overflow-auto'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}, [type, isFullscreen])
|
||||
|
||||
const content = <div ref={routeViewRef} id={'route-view-' + id} className={`w-full route-view ${typeClass} p-4 `}>
|
||||
<div className='mb-4'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h2 className={`font-bold ${type === 'component' ? 'text-lg' : 'text-2xl'} truncate`} title={`路由视图 - ${viewData?.title || '未命名'}`}>路由视图 - {viewData?.title || '未命名'}</h2>
|
||||
<div className='flex items-center gap-2 relative'>
|
||||
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={isLoading}
|
||||
className='p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50'
|
||||
title='刷新'
|
||||
>
|
||||
<RefreshCw size={20} className={isLoading ? 'animate-spin' : 'cursor-pointer'} />
|
||||
</button>
|
||||
{!isPage && !isMessage && <button
|
||||
onClick={handleDelete}
|
||||
disabled={isLoading}
|
||||
className='p-2 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50'
|
||||
>
|
||||
<Trash2 size={20} className='cursor-pointer' />
|
||||
</button>}
|
||||
|
||||
<DropdownMenu open={showMoreMenu} onOpenChange={setShowMoreMenu}>
|
||||
<DropdownMenuTrigger
|
||||
className='p-2 hover:bg-gray-200 rounded-lg transition-colors'
|
||||
title='更多选项'
|
||||
>
|
||||
<MoreVertical size={20} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align='end' className='w-48 border-gray-300'>
|
||||
{!isPage && (
|
||||
<>
|
||||
<DropdownMenuItem onClick={handleSave}>
|
||||
<Save size={16} className='mr-2' />
|
||||
<span>保存</span>
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
{!isPage && (
|
||||
<>
|
||||
<DropdownMenuItem onClick={handleSaveAndOpen}>
|
||||
<ExternalLink size={16} className='mr-2' />
|
||||
<span>保存并打开</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
{!isMessage && (
|
||||
<DropdownMenuItem onClick={() => handleShowDetails()}>
|
||||
<Info size={16} className='mr-2' />
|
||||
<span>详情</span>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuItem onClick={handleEdit}>
|
||||
<Edit size={16} className='mr-2' />
|
||||
<span>编辑</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleToggleFullscreen}>
|
||||
{isFullscreen ? <Minimize size={16} className='mr-2' /> : <Maximize size={16} className='mr-2' />}
|
||||
<span>{isFullscreen ? '退出全屏' : '全屏'}</span>
|
||||
</DropdownMenuItem>
|
||||
{!isMessage && <DropdownMenuItem onClick={handleDelete} variant='destructive'>
|
||||
<Trash2 size={16} className='mr-2' />
|
||||
<span>{!isPage ? '移除' : '删除'}</span>
|
||||
</DropdownMenuItem>}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={handleExport}>
|
||||
<Download size={16} className='mr-2' />
|
||||
<span>导出</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleExportCode}>
|
||||
<Code size={16} className='mr-2' />
|
||||
<span>导出代码</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-full overflow-x-auto scrollbar rounded-lg shadow-md border border-gray-300'>
|
||||
<RenderTable />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return content
|
||||
}
|
||||
export const QueryViewMessages = (props: Props) => {
|
||||
const studioStore = useStudioStore(useShallow((state) => ({
|
||||
messages: state.messages,
|
||||
setMessages: state.setMessages
|
||||
})))
|
||||
const initPage = async () => {
|
||||
const url = new URL(window.location.href)
|
||||
const id = url.searchParams.get('id') || ''
|
||||
const message = studioStore.messages.find(msg => msg.id === id)
|
||||
if (!id) {
|
||||
setTimeout(() => {
|
||||
toast.error('缺少查询视图ID参数')
|
||||
console.error('Missing query view ID parameter')
|
||||
}, 1000)
|
||||
return
|
||||
}
|
||||
// 查询query-view的保存的id，赋值后然后执行查询
|
||||
// @ts-ignore
|
||||
const DemoRouterView: Message = {
|
||||
id: 'getData',
|
||||
description: '获取数据',
|
||||
title: '获取数据',
|
||||
type: 'api',
|
||||
api: {
|
||||
url: "/api/router",
|
||||
// url: "http://localhost:52000/api/router",
|
||||
},
|
||||
action: {
|
||||
path: 'router',
|
||||
key: 'list'
|
||||
}
|
||||
}
|
||||
studioStore.setMessages([DemoRouterView as Message])
|
||||
}
|
||||
useEffect(() => {
|
||||
const type = props.type || 'page'
|
||||
if (type === 'page') {
|
||||
initPage()
|
||||
}
|
||||
}, [props.type])
|
||||
return <div className='w-full h-full flex flex-col scrollbar'>
|
||||
{studioStore.messages.map((msg, index) => (
|
||||
<div key={msg._id || msg.id} className="p-4 border-b border-gray-200">
|
||||
<QueryView viewData={msg} type={props.type} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
export const AppProvider = () => {
|
||||
return <div className='w-full h-full flex flex-col overflow-hidden'>
|
||||
<DetailsDialog />
|
||||
<QueryViewMessages type="page" />
|
||||
</div>
|
||||
}
|
||||
6
src/pages/query-view/page.tsx
Normal file
6
src/pages/query-view/page.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import { AppProvider } from './index'
|
||||
export default function App() {
|
||||
return (
|
||||
<AppProvider />
|
||||
)
|
||||
}
|
||||
60
src/pages/query-view/store/index.ts
Normal file
60
src/pages/query-view/store/index.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { RouterViewItem } from '@kevisual/api/proxy';
|
||||
import { create } from 'zustand';
|
||||
|
||||
export const detailsTabs = ['details', 'view', 'router', 'response'] as const;
|
||||
export const AllTabs = [
|
||||
{
|
||||
key: 'details',
|
||||
label: '详情',
|
||||
},
|
||||
{
|
||||
key: 'view',
|
||||
label: '视图',
|
||||
},
|
||||
{
|
||||
key: 'router',
|
||||
label: '路由',
|
||||
},
|
||||
{
|
||||
key: 'response',
|
||||
label: '响应',
|
||||
},
|
||||
]
|
||||
export type DetailsTab = (typeof detailsTabs)[number];
|
||||
type QueryViewState = {
|
||||
showDataDialog: boolean;
|
||||
setShowDataDialog: (show: boolean) => void;
|
||||
dataDialogContent: any;
|
||||
setDataDialogContent: (content: any) => void;
|
||||
showDetailsDialog: boolean;
|
||||
setShowDetailsDialog: (show: boolean) => void;
|
||||
detailsData: RouterViewItem | null;
|
||||
setDetailsData: (data: RouterViewItem | null, tab?: DetailsTab) => void;
|
||||
detailsActiveTab: DetailsTab;
|
||||
setDetailsActiveTab: (tab: DetailsTab) => void;
|
||||
allDetailsTabs: typeof AllTabs;
|
||||
setAllDetailsTabs: (tabs: typeof AllTabs) => void;
|
||||
editing: boolean;
|
||||
setEditing: (editing: boolean) => void;
|
||||
};
|
||||
export const useQueryViewStore = create<QueryViewState>((set) => ({
|
||||
showDataDialog: false,
|
||||
setShowDataDialog: (show) => set({ showDataDialog: show }),
|
||||
dataDialogContent: null,
|
||||
setDataDialogContent: (content) => set({ dataDialogContent: content }),
|
||||
showDetailsDialog: false,
|
||||
setShowDetailsDialog: (show) => set({ showDetailsDialog: show }),
|
||||
detailsData: null,
|
||||
setDetailsData: (data, tab) => {
|
||||
if (typeof tab !== 'undefined') {
|
||||
set({ detailsActiveTab: tab });
|
||||
}
|
||||
set({ detailsData: data })
|
||||
},
|
||||
detailsActiveTab: 'details',
|
||||
setDetailsActiveTab: (tab) => set({ detailsActiveTab: tab }),
|
||||
editing: false,
|
||||
setEditing: (editing) => set({ editing }),
|
||||
allDetailsTabs: AllTabs,
|
||||
setAllDetailsTabs: (tabs) => set({ allDetailsTabs: tabs }),
|
||||
}));
|
||||
Reference in New Issue
Block a user