temp

web/src/app/query-view/components/DetailsDialog.tsx

@@ -0,0 +1,151 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useQueryViewStore } from '../store';
+import { useShallow } from 'zustand/shallow';
+import { useStudioStore } from '@/app/studio/store';
+import { useState } from 'react';
+import { QueryView } from '..';
+
+export const DetailsDialog = () => {
+  const [activeTab, setActiveTab] = useState('details');
+  const { showDetailsDialog, setShowDetailsDialog, detailsData } = useQueryViewStore(
+    useShallow((state) => ({
+      showDetailsDialog: state.showDetailsDialog,
+      setShowDetailsDialog: state.setShowDetailsDialog,
+      detailsData: state.detailsData,
+    }))
+  );
+  const { currentView } = useStudioStore(useShallow((state) => ({
+    currentView: state.currentView,
+  })));
+
+  if (!detailsData) return null;
+  console.log('activeTab ', activeTab);
+  return (
+    <Dialog open={showDetailsDialog} onOpenChange={setShowDetailsDialog}>
+      <DialogContent className="max-w-3xl! max-h-[80vh] overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>详情信息</DialogTitle>
+        </DialogHeader>
+        
+        <div className="flex gap-2 border-b border-gray-200">
+          <button
+            onClick={() => setActiveTab('details')}
+            className={`px-4 py-2 text-sm font-medium transition-colors relative ${
+              activeTab === 'details'
+                ? 'text-gray-900 border-b-2 border-gray-900'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            详情
+          </button>
+          <button
+            onClick={() => setActiveTab('view')}
+            className={`px-4 py-2 text-sm font-medium transition-colors relative ${
+              activeTab === 'view'
+                ? 'text-gray-900 border-b-2 border-gray-900'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            视图
+          </button>
+          <button
+            onClick={() => setActiveTab('response')}
+            className={`px-4 py-2 text-sm font-medium transition-colors relative ${
+              activeTab === 'response'
+                ? 'text-gray-900 border-b-2 border-gray-900'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            响应
+          </button>
+        </div>
+
+        <div className="mt-4 h-[calc(80vh-200px)] overflow-auto scrollbar">
+          {/* 第一个标签页：详情信息 */}
+          {activeTab === 'details' && (
+            <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 */}
+              {detailsData.action && (
+                <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">
+                    <pre className="text-xs overflow-auto">
+                      {JSON.stringify(detailsData.action, null, 2)}
+                    </pre>
+                  </div>
+                </div>
+              )}
+
+              {/* 其他字段 */}
+              {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>
+              )}
+            </div>
+          )}
+
+          {/* 第二个标签页：当前视图 */}
+          {activeTab === 'view' && (
+            <div className="space-y-4">
+              {currentView ? (
+                <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>
+              ) : (
+                <div className="text-sm text-gray-500 text-center py-8">
+                  当前没有视图信息
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* 第三个标签页：响应 */}
+          {activeTab === 'response' && (
+            <div className="space-y-4">
+              <QueryView viewData={detailsData} type={'message'} />
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};