UI: project as seperated workspace

2026-03-22 16:48:41 +08:00
parent 995de29981
commit 6f074df40e
9 changed files with 206 additions and 31 deletions
@@ -32,9 +32,11 @@ function MainLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen w-full bg-background text-foreground overflow-hidden">
      <Sidebar />
-      <main className="flex-1 flex flex-col overflow-hidden h-screen">
-        <div className="flex justify-center border-b">
-          <ProjectSwitcher />
+      <main className="flex-1 flex flex-col overflow-hidden h-screen relative">
+        <div className="absolute top-0 left-0 right-0 h-14 flex justify-center items-center pointer-events-none z-30">
+          <div className="pointer-events-auto">
+            <ProjectSwitcher />
+          </div>
        </div>
        <div className="flex-1 overflow-hidden">
          {children}
@@ -40,7 +40,7 @@ export function ProjectSwitcher() {
  };

  return (
-    <div className="flex items-center gap-2 px-4 py-2 bg-background h-12">
+    <div className="flex items-center gap-2 bg-transparent h-10">
      <DropdownMenu>
        <DropdownMenuTrigger className="flex h-8 items-center gap-1 rounded-md px-2 font-semibold hover:bg-accent hover:text-accent-foreground outline-none transition-colors">
          <Folder className="h-4 w-4 mr-1 text-blue-500" />
@@ -359,7 +359,7 @@ function DashboardSection({
                    className="text-red-600 focus:text-red-600 focus:bg-red-50"
                  >
                    <Trash2 className="mr-2 h-4 w-4" />
-                    <span>{t('deleteSession')}</span>
+                    <span>{t('delete')}</span>
                  </DropdownMenuItem>
                </DropdownMenuContent>
                </DropdownMenu>
@@ -409,7 +409,10 @@ function SidebarBody() {

  const fetchSessions = async () => {
    try {
-      const data = await api.get<SessionInfo[]>("/nanobot/sessions");
+      const url = currentProject 
+        ? `/nanobot/sessions?project_id=${currentProject.id}`
+        : "/nanobot/sessions";
+      const data = await api.get<SessionInfo[]>(url);
      setSessions(data);
    } catch (e) {
      console.error("Failed to fetch sessions", e);
@@ -418,7 +421,7 @@ function SidebarBody() {

  useEffect(() => {
    fetchSessions();
-  }, [location.pathname, location.search]);
+  }, [location.pathname, location.search, currentProject?.id]);

  useEffect(() => {
    const onFocus = () => fetchSessions();
@@ -453,7 +456,8 @@ function SidebarBody() {
  const handleNewThread = async () => {
    const newSessionId = `api:${Date.now()}`;
    try {
-      await api.post(`/nanobot/sessions/${encodeURIComponent(newSessionId)}/ensure`, {});
+      const payload = currentProject ? { project_id: currentProject.id } : {};
+      await api.post(`/nanobot/sessions/${encodeURIComponent(newSessionId)}/ensure`, payload);
      await fetchSessions();
      window.dispatchEvent(new Event("nanobot:sessions-changed"));
    } catch (e) {
@@ -8,6 +8,7 @@
  "unpin": "Unpin",
  "archive": "Archive",
  "unarchive": "Unarchive",
+  "delete": "Delete",
  "deleteSession": "Delete Session",
  "confirmDeleteSession": "Are you sure you want to delete this session?",
  "confirmBatchDeleteSessions": "Are you sure you want to delete the selected {{count}} threads?",
@@ -8,6 +8,7 @@
  "unpin": "取消置顶",
  "archive": "归档",
  "unarchive": "取消归档",
+  "delete": "删除",
  "deleteSession": "删除会话",
  "confirmDeleteSession": "确定要删除这个会话吗？",
  "confirmBatchDeleteSessions": "确定要删除选中的 {{count}} 个会话吗？",
@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from 'react';
+import { useState, useMemo, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Responsive, WidthProvider } from 'react-grid-layout/legacy';
 import { useDashboardStore } from '../store/dashboardStore';
@@ -7,7 +7,9 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/com
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { X } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { X, Type, AlignLeft, AlignCenter, AlignRight, Bold, Italic, Underline } from "lucide-react";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } from 'recharts';
 import { VegaChart } from "@/components/VegaChart";
 import 'react-grid-layout/css/styles.css';
@@ -45,9 +47,13 @@ function inferChartKeys(data: Record<string, unknown>[]) {

 export function Dashboard() {
  const { t } = useTranslation();
-  const { dashboards, activeDashboardId, removeChart, updateLayout, loadDashboards } = useDashboardStore();
+  const { dashboards, activeDashboardId, removeChart, updateLayout, loadDashboards, renameDashboard, updateDashboardTitleStyle } = useDashboardStore();
  const { currentProject } = useProjectStore();

+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editTitle, setEditTitle] = useState("");
+  const titleInputRef = useRef<HTMLInputElement>(null);
+
  useEffect(() => {
    if (currentProject) {
      loadDashboards(currentProject.id);
@@ -85,6 +91,19 @@ export function Dashboard() {
    }
  };

+  const handleTitleSubmit = () => {
+    if (activeDashboard && currentProject && editTitle.trim()) {
+      renameDashboard(activeDashboard.id, editTitle.trim(), currentProject.id);
+    }
+    setIsEditingTitle(false);
+  };
+
+  const handleStyleChange = (key: string, value: string) => {
+    if (activeDashboard && currentProject) {
+      updateDashboardTitleStyle(activeDashboard.id, { [key]: value }, currentProject.id);
+    }
+  };
+
  if (!currentProject) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
@@ -113,7 +132,106 @@ export function Dashboard() {

  return (
    <div className="p-4 h-full overflow-y-auto">
-      <h1 className="text-2xl font-bold mb-4">{activeDashboard.name || t('dashboardMenu')}</h1>
+      <div className="mb-4 flex items-center justify-between group">
+        {isEditingTitle ? (
+          <Input
+            ref={titleInputRef}
+            value={editTitle}
+            onChange={(e) => setEditTitle(e.target.value)}
+            onBlur={handleTitleSubmit}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleTitleSubmit();
+              if (e.key === 'Escape') setIsEditingTitle(false);
+            }}
+            className="text-2xl font-bold h-auto py-1 px-2 -ml-2 bg-transparent border-transparent hover:border-zinc-200 focus:border-indigo-500 focus:ring-indigo-500 max-w-md"
+          />
+        ) : (
+          <div className="flex items-center gap-2">
+            <h1 
+              className="text-2xl font-bold cursor-pointer hover:bg-zinc-100 px-2 py-1 -ml-2 rounded transition-colors"
+              style={{
+                fontSize: activeDashboard.titleStyle?.fontSize || '1.5rem',
+                fontWeight: activeDashboard.titleStyle?.fontWeight || '700',
+                color: activeDashboard.titleStyle?.color || 'inherit',
+                fontStyle: activeDashboard.titleStyle?.fontStyle || 'normal',
+                textDecoration: activeDashboard.titleStyle?.textDecoration || 'none',
+                textAlign: activeDashboard.titleStyle?.textAlign || 'left',
+              }}
+              onClick={() => {
+                setEditTitle(activeDashboard.name || t('dashboardMenu'));
+                setIsEditingTitle(true);
+                setTimeout(() => titleInputRef.current?.focus(), 0);
+              }}
+            >
+              {activeDashboard.name || t('dashboardMenu')}
+            </h1>
+            <Popover>
+              <PopoverTrigger>
+                <div className="h-8 w-8 flex items-center justify-center rounded-md hover:bg-zinc-100 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <Type className="h-4 w-4 text-zinc-500" />
+                </div>
+              </PopoverTrigger>
+              <PopoverContent className="w-64 p-3" align="start">
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-xs font-medium text-zinc-500">{t('fontSize') || 'Font Size'}</label>
+                    <div className="flex items-center gap-2">
+                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.25rem')}>S</Button>
+                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.5rem')}>M</Button>
+                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.875rem')}>L</Button>
+                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '2.25rem')}>XL</Button>
+                    </div>
+                  </div>
+                  
+                  <div className="space-y-2">
+                    <label className="text-xs font-medium text-zinc-500">{t('textStyle') || 'Text Style'}</label>
+                    <div className="flex items-center gap-2">
+                      <Button 
+                        variant={activeDashboard.titleStyle?.fontWeight === 'normal' ? 'default' : 'outline'} 
+                        size="icon" 
+                        className="h-8 w-8"
+                        onClick={() => handleStyleChange('fontWeight', activeDashboard.titleStyle?.fontWeight === 'normal' ? '700' : 'normal')}
+                      >
+                        <Bold className="h-4 w-4" />
+                      </Button>
+                      <Button 
+                        variant={activeDashboard.titleStyle?.fontStyle === 'italic' ? 'default' : 'outline'} 
+                        size="icon" 
+                        className="h-8 w-8"
+                        onClick={() => handleStyleChange('fontStyle', activeDashboard.titleStyle?.fontStyle === 'italic' ? 'normal' : 'italic')}
+                      >
+                        <Italic className="h-4 w-4" />
+                      </Button>
+                      <Button 
+                        variant={activeDashboard.titleStyle?.textDecoration === 'underline' ? 'default' : 'outline'} 
+                        size="icon" 
+                        className="h-8 w-8"
+                        onClick={() => handleStyleChange('textDecoration', activeDashboard.titleStyle?.textDecoration === 'underline' ? 'none' : 'underline')}
+                      >
+                        <Underline className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-xs font-medium text-zinc-500">{t('textColor') || 'Text Color'}</label>
+                    <div className="flex items-center gap-2">
+                      {['inherit', '#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6'].map(color => (
+                        <button
+                          key={color}
+                          className={`w-6 h-6 rounded-full border border-zinc-200 flex items-center justify-center ${activeDashboard.titleStyle?.color === color ? 'ring-2 ring-indigo-500 ring-offset-1' : ''}`}
+                          style={{ backgroundColor: color === 'inherit' ? '#18181b' : color }}
+                          onClick={() => handleStyleChange('color', color)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
+      </div>
      <ResponsiveGridLayout
        className="layout"
        layouts={layouts}
@@ -17,6 +17,14 @@ export interface ChartConfig {
 export interface DashboardConfig {
  id: string;
  name: string;
+  titleStyle?: {
+    fontSize?: string;
+    fontWeight?: string;
+    color?: string;
+    textAlign?: 'left' | 'center' | 'right';
+    fontStyle?: string;
+    textDecoration?: string;
+  };
  createdAt: number;
  charts: ChartConfig[];
 }
@@ -28,6 +36,7 @@ interface DashboardState {
  createDashboard: (name: string, projectId: number) => string;
  deleteDashboard: (id: string, projectId: number) => void;
  renameDashboard: (id: string, newName: string, projectId: number) => void;
+  updateDashboardTitleStyle: (id: string, style: DashboardConfig['titleStyle'], projectId: number) => void;
  setActiveDashboard: (id: string | null) => void;
  addChart: (chart: Omit<ChartConfig, 'layout'>, dashboardId: string, projectId: number) => void;
  removeChart: (chartId: string, dashboardId: string, projectId: number) => void;
@@ -133,6 +142,13 @@ export const useDashboardStore = create<DashboardState>((set) => ({
    saveDashboardsToStorage(nextDashboards, projectId);
    return { dashboards: nextDashboards };
  }),
+  updateDashboardTitleStyle: (id, style, projectId) => set((state) => {
+    const nextDashboards = state.dashboards.map((d) => 
+      d.id === id ? { ...d, titleStyle: { ...d.titleStyle, ...style } } : d
+    );
+    saveDashboardsToStorage(nextDashboards, projectId);
+    return { dashboards: nextDashboards };
+  }),
  setActiveDashboard: (id) => set({ activeDashboardId: id }),
  addChart: (chart, dashboardId, projectId) => set((state) => {
    const nextDashboards = state.dashboards.map((d) => {