v1.3.2 — 新增按钮移到右上角 + 收起表单 + 阶段筛选

static/app.js

@@ -176,7 +176,7 @@ window.switchTab = switchTab;
 function renderProjects() {
   const items = state.data.operations;
   const rows = items.map((x) => [
-    `<strong>${x.project_name}</strong><p class="text-xs text-slate-500">${x.project_version}</p>`,
+    `<strong>${x.project_name}</strong>`,
     text(x.customer_need || x.notes),
     badge(x.current_stage || x.project_status),
     x.expected_contract_amount ? money(x.expected_contract_amount) : "—",
@@ -184,13 +184,22 @@ function renderProjects() {
     `<button class="btn btn-ghost btn-sm text-blue-600" onclick="event.stopPropagation(); showTaskModal(${x.id})"><i data-lucide="eye"></i>查看</button>`
   ]);
   document.querySelector("#projects").innerHTML = `<div class="grid gap-4">
+    <div class="flex items-center justify-between">
+      <div class="flex gap-2">
+        ${[["all","全部"],["项目准备","准备"],["项目执行","执行"],["项目验收","验收"],["验收完毕","完毕"]].map(([k,v]) => `<button class="btn ${state.opFilter === k ? "btn-primary" : "btn-ghost"} btn-sm" onclick="state.opFilter='${k}'; renderProjects()">${v}</button>`).join("")}
+      </div>
+      <button class="btn btn-primary" onclick="document.querySelector('#project-form').classList.toggle('hidden')">
+        <i data-lucide="plus"></i>新增项目
+      </button>
+    </div>
+    <div id="project-form" class="hidden">
       ${card(formHtml([
         { label: "项目名称", input: `<input name="project_name" required>` },
-      { label: "项目版本", input: `<input name="project_version" value="v1.0">` },
         { label: "当前阶段", input: `<select name="current_stage"><option>项目准备</option><option>项目执行</option><option>项目验收</option><option>验收完毕</option></select>` },
         { label: "项目金额", input: `<input name="expected_contract_amount" type="number" step="0.01" placeholder="万元">` },
         { label: "负责人", input: `<input name="owner">` },
-    ], { handler: "createOperation", text: "新增项目" }), "p-4")}
+      ], { handler: "createOperation", text: "确认新增" }), "p-4")}
+    </div>
     ${renderTable(["项目", "项目说明", "当前阶段", "项目金额", "负责人", "进展"], rows, items.map((x) => ({ resource: "operations", id: x.id })))}
   </div>`;
 }
@@ -199,11 +208,12 @@ function showTaskModal(projectId) {
   const project = state.data.operations.find((x) => x.id === projectId);
   const tasks = (state.data.tasks || []).filter((t) => t.project_id === projectId);
   const phases = ["项目准备", "项目执行", "项目验收", "验收完毕"];
-  document.querySelector("#taskModal").innerHTML = `<div class="task-overlay" onclick="closeTaskModal()"><div class="task-panel" onclick="event.stopPropagation()"><div class="flex items-center justify-between border-b border-slate-200 px-6 py-4"><h2 class="text-lg font-bold">${project.project_name} · 任务清单</h2><button class="btn btn-ghost btn-sm" onclick="closeTaskModal()">关闭</button></div><div class="grid gap-4 p-6">${phases.map((phase) => {
+  document.querySelector("#taskModal").innerHTML = `<div class="task-overlay" onclick="closeTaskModal()"><div class="task-panel" onclick="event.stopPropagation()"><div class="task-header"><h2 class="task-title">${project.project_name}  ·  任务清单</h2><button class="task-close" onclick="closeTaskModal()"><i data-lucide="x"></i></button></div><div class="task-body">${phases.map((phase) => {
     const pt = tasks.filter((t) => t.phase === phase);
-    return `<div class="rounded-lg border border-slate-200"><div class="rounded-t-lg bg-slate-50 px-4 py-2.5 font-semibold text-slate-700 text-sm">${phase}${pt.length ? ` <span class="text-slate-400 font-normal">(${pt.filter(t=>t.task).length}/${pt.length})</span>` : ""}</div><div class="p-3 grid gap-2">${pt.length ? pt.map((t) => `<div class="flex items-start gap-3 rounded-md bg-white px-3 py-2 text-sm"><input type="checkbox" class="mt-0.5" ${t.task ? "" : "checked disabled"}><div class="flex-1"><p class="text-slate-800">${t.milestone ? `<strong>${t.milestone}</strong>：` : ""}${t.task}</p>${t.owner ? `<p class="text-xs text-slate-400 mt-0.5">👤 ${t.owner}${t.due_date ? " · 📅 " + t.due_date : ""}</p>` : ""}</div></div>`).join("") : `<p class="text-sm text-slate-400 py-2 text-center">暂无任务</p>`}</div></div>`;
+    return `<div class="task-group"><div class="task-group-hd"><span class="task-group-icon"><i data-lucide="layers"></i></span><span class="task-group-label">${phase}</span><span class="task-group-n">${pt.length}</span></div><div class="task-group-list">${pt.length ? pt.map((t) => `<div class="task-row" data-id="${t.id}"><span class="task-dot"><i data-lucide="${t.status === 'done' ? 'check-circle' : 'circle'}"></i></span><span class="task-name">${t.task}</span></div>`).join("") : `<div class="task-none">暂无任务</div>`}</div><button class="task-group-add" onclick="event.stopPropagation()">+ 添加任务</button></div>`;
   }).join("")}</div></div></div>`;
   document.querySelector("#taskModal").classList.add("active");
+  if (window.lucide) window.lucide.createIcons();
 }
 window.closeTaskModal = () => document.querySelector("#taskModal").classList.remove("active");
 

static/styles.css

@@ -490,15 +490,54 @@ td {
   margin: 4px 0;
 }
 
-/* Task Modal */
+/* Task Modal — Plane style */
 .task-modal { display: none; }
 .task-modal.active { display: block; }
 .task-overlay {
-  position: fixed; inset: 0; background: rgba(15,23,42,0.4); z-index: 200;
+  position: fixed; inset: 0; background: rgba(10,12,16,0.5); z-index: 200;
   display: flex; align-items: flex-start; justify-content: center;
-  padding-top: 60px; overflow-y: auto;
+  padding-top: 48px; overflow-y: auto;
 }
 .task-panel {
-  background: white; border-radius: 12px; width: 800px; max-width: 90vw;
+  background: #18191c; border-radius: 12px; width: 600px; max-width: 92vw;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.15); margin-bottom: 60px;
+  box-shadow: 0 24px 80px rgba(0,0,0,0.4); margin-bottom: 48px;
 }
+.task-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 20px; border-bottom: 1px solid #2a2d34;
+}
+.task-title { color: #e4e5e7; font-size: 15px; font-weight: 600; }
+.task-close {
+  color: #6b6d75; background: none; border: none; cursor: pointer;
+  padding: 4px; border-radius: 6px; display: flex;
+}
+.task-close:hover { color: #e4e5e7; background: #2a2d34; }
+.task-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
+.task-group {
+  background: #1e2025; border-radius: 8px;
+  border: 1px solid #2a2d34; overflow: hidden;
+}
+.task-group-hd {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 14px;
+}
+.task-group-icon { color: #6b6d75; display: flex; }
+.task-group-label { color: #aeafb4; font-size: 13px; font-weight: 600; }
+.task-group-n {
+  background: #2a2d34; color: #6b6d75; font-size: 11px;
+  padding: 1px 7px; border-radius: 10px;
+}
+.task-group-list { display: flex; flex-direction: column; }
+.task-row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 14px; border-top: 1px solid #24272d;
+}
+.task-dot { display: flex; color: #4b4d54; }
+.task-name { color: #c5c6ca; font-size: 13px; }
+.task-none { color: #4b4d54; font-size: 13px; padding: 12px 14px; text-align: center; border-top: 1px solid #24272d; }
+.task-group-add {
+  display: block; width: 100%; padding: 10px; text-align: center;
+  color: #6b6d75; font-size: 13px; background: none; border: none;
+  border-top: 1px solid #24272d; cursor: pointer;
+}
+.task-group-add:hover { color: #e4e5e7; background: #24272d; }