webui split: separate task management page from task audit (audit-only)

2026-05-07 03:57:29 +08:00 · 2026-02-28 09:00:27 +00:00
parent 44037863f1
commit 433a867d3f
5 changed files with 98 additions and 34 deletions
--- a/webui/src/pages/Tasks.tsx
+++ b/webui/src/pages/Tasks.tsx
@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAppContext } from '../context/AppContext';
+
+type TaskItem = {
+  id?: string;
+  content?: string;
+  priority?: string;
+  status?: string;
+  source?: string;
+  due_at?: string;
+  updated_at?: string;
+};
+
+const Tasks: React.FC = () => {
+  const { t } = useTranslation();
+  const { q } = useAppContext();
+  const [items, setItems] = useState<TaskItem[]>([]);
+  const [selected, setSelected] = useState<TaskItem | null>(null);
+  const [draft, setDraft] = useState<TaskItem>({ id: '', content: '', priority: 'normal', status: 'todo', source: 'manual', due_at: '' });
+
+  const load = async () => {
+    const r = await fetch(`/webui/api/tasks${q}`);
+    if (!r.ok) return;
+    const j = await r.json();
+    const arr = Array.isArray(j.items) ? j.items : [];
+    setItems(arr);
+    if (arr.length > 0) {
+      setSelected(arr[0]);
+      setDraft(arr[0]);
+    }
+  };
+
+  useEffect(() => { load(); }, [q]);
+
+  const save = async (action: 'create' | 'update' | 'delete') => {
+    const payload: any = { action };
+    if (action === 'create') payload.item = draft;
+    if (action === 'update') { payload.id = draft.id; payload.item = draft; }
+    if (action === 'delete') payload.id = draft.id;
+    const r = await fetch(`/webui/api/tasks${q}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+    if (!r.ok) return;
+    await load();
+  };
+
+  return (
+    <div className="h-full p-4 md:p-6 flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-xl md:text-2xl font-semibold">{t('tasks')}</h1>
+        <button onClick={() => setDraft({ id: '', content: '', priority: 'normal', status: 'todo', source: 'manual', due_at: '' })} className="px-3 py-1.5 rounded-lg bg-emerald-700/80 hover:bg-emerald-600 text-sm">{t('newTask')}</button>
+      </div>
+
+      <div className="flex-1 min-h-0 grid grid-cols-1 lg:grid-cols-[340px_1fr] gap-4">
+        <div className="border border-zinc-800 rounded-xl bg-zinc-900/40 overflow-hidden">
+          <div className="px-3 py-2 border-b border-zinc-800 text-xs text-zinc-400 uppercase tracking-wider">{t('taskList')}</div>
+          <div className="overflow-y-auto max-h-[70vh]">
+            {items.map((it, idx) => (
+              <button key={it.id || idx} onClick={() => { setSelected(it); setDraft(it); }} className={`w-full text-left px-3 py-2 border-b border-zinc-800/50 hover:bg-zinc-800/40 ${selected?.id === it.id ? 'bg-indigo-500/15' : ''}`}>
+                <div className="text-sm text-zinc-100 truncate">{it.id || '-'}</div>
+                <div className="text-xs text-zinc-400 truncate">{it.status} · {it.priority} · {it.source}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="border border-zinc-800 rounded-xl bg-zinc-900/40 p-4 space-y-3">
+          <div className="text-xs text-zinc-400 uppercase tracking-wider">{t('taskCrud')}</div>
+          <input value={draft.id || ''} onChange={(e)=>setDraft({ ...draft, id: e.target.value })} placeholder="id" className="w-full px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
+          <textarea value={draft.content || ''} onChange={(e)=>setDraft({ ...draft, content: e.target.value })} placeholder="content" className="w-full px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded min-h-[120px]" />
+          <div className="grid grid-cols-3 gap-2">
+            <input value={draft.priority || ''} onChange={(e)=>setDraft({ ...draft, priority: e.target.value })} placeholder="priority" className="px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
+            <input value={draft.status || ''} onChange={(e)=>setDraft({ ...draft, status: e.target.value })} placeholder="status" className="px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
+            <input value={draft.source || ''} onChange={(e)=>setDraft({ ...draft, source: e.target.value })} placeholder="source" className="px-2 py-1 text-xs bg-zinc-900 border border-zinc-700 rounded" />
+          </div>
+          <div className="flex items-center gap-2">
+            <button onClick={()=>save('create')} className="px-2 py-1 text-xs rounded bg-emerald-700/70 hover:bg-emerald-600">{t('createTask')}</button>
+            <button onClick={()=>save('update')} className="px-2 py-1 text-xs rounded bg-indigo-700/70 hover:bg-indigo-600">{t('updateTask')}</button>
+            <button onClick={()=>save('delete')} className="px-2 py-1 text-xs rounded bg-red-700/70 hover:bg-red-600">{t('deleteTask')}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Tasks;