feat: add query component

Author: dolphin0618

src/frontend/platform/src/pages/Dashboard/components/editor/ComponentPicker.tsx

@@ -3,7 +3,7 @@ import { cn } from '@/utils';
 import React, { useState } from 'react';
 import { ChartType } from '../../types/dataConfig';
 
-export const ChartItems = [
+export const ChartGroupItems = [
     {
         label: '柱状图',
         data: [
@@ -43,6 +43,7 @@ export const ChartItems = [
         ]
     }
 ];
+export const ChartItems = ChartGroupItems.flatMap(item => item.data);
 
 // 定义数据项结构
 export interface PickerItem {
@@ -91,7 +92,7 @@ const ComponentPicker = ({ children, className, onSelect }: ComponentPickerProps
             <PopoverContent align="start" className={cn("w-[332px] p-4 shadow-xl", className)}>
                 <div className="space-y-2">
                     {
-                        ChartItems.map(item => (
+                        ChartGroupItems.map(item => (
                             <div>
                                 <h4 className="text-sm font-medium mb-2 px-1">{item.label}</h4>
                                 <ItemGrid list={item.data} />

src/frontend/platform/src/pages/Dashboard/components/editor/ComponentWrapper.tsx

@@ -12,11 +12,9 @@ import "./index.css"
 
 interface ComponentWrapperProps {
     component: DashboardComponent
-    isSelected: boolean
     isPreviewMode: boolean
-    dashboards: Dashboard[],
+    dashboards: Dashboard[]
     isDark: boolean
-    onClick: () => void
     onDuplicate: (componentId: string) => void
     onCopyTo: (componentId: string, targetDashboardId: string) => void
     onDelete: (componentId: string) => void

src/frontend/platform/src/pages/Dashboard/components/editor/EditorCanvas.tsx

@@ -206,59 +206,59 @@ export function EditorCanvas({ isLoading, isPreviewMode, dashboard }: EditorCanv
 
     return (
         <>
-        <div className="flex h-full">
-            <div
-                id="edit-charts-panne"
-                ref={containerRef}
-                className="flex-1 p-2 overflow-auto"
-                style={{
-                    backgroundColor: currentDashboard.style_config.theme === 'dark' ? '#1a1a1a' : '#f5f5f5',
-                }}
-                onClick={handleCanvasClick}
-            >
-                <div className="mx-auto relative" style={{
-                    ...gridBackgroundStyle,
-                }}>
-                    {mounted && (
-                        <ReactGridLayout
-                            className="layout"
-                            layout={layouts}
-                            width={width}
-                            gridConfig={{
-                                cols: 24,
-                                rowHeight: 32
-                            }}
-                            dragConfig={{ enabled: !isPreviewMode }}
-                            resizeConfig={
-                                {
-                                    enabled: !isPreviewMode,
-                                    handles: ["sw", "nw", "se", "ne"]
+            <div className="flex h-full">
+                <div
+                    id="edit-charts-panne"
+                    ref={containerRef}
+                    className="flex-1 p-2 overflow-auto"
+                    style={{
+                        backgroundColor: currentDashboard.style_config.theme === 'dark' ? '#1a1a1a' : '#f5f5f5',
+                    }}
+                    onClick={handleCanvasClick}
+                >
+                    <div className="mx-auto relative" style={{
+                        ...gridBackgroundStyle,
+                    }}>
+                        {mounted && (
+                            <ReactGridLayout
+                                className="layout"
+                                layout={layouts}
+                                width={width}
+                                gridConfig={{
+                                    cols: 24,
+                                    rowHeight: 32
                                 }}
-                            onLayoutChange={handleLayoutChange}
-                            draggableHandle=".drag-handle"
-                            margin={[16, 16]}
-                            containerPadding={[0, 0]}
-                            compactor={verticalCompactor}
-                        >
-                            {currentDashboard.components.map((component) => (
-                                <div key={component.id} className="drag-handle">
-                                    <ComponentWrapper
-                                        dashboards={dashboards}
-                                        component={component}
-                                        isDark={currentDashboard.style_config.theme === 'dark'}
-                                        isPreviewMode={isPreviewMode}
-                                        onDuplicate={handleDuplicate}
-                                        onCopyTo={handleCopyTo}
-                                        onDelete={handleDelete}
-                                    />
-                                </div>
-                            ))}
-                        </ReactGridLayout>
-                    )}
+                                dragConfig={{ enabled: !isPreviewMode }}
+                                resizeConfig={
+                                    {
+                                        enabled: !isPreviewMode,
+                                        handles: ["sw", "nw", "se", "ne"]
+                                    }}
+                                onLayoutChange={handleLayoutChange}
+                                draggableHandle=".drag-handle"
+                                margin={[16, 16]}
+                                containerPadding={[0, 0]}
+                                compactor={verticalCompactor}
+                            >
+                                {currentDashboard.components.map((component) => (
+                                    <div key={component.id} className="drag-handle">
+                                        <ComponentWrapper
+                                            dashboards={dashboards}
+                                            component={component}
+                                            isDark={currentDashboard.style_config.theme === 'dark'}
+                                            isPreviewMode={isPreviewMode}
+                                            onDuplicate={handleDuplicate}
+                                            onCopyTo={handleCopyTo}
+                                            onDelete={handleDelete}
+                                        />
+                                    </div>
+                                ))}
+                            </ReactGridLayout>
+                        )}
+                    </div>
                 </div>
-            </div>
-            {/* 配置抽屉 */}
-            <ComponentConfigDrawer />
+                {/* 配置抽屉 */}
+                {!isPreviewMode && <ComponentConfigDrawer />}
             </div>
         </>
     )

src/frontend/platform/src/pages/Dashboard/components/editor/EditorHeader.tsx

@@ -17,7 +17,7 @@ import { useNavigate } from "react-router-dom"
 import { usePublishDashboard } from "../../hook"
 import ComponentPicker from "./ComponentPicker"
 import ThemePicker from "./ThemePicker"
-import { Dashboard } from "../../types/dataConfig"
+import { ChartType, Dashboard } from "../../types/dataConfig"
 import { Separator } from "@/components/bs-ui/separator"
 import { Badge } from "@/components/bs-ui/badge"
 
@@ -270,7 +270,10 @@ export function EditorHeader({
                         添加图表
                     </Button>
                 </ComponentPicker>
-                <Button variant="outline" size="sm" className="gap-2">
+                <Button variant="outline" size="sm" className="gap-2" onClick={() => addComponentToLayout({
+                    title: "",
+                    type: ChartType.Query
+                })}>
                     <FunnelIcon size="14" />
                     添加查询组件
                 </Button>

src/frontend/platform/src/pages/Dashboard/components/editor/Home.tsx

@@ -23,7 +23,7 @@ export default function Home() {
 
                 {/* Chart Grid */}
                 <div className="flex justify-center flex-wrap gap-4">
-                    {ChartItems.flatMap(e => e.data).map((item) => (
+                    {ChartItems.map((item) => (
                         <div
                             key={item.type}
                             onClick={() => handleItemClick(item)}