feat: Component Style

Author: mgk

src/frontend/platform/src/pages/Dashboard/components/charts/QueryFilter.tsx

@@ -11,9 +11,10 @@ import { DashboardComponent, QueryConfig } from "../../types/dataConfig"
 interface QueryFilterProps {
     component: DashboardComponent  // Query the ID of the component, which is used to trigger the refresh of the associated chart
     isPreviewMode?: boolean
+    onQuery?: (filter: any, hasQuery: boolean) => void
 }
 
-export function QueryFilter({ component, isPreviewMode = false }: QueryFilterProps) {
+export function QueryFilter({ component, isPreviewMode = false, onQuery }: QueryFilterProps) {
     const { refreshChartsByQuery } = useEditorDashboardStore()
     const [date, setDate] = useState<Date | undefined>(undefined)
 
@@ -23,6 +24,7 @@ export function QueryFilter({ component, isPreviewMode = false }: QueryFilterPro
 
     const handleQuery = () => {
         console.log("查询日期:", date)
+        onQuery?.(filter, true)
         // Refresh the associated chart based on the query component ID 
         refreshChartsByQuery(component.id, filter)
     }
@@ -49,7 +51,11 @@ export function QueryFilter({ component, isPreviewMode = false }: QueryFilterPro
 
             {/* 查询按钮 - 固定在右下角 */}
             <div className="absolute bottom-4 right-4">
-                <Button onClick={handleQuery} size="sm" className="gap-1">
+                <Button onClick={(e) => {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    handleQuery()
+                }} size="sm" className="gap-1">
                     <Search className="h-4 w-4" />
                     查询
                 </Button>

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

@@ -40,7 +40,7 @@ export const CHART_TYPES: {
     { label: "查询组件", value: ChartType.Query, hasStack: false }
   ];
 
-export function ComponentConfigDrawer() {
+export function ComponentConfigDrawer({showChartSelector}: {showChartSelector:boolean}) {
   const { editingComponent, updateEditingComponent } = useComponentEditorStore();
   const { refreshChart } = useEditorDashboardStore();
 
@@ -258,9 +258,8 @@ export function ComponentConfigDrawer() {
   }
 
   return (
-    <div className="fixed right-0 top-14 bottom-0 flex bg-background border-l border-border">
-
-      {false ? (
+   <div className="h-full flex bg-background border-l border-border">
+      {showChartSelector? (
         <ChartSelector
           charts={[
             { id: '1', name: '堆叠条形图-图表名称', dataset: '会话500-数据集' },
@@ -272,7 +271,7 @@ export function ComponentConfigDrawer() {
         />
       ) : (
         <>
-          <div className={`border-r flex flex-col h-full transition-all duration-300 ${configCollapsed.basic ? "w-12" : "w-[400px]"} shrink-0`}>
+          <div className={`border-r flex flex-col h-full transition-all duration-300 ${configCollapsed.basic ? "w-12" : "w-[300px]"} shrink-0`}>
             {configCollapsed.basic ? (
               <CollapseLabel
                 label="基础配置"
@@ -503,7 +502,7 @@ export function ComponentConfigDrawer() {
               </div>
             )}
           </div>
-          <div className={`flex flex-col h-full transition-all duration-300 ${configCollapsed.data ? "w-12 shrink-0" : "w-[400px]"}`}>
+          <div className={`flex flex-col h-full transition-all duration-300 ${configCollapsed.data ? "w-12 shrink-0" : "w-[300px]"}`}>
             {configCollapsed.data ? (
               <CollapseLabel label="数据集配置" onClick={() => toggleCollapse('data')} icon={<ChevronLeft />} />
             ) : (

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

@@ -20,12 +20,13 @@ interface ComponentWrapperProps {
     onDuplicate: (componentId: string) => void
     onCopyTo: (componentId: string, targetDashboardId: string) => void
     onDelete: (componentId: string) => void
+    onQuery?: (componentId: string, filter: any, hasQuery: boolean) => void
 }
 
 // 组件包装器，用于处理选中状态
 export function ComponentWrapper({
     dashboards, component, isPreviewMode, isDark,
-    onDuplicate, onCopyTo, onDelete
+    onDuplicate, onCopyTo, onDelete,onQuery
 }: ComponentWrapperProps) {
     const [isHovered, setIsHovered] = useState(false)
     const [isEditing, setIsEditing] = useState(false)
@@ -45,6 +46,7 @@ export function ComponentWrapper({
 
     const handleClick = (e: React.MouseEvent) => {
         e.stopPropagation()
+        onQuery(component.id, null, false) 
         if (isPreviewMode) return
         if (editingComponent?.id === component.id) return
         copyFromDashboard(component.id)
@@ -213,7 +215,10 @@ export function ComponentWrapper({
                 {/* Component content */}
                 <div className={['query', 'metric'].includes(component.type) ? 'h-full overflow-hidden' : 'h-[calc(100%-2.5rem)] overflow-hidden'}>
                     {component.type === 'query' ? (
-                        <QueryFilter isDark={isDark} component={componentData} isPreviewMode={isPreviewMode} />
+                        <QueryFilter isDark={isDark} component={componentData} isPreviewMode={isPreviewMode} onQuery={(filter, hasQuery) => {
+                                onQuery?.(component.id, filter, hasQuery)
+                            }}
+                        />
                     ) : (
                         <ChartContainer isDark={isDark} component={componentData} />
                     )}

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

@@ -58,7 +58,7 @@ export function DashboardConfigPanel({ collapsed = false, onCollapse }: Dashboar
   )
 
   return (
-    <div className="fixed right-0 top-14 bottom-0 flex bg-background border-l border-border">
+    <div className="h-full flex bg-background border-l border-border">
       <div className={`border-r flex flex-col h-full transition-all duration-300 ${collapsed ? "w-12" : "w-[400px]"} shrink-0`}>
         {collapsed ? (
           <CollapseLabel

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

@@ -43,7 +43,7 @@ export function EditorCanvas({ isPreviewMode, dashboard }: EditorCanvasProps) {
         queryFn: getDashboards,
         // enabled: isHovered // Only fetch when hovered
     })
-
+    const [showChartSelector, setShowChartSelector] = useState<boolean>(false)
     // Mutation for copying component to another dashboard
     const copyToMutation = useMutation({
         mutationFn: ({ componentId, targetId }: { componentId: string; targetId: string }) =>
@@ -137,7 +137,10 @@ export function EditorCanvas({ isPreviewMode, dashboard }: EditorCanvasProps) {
             },
         })
     }
-
+ const handleQuery = (componentId: string, filter: any, shouldShow: boolean) => {
+        console.log(`组件 ${componentId} 触发了查询:`, filter, shouldShow)
+         setShowChartSelector(shouldShow)
+    }
     const gridBackgroundStyle = useMemo(() => {
         if (isPreviewMode || !width || !mounted) return {};
 
@@ -213,6 +216,7 @@ export function EditorCanvas({ isPreviewMode, dashboard }: EditorCanvasProps) {
 
     return (
         <>
+        <div className="flex h-full">
             <div
                 id="edit-charts-panne"
                 ref={containerRef}
@@ -223,7 +227,7 @@ export function EditorCanvas({ isPreviewMode, dashboard }: EditorCanvasProps) {
                 onClick={handleCanvasClick}
             >
                 <div className="mx-auto relative" style={{
-                    ...gridBackgroundStyle, // 应用动态生成的网格背景
+                    ...gridBackgroundStyle,
                 }}>
                     {mounted && (
                         <ReactGridLayout
@@ -256,6 +260,7 @@ export function EditorCanvas({ isPreviewMode, dashboard }: EditorCanvasProps) {
                                         onDuplicate={handleDuplicate}
                                         onCopyTo={handleCopyTo}
                                         onDelete={handleDelete}
+                                        onQuery={handleQuery}
                                     />
                                 </div>
                             ))}
@@ -264,7 +269,8 @@ export function EditorCanvas({ isPreviewMode, dashboard }: EditorCanvasProps) {
                 </div>
             </div>
             {/* 配置抽屉 */}
-            <ComponentConfigDrawer />
+            <ComponentConfigDrawer showChartSelector={showChartSelector}/>
+            </div>
         </>
     )
 }