admin/DataClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: project as seperated workspace

Browse Source
This commit is contained in:
qixinbo
2026-03-22 16:48:41 +08:00
parent 995de29981
commit 6f074df40e
9 changed files with 206 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+5 -3
View File
@@ -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}
frontend/src/components/ProjectSwitcher.tsx
+1 -1
View File
@@ -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" />
frontend/src/components/Sidebar.tsx
+8 -4
View File
@@ -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) {
frontend/src/i18n/locales/en.json
+1
View File
@@ -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?",
frontend/src/i18n/locales/zh.json
+1
View File
@@ -8,6 +8,7 @@
"unpin": "取消置顶",
"archive": "归档",
"unarchive": "取消归档",
"delete": "删除",
"deleteSession": "删除会话",
"confirmDeleteSession": "确定要删除这个会话吗？",
"confirmBatchDeleteSessions": "确定要删除选中的 {{count}} 个会话吗？",
frontend/src/pages/Dashboard.tsx
+122 -4
View File
@@ -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}
frontend/src/store/dashboardStore.ts
+16
View File
@@ -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) => {