feat: add chats type

Author: dolphin0618

src/frontend/platform/public/assets/dashboard/stacked-area.png

@@ -2,7 +2,6 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/bs-ui/popo
 import { cn } from '@/utils';
 import React, { useState } from 'react';
 import { ChartType } from '../../types/dataConfig';
-import { useEditorDashboardStore } from '@/store/dashboardStore';
 
 export const ChartItems = [
     {
@@ -25,8 +24,9 @@ export const ChartItems = [
         label: '折线图',
         data: [
             { type: ChartType.Line, label: '基础折线图' },
+            { type: ChartType.StackedLine, label: '堆叠折线图' },
             { type: ChartType.Area, label: '面积图' },
-            { type: ChartType.StackedLine, label: '堆叠折线图' }
+            { type: ChartType.StackedArea, label: '堆叠面积图' }
         ]
     },
     {
@@ -51,21 +51,16 @@ export interface PickerItem {
 }
 
 interface ComponentPickerProps {
-    items: PickerItem[];
-    onSelect: (id: string) => void;
+    onSelect: (data: { title: string, type: ChartType }) => void;
     children: React.ReactNode;
     className?: string;
 }
 
-const ComponentPicker = ({ children, className }: ComponentPickerProps) => {
+const ComponentPicker = ({ children, className, onSelect }: ComponentPickerProps) => {
     const [open, setOpen] = useState(false);
-    const { addComponentToLayout } = useEditorDashboardStore()
 
     const handleItemClick = (item) => {
-        addComponentToLayout({
-            title: item.label,
-            type: item.type
-        });
+        onSelect(item)
         setOpen(false);
     };
 
@@ -75,7 +70,7 @@ const ComponentPicker = ({ children, className }: ComponentPickerProps) => {
                 <div
                     key={item.type}
                     onClick={() => handleItemClick(item)}
-                    className="flex flex-col items-center group gap-2 outline-none cursor-pointer"
+                    className={`flex flex-col items-center group gap-2 outline-none cursor-pointer ${item.type === ChartType.StackedLine && 'mr-2'}`}
                 >
                     <div className="w-[88px] h-[86px] flex flex-col items-center justify-center border rounded-md group-hover:bg-blue-50 transition-colors group-hover:border-primary">
                         <img src={`${__APP_ENV__.BASE_URL}/assets/dashboard/${item.type}.png`} className="w-8 h-8 mb-2" />

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

@@ -183,7 +183,8 @@ export function EditorCanvas({ isLoading, isPreviewMode, dashboard }: EditorCanv
             backgroundImage: `url("data:image/svg+xml,${encodeURIComponent(svgString)}")`,
             backgroundRepeat: 'repeat',
             backgroundAttachment: 'local',
-            backgroundPosition: `${0}px ${0}px`
+            backgroundPosition: `${0}px ${0}px`,
+            height: '100%'
         };
     }, [width, isPreviewMode, mounted]);
 

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

@@ -31,7 +31,7 @@ export function EditorHeader({
     dashboard,
     dashboardId,
 }: EditorHeaderProps) {
-    const { hasUnsavedChanges, isSaving, reset, setIsSaving, setHasUnsavedChanges } = useEditorDashboardStore()
+    const { hasUnsavedChanges, isSaving, reset, setIsSaving, setHasUnsavedChanges, addComponentToLayout } = useEditorDashboardStore()
     const [isEditingTitle, setIsEditingTitle] = useState(false)
     const [title, setTitle] = useState(dashboard?.title || "")
     const inputRef = useRef<HTMLInputElement>(null)
@@ -251,11 +251,11 @@ export function EditorHeader({
                     />
                 ) : (
                     <h1
-                        className="font-medium truncate cursor-pointer transition-colors"
+                        className="max-w-96 font-medium truncate cursor-pointer transition-colors"
                         title={dashboard?.title}
                     // onDoubleClick={handleTitleDoubleClick}
                     >
-                        {dashboard?.title || "未命名看板"}
+                        {dashboard?.title}
                     </h1>
                 )}
                 <Badge variant="outline" className=" font-normal bg-gray-100">{getSaveStatus()}</Badge>
@@ -264,7 +264,7 @@ export function EditorHeader({
             {/* Middle section */}
             <div className="flex items-center gap-4">
                 {/* Add Component */}
-                <ComponentPicker >
+                <ComponentPicker onSelect={addComponentToLayout}>
                     <Button variant="outline" size="sm" className="gap-2">
                         <Grid2X2PlusIcon size="14" />
                         添加图表

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

@@ -1,5 +1,7 @@
 import { useEditorDashboardStore } from "@/store/dashboardStore"
 import { ChartItems } from "./ComponentPicker"
+import { cn } from "@/utils"
+import { ChartType } from "../../types/dataConfig"
 
 export default function Home() {
     const { addComponentToLayout } = useEditorDashboardStore()
@@ -13,7 +15,7 @@ export default function Home() {
 
     return (
         <div className="h-full bg-background flex items-center justify-center p-8">
-            <div className="w-full max-w-2xl">
+            <div className="w-full max-w-[720px]">
                 {/* Header */}
                 <div className="text-center mb-10">
                     <h1 className="text-lg text-foreground font-medium">请选择一个组件，开始搭建你的数据看板</h1>
@@ -25,7 +27,10 @@ export default function Home() {
                         <div
                             key={item.type}
                             onClick={() => handleItemClick(item)}
-                            className="w-[88px] h-[86px] flex flex-col items-center justify-center border rounded-md shadow-sm hover:shadow-lg transition-colors cursor-pointer">
+                            className={cn('w-[88px] h-[86px] flex flex-col items-center justify-center border rounded-md shadow-sm hover:shadow-lg transition-colors cursor-pointer',
+                                item.type === ChartType.GroupedHorizontalBar && 'mr-10',
+                                item.type === ChartType.Bar && 'ml-10',
+                            )}>
                             <img src={`${__APP_ENV__.BASE_URL}/assets/dashboard/${item.type}.png`} className="w-8 h-8 mb-2" />
                             <span className="text-[12px] text-gray-600 whitespace-nowrap">{item.label}</span>
                         </div>

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

@@ -109,6 +109,8 @@ export enum ChartType {
   Line = 'line',
   /** 面积图 */
   Area = 'area',
+  /** 堆叠面积图 */
+  StackedArea = 'stacked-area',
   /** 堆叠折线图 */
   StackedLine = 'stacked-line',
   /** 饼状图 */