feat(workspaces): add workspace management page

2026-03-12 20:51:41 +08:00
parent 2ffd1efc61
commit 5e4f4ec6e4
9 changed files with 224 additions and 33 deletions
--- a/src/pages/Workspaces.tsx
+++ b/src/pages/Workspaces.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Plus, Edit2, Trash2, Eye } from 'lucide-react';
+import { fetchWorkspaces, deleteWorkspace, type Workspace } from '../api/workspaces';
+import { useAppContext } from '../context/AppContext';
+import { useTranslation } from '../hooks/useTranslation';
+
+export default function Workspaces() {
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const navigate = useNavigate();
+  const { user } = useAppContext();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    loadWorkspaces();
+  }, []);
+
+  const loadWorkspaces = async () => {
+    try {
+      setIsLoading(true);
+      const data = await fetchWorkspaces();
+      setWorkspaces(data);
+    } catch (error) {
+      console.error('Error fetching workspaces', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!window.confirm(t.workspace?.confirmDelete)) return;
+    
+    try {
+      await deleteWorkspace(id);
+      setWorkspaces(workspaces.filter((w) => w.id !== id));
+    } catch (error) {
+      console.error('Error deleting workspace', error);
+      alert(t.workspace?.deleteError);
+    }
+  };
+
+  if (isLoading) {
+    return <div className="p-8 text-center text-slate-500">{t.workspace?.loading}</div>;
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto p-6">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title}</h1>
+          <p className="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle}</p>
+        </div>
+        <button
+          onClick={() => navigate('/workspaces/create')}
+          className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors font-medium"
+        >
+          <Plus className="h-5 w-5" />
+          {t.workspace?.createNew}
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {workspaces.map((workspace) => {
+          const isOwner = workspace.owner === user?.id || workspace.my_role === 'owner';
+          const isAdmin = workspace.my_role === 'admin' || isOwner;
+
+          return (
+            <div 
+              key={workspace.id} 
+              className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-5 shadow-sm flex flex-col"
+            >
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">
+                  {workspace.name}
+                </h3>
+                <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
+                  {workspace.description || t.workspace?.noDescription}
+                </p>
+              </div>
+
+              <div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
+                <button
+                  onClick={() => navigate(`/workspaces/${workspace.id}`)}
+                  className="p-2 text-slate-500 hover:text-blue-600 dark:hover:text-blue-400 bg-slate-50 dark:bg-slate-800 rounded-lg transition-colors"
+                  title={t.workspace?.view}
+                >
+                  <Eye className="h-4 w-4" />
+                </button>
+
+                {isAdmin && (
+                  <button
+                    onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
+                    className="p-2 text-slate-500 hover:text-emerald-600 dark:hover:text-emerald-400 bg-slate-50 dark:bg-slate-800 rounded-lg transition-colors"
+                    title={t.workspace?.edit}
+                  >
+                    <Edit2 className="h-4 w-4" />
+                  </button>
+                )}
+
+                {isOwner && (
+                  <button
+                    onClick={() => handleDelete(workspace.id)}
+                    className="p-2 text-slate-500 hover:text-red-600 dark:hover:text-red-400 bg-slate-50 dark:bg-slate-800 rounded-lg transition-colors"
+                    title={t.workspace?.delete}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+
+        {workspaces.length === 0 && (
+          <div className="col-span-full py-12 text-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-xl">
+            <p className="text-slate-500 dark:text-slate-400">{t.workspace?.emptyState}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}