feat(tasktree): import MDTODO files and reports
This commit is contained in:
root
@@ -60,6 +60,7 @@ export type TaskTreeCommand =
|
||||
| { operation: "task.delete"; taskId: string }
|
||||
| { operation: "milestone.create"; groupId: string; title: string; occursAt: string; taskId?: string }
|
||||
| { operation: "report.create"; taskId: string; title: string; body: string; status?: string }
|
||||
| { operation: "mdtodo.import"; sourcePath: string; markdown: string; reports: Array<{ href: string; sourcePath: string; body: string }>; groupName?: string; dryRun?: boolean }
|
||||
| { operation: "timeline.get"; groupId: string }
|
||||
| { operation: "workflow.start"; taskId: string };
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Client, Connection } from "@temporalio/client";
|
||||
|
||||
import type { TaskTreeCommand, TaskTreeResult } from "./contracts.ts";
|
||||
import { parseMdtodoImport } from "./mdtodo-import.ts";
|
||||
import { TaskTreeStore } from "./store.ts";
|
||||
|
||||
export type TaskTreeDispatcherOptions = {
|
||||
@@ -26,6 +27,10 @@ export function createTaskTreeDispatcher(options: TaskTreeDispatcherOptions) {
|
||||
else if (operation === "task.delete") data = { deleted: await store.deleteTask(command.taskId) };
|
||||
else if (operation === "milestone.create") data = await store.createMilestone({ ...command, title: requiredText(command.title, "title"), occursAt: validDate(command.occursAt, "occursAt") });
|
||||
else if (operation === "report.create") data = await store.createReport({ ...command, title: requiredText(command.title, "title"), body: requiredText(command.body, "body") });
|
||||
else if (operation === "mdtodo.import") {
|
||||
const plan = parseMdtodoImport(command);
|
||||
data = command.dryRun ? { dryRun: true, ...plan, tasks: undefined } : await store.importMdtodo(plan);
|
||||
}
|
||||
else if (operation === "timeline.get") data = required(await store.timeline(command.groupId), "group_not_found", "taskgroup was not found");
|
||||
else if (operation === "workflow.start") data = await startTaskWorkflow(options, command.taskId);
|
||||
else throw codedError("unsupported_operation", `unsupported operation: ${String(operation)}`);
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import assert from "node:assert/strict";
|
||||
import { test } from "bun:test";
|
||||
|
||||
import { parseMdtodoImport } from "./mdtodo-import.ts";
|
||||
|
||||
test("MDTODO import preserves status, flattens deep Rxx tasks, and attaches reports", () => {
|
||||
const plan = parseMdtodoImport({
|
||||
sourcePath: "/tmp/demo/MDTODO.md",
|
||||
markdown: `# Demo\n\n## R1 Root [in_progress]\n\nSee [任务报告](./details/R1_Task_Report.md).\n\n### R1.1 Child [completed]\n\n#### R1.1.1 Deep child [blocked]\n`,
|
||||
reports: [{ href: "./details/R1_Task_Report.md", sourcePath: "/tmp/demo/details/R1_Task_Report.md", body: "# R1 report\n\nPassed." }]
|
||||
});
|
||||
|
||||
assert.equal(plan.groupName, "Demo");
|
||||
assert.deepEqual(plan.summary, { taskCount: 1, subtaskCount: 2, reportCount: 1, missingReportCount: 0, flattenedTaskCount: 1, warningCount: 1 });
|
||||
assert.equal(plan.tasks[0]?.status, "in_progress");
|
||||
assert.equal(plan.tasks[1]?.status, "completed");
|
||||
assert.equal(plan.tasks[2]?.status, "blocked");
|
||||
assert.equal(plan.tasks[2]?.parentSourceId, "R1");
|
||||
assert.equal(plan.tasks[0]?.reports[0]?.body, "# R1 report\n\nPassed.");
|
||||
});
|
||||
|
||||
test("MDTODO import reports missing linked report files", () => {
|
||||
const plan = parseMdtodoImport({
|
||||
sourcePath: "/tmp/demo/MDTODO.md",
|
||||
markdown: "# Demo\n\n## R1 Root\n\n[Task report](./R1_Task_Report.md)\n",
|
||||
reports: []
|
||||
});
|
||||
assert.equal(plan.summary.missingReportCount, 1);
|
||||
assert.equal(plan.warnings[0]?.code, "report_file_missing");
|
||||
});
|
||||
@@ -0,0 +1,191 @@
|
||||
import { readFile } from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
|
||||
import type { TaskStatus } from "./contracts.ts";
|
||||
|
||||
export type MdtodoReportSource = { href: string; sourcePath: string; body: string };
|
||||
export type MdtodoImportPayload = {
|
||||
sourcePath: string;
|
||||
markdown: string;
|
||||
reports: MdtodoReportSource[];
|
||||
groupName?: string;
|
||||
dryRun?: boolean;
|
||||
};
|
||||
|
||||
export type MdtodoImportTask = {
|
||||
sourceId: string;
|
||||
parentSourceId: string | null;
|
||||
title: string;
|
||||
description: string;
|
||||
status: TaskStatus;
|
||||
reports: Array<{ title: string; body: string; status: string }>;
|
||||
};
|
||||
|
||||
export type MdtodoImportPlan = {
|
||||
sourcePath: string;
|
||||
groupName: string;
|
||||
groupDescription: string;
|
||||
parserMode: "rxx" | "legacy-checkbox";
|
||||
tasks: MdtodoImportTask[];
|
||||
summary: {
|
||||
taskCount: number;
|
||||
subtaskCount: number;
|
||||
reportCount: number;
|
||||
missingReportCount: number;
|
||||
flattenedTaskCount: number;
|
||||
warningCount: number;
|
||||
};
|
||||
warnings: Array<{ code: string; message: string; sourceId?: string; href?: string }>;
|
||||
};
|
||||
|
||||
const rxxHeadingPattern = /^(#{2,})\s+(R\d+(?:\.\d+)*)(?:\s+(.*?))?\s*$/iu;
|
||||
const checkboxPattern = /^(\s*)(?:[-*+]|\d+[.)])\s+\[([ xX-])\]\s+(.*)$/u;
|
||||
const markdownLinkPattern = /\[([^\]]*)\]\(([^)]+)\)/gu;
|
||||
|
||||
export async function loadMdtodoImportPayload(filePath: string, options: { groupName?: string; dryRun?: boolean } = {}): Promise<MdtodoImportPayload> {
|
||||
const sourcePath = path.resolve(filePath);
|
||||
const markdown = await readFile(sourcePath, "utf8");
|
||||
const reports: MdtodoReportSource[] = [];
|
||||
const seen = new Set<string>();
|
||||
for (const link of reportLinks(markdown)) {
|
||||
const reportPath = path.resolve(path.dirname(sourcePath), link.href);
|
||||
if (seen.has(reportPath)) continue;
|
||||
seen.add(reportPath);
|
||||
try {
|
||||
reports.push({ href: link.href, sourcePath: reportPath, body: await readFile(reportPath, "utf8") });
|
||||
} catch {
|
||||
// Missing report files are reported by the pure parser so dry-run and import agree.
|
||||
}
|
||||
}
|
||||
return { sourcePath, markdown, reports, groupName: options.groupName, dryRun: options.dryRun };
|
||||
}
|
||||
|
||||
export function parseMdtodoImport(payload: MdtodoImportPayload): MdtodoImportPlan {
|
||||
const lines = String(payload.markdown ?? "").split(/\r?\n/u);
|
||||
const rxxBlocks = collectRxxBlocks(lines);
|
||||
const parsed = rxxBlocks.length ? parseRxx(lines, rxxBlocks, payload) : parseCheckboxes(lines, payload);
|
||||
if (!parsed.tasks.length) throw codedError("mdtodo_tasks_not_found", "MDTODO file does not contain Rxx headings or checkbox tasks");
|
||||
const reportCount = parsed.tasks.reduce((count, task) => count + task.reports.length, 0);
|
||||
const missingReportCount = parsed.warnings.filter((warning) => warning.code === "report_file_missing").length;
|
||||
const flattenedTaskCount = parsed.warnings.filter((warning) => warning.code === "nested_task_flattened").length;
|
||||
return {
|
||||
sourcePath: payload.sourcePath,
|
||||
groupName: cleanTitle(payload.groupName || documentTitle(lines, payload.sourcePath)),
|
||||
groupDescription: `Imported from MDTODO: ${payload.sourcePath}`,
|
||||
parserMode: rxxBlocks.length ? "rxx" : "legacy-checkbox",
|
||||
tasks: parsed.tasks,
|
||||
summary: {
|
||||
taskCount: parsed.tasks.filter((task) => !task.parentSourceId).length,
|
||||
subtaskCount: parsed.tasks.filter((task) => task.parentSourceId).length,
|
||||
reportCount,
|
||||
missingReportCount,
|
||||
flattenedTaskCount,
|
||||
warningCount: parsed.warnings.length
|
||||
},
|
||||
warnings: parsed.warnings.slice(0, 100)
|
||||
};
|
||||
}
|
||||
|
||||
function parseRxx(lines: string[], blocks: RxxBlock[], payload: MdtodoImportPayload) {
|
||||
const tasks: MdtodoImportTask[] = [];
|
||||
const warnings: MdtodoImportPlan["warnings"] = [];
|
||||
const roots = new Set(blocks.filter((block) => rxxDepth(block.sourceId) === 0).map((block) => block.sourceId));
|
||||
for (const block of blocks) {
|
||||
const depth = rxxDepth(block.sourceId);
|
||||
const rootId = `R${block.sourceId.slice(1).split(".")[0]}`;
|
||||
const parentSourceId = depth > 0 && roots.has(rootId) ? rootId : null;
|
||||
if (depth > 1) warnings.push({ code: "nested_task_flattened", sourceId: block.sourceId, message: `${block.sourceId} was flattened to a subtask of ${rootId}` });
|
||||
if (depth > 0 && !parentSourceId) warnings.push({ code: "parent_task_missing", sourceId: block.sourceId, message: `${block.sourceId} has no importable root task and was imported as a task` });
|
||||
const description = lines.slice(block.lineIndex + 1, block.endLine).join("\n").trim();
|
||||
tasks.push({
|
||||
sourceId: block.sourceId,
|
||||
parentSourceId,
|
||||
title: cleanTitle(`${block.sourceId} ${block.title || conciseBodyTitle(description)}`),
|
||||
description,
|
||||
status: block.status,
|
||||
reports: reportsForTask(description, payload, block.sourceId, warnings)
|
||||
});
|
||||
}
|
||||
return { tasks, warnings };
|
||||
}
|
||||
|
||||
function parseCheckboxes(lines: string[], payload: MdtodoImportPayload) {
|
||||
const tasks: MdtodoImportTask[] = [];
|
||||
const warnings: MdtodoImportPlan["warnings"] = [];
|
||||
const roots: string[] = [];
|
||||
for (let index = 0; index < lines.length; index += 1) {
|
||||
const match = checkboxPattern.exec(lines[index]);
|
||||
if (!match) continue;
|
||||
const depth = Math.max(0, Math.floor(match[1].replace(/\t/gu, " ").length / 2));
|
||||
const sourceId = `L${index + 1}`;
|
||||
if (depth === 0) roots.push(sourceId);
|
||||
const parentSourceId = depth > 0 ? roots.at(-1) ?? null : null;
|
||||
if (depth > 1) warnings.push({ code: "nested_task_flattened", sourceId, message: `${sourceId} was flattened to the nearest root checkbox task` });
|
||||
tasks.push({
|
||||
sourceId,
|
||||
parentSourceId,
|
||||
title: cleanTitle(match[3]),
|
||||
description: "",
|
||||
status: match[2].toLowerCase() === "x" ? "completed" : match[2] === "-" ? "blocked" : "pending",
|
||||
reports: []
|
||||
});
|
||||
}
|
||||
return { tasks, warnings };
|
||||
}
|
||||
|
||||
function reportsForTask(body: string, payload: MdtodoImportPayload, sourceId: string, warnings: MdtodoImportPlan["warnings"]) {
|
||||
const reports: MdtodoImportTask["reports"] = [];
|
||||
for (const link of reportLinks(body)) {
|
||||
const resolved = path.resolve(path.dirname(payload.sourcePath), link.href);
|
||||
const report = payload.reports.find((candidate) => path.resolve(candidate.sourcePath) === resolved);
|
||||
if (!report) {
|
||||
warnings.push({ code: "report_file_missing", sourceId, href: link.href, message: `Report file could not be read: ${link.href}` });
|
||||
continue;
|
||||
}
|
||||
reports.push({ title: documentTitle(report.body.split(/\r?\n/u), report.sourcePath), body: report.body, status: "imported" });
|
||||
}
|
||||
return reports;
|
||||
}
|
||||
|
||||
function reportLinks(markdown: string) {
|
||||
const links: Array<{ label: string; href: string }> = [];
|
||||
for (const match of String(markdown ?? "").matchAll(markdownLinkPattern)) {
|
||||
const label = String(match[1] ?? "").trim();
|
||||
const href = String(match[2] ?? "").trim().replace(/^<|>$/gu, "").split(/\s+/u)[0] ?? "";
|
||||
if (!href || !/\.md(?:#.*)?$/iu.test(href) || /^(?:[a-z][a-z0-9+.-]*:|\/|[A-Za-z]:\/)/iu.test(href)) continue;
|
||||
if (!/(?:任务报告|task[_ -]?report|report)/iu.test(`${label} ${href}`)) continue;
|
||||
links.push({ label, href: href.split("#")[0] });
|
||||
}
|
||||
return links;
|
||||
}
|
||||
|
||||
type RxxBlock = { sourceId: string; title: string; status: TaskStatus; lineIndex: number; endLine: number };
|
||||
function collectRxxBlocks(lines: string[]): RxxBlock[] {
|
||||
const blocks: Omit<RxxBlock, "endLine">[] = [];
|
||||
for (let index = 0; index < lines.length; index += 1) {
|
||||
const match = rxxHeadingPattern.exec(lines[index]);
|
||||
if (!match) continue;
|
||||
const rest = String(match[3] ?? "").trim();
|
||||
blocks.push({ sourceId: match[2].replace(/^r/iu, "R"), title: stripStatus(rest), status: statusFrom(rest), lineIndex: index });
|
||||
}
|
||||
return blocks.map((block, index) => ({ ...block, endLine: blocks[index + 1]?.lineIndex ?? lines.length }));
|
||||
}
|
||||
|
||||
function statusFrom(value: string): TaskStatus {
|
||||
const markers = [...value.matchAll(/\[([^\]]+)\]/gu)].map((match) => String(match[1]).trim().toLowerCase().replace(/[\s-]+/gu, "_"));
|
||||
if (markers.some((marker) => marker === "blocked")) return "blocked";
|
||||
if (markers.some((marker) => ["completed", "finished", "done"].includes(marker))) return "completed";
|
||||
if (markers.some((marker) => ["in_progress", "processing"].includes(marker))) return "in_progress";
|
||||
return "pending";
|
||||
}
|
||||
function stripStatus(value: string) { return value.replace(/\s*\[(?:open|todo|blocked|in[_ -]?progress|processing|completed|finished|done)\]\s*/giu, " ").trim(); }
|
||||
function rxxDepth(sourceId: string) { return Math.max(0, sourceId.split(".").length - 1); }
|
||||
function documentTitle(lines: string[], sourcePath: string) { return cleanTitle(lines.find((line) => /^#{1,6}\s+\S/u.test(line))?.replace(/^#{1,6}\s+/u, "") || path.basename(sourcePath, path.extname(sourcePath))); }
|
||||
function firstBodyLine(body: string) { return body.split(/\r?\n/u).map((line) => line.trim()).find(Boolean) || "Untitled task"; }
|
||||
function conciseBodyTitle(body: string) {
|
||||
const line = firstBodyLine(body);
|
||||
const separator = line.search(/[：:]/u);
|
||||
return separator >= 6 && separator <= 120 ? line.slice(0, separator) : line;
|
||||
}
|
||||
function cleanTitle(value: string) { return String(value ?? "").replace(/\s+<!--.*?-->\s*$/u, "").trim().slice(0, 500) || "Untitled task"; }
|
||||
function codedError(code: string, message: string) { return Object.assign(new Error(message), { code }); }
|
||||
@@ -2,6 +2,7 @@ import { randomUUID } from "node:crypto";
|
||||
import pg from "pg";
|
||||
|
||||
import type { ExecutionReport, Milestone, TaskGroup, TaskItem, TaskStatus, Timeline } from "./contracts.ts";
|
||||
import type { MdtodoImportPlan } from "./mdtodo-import.ts";
|
||||
|
||||
const { Pool } = pg;
|
||||
|
||||
@@ -140,6 +141,45 @@ export class TaskTreeStore {
|
||||
return reportRow(result.rows[0]);
|
||||
}
|
||||
|
||||
async importMdtodo(plan: MdtodoImportPlan) {
|
||||
await this.ensureSchema();
|
||||
const client = await this.pool.connect();
|
||||
const groupId = `tg_${randomUUID()}`;
|
||||
const taskIds = new Map<string, string>();
|
||||
try {
|
||||
await client.query("BEGIN");
|
||||
const groupResult = await client.query(
|
||||
"INSERT INTO tasktree_groups (id,name,description) VALUES ($1,$2,$3) RETURNING *",
|
||||
[groupId, plan.groupName, plan.groupDescription]
|
||||
);
|
||||
for (let index = 0; index < plan.tasks.length; index += 1) {
|
||||
const task = plan.tasks[index];
|
||||
const taskId = `tt_${randomUUID()}`;
|
||||
taskIds.set(task.sourceId, taskId);
|
||||
const parentId = task.parentSourceId ? taskIds.get(task.parentSourceId) ?? null : null;
|
||||
const kind = parentId ? "subtask" : "task";
|
||||
await client.query(
|
||||
`INSERT INTO tasktree_tasks (id,group_id,parent_id,kind,title,description,status,sort_order)
|
||||
VALUES ($1,$2,$3,$4,$5,$6,$7,$8)`,
|
||||
[taskId, groupId, parentId, kind, task.title, task.description, task.status, index]
|
||||
);
|
||||
for (const report of task.reports) {
|
||||
await client.query(
|
||||
"INSERT INTO tasktree_execution_reports (id,task_id,title,body,status) VALUES ($1,$2,$3,$4,$5)",
|
||||
[`tr_${randomUUID()}`, taskId, report.title, report.body, report.status]
|
||||
);
|
||||
}
|
||||
}
|
||||
await client.query("COMMIT");
|
||||
return { dryRun: false, sourcePath: plan.sourcePath, group: groupRow(groupResult.rows[0]), parserMode: plan.parserMode, summary: plan.summary, warnings: plan.warnings };
|
||||
} catch (error) {
|
||||
await client.query("ROLLBACK").catch(() => {});
|
||||
throw error;
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
}
|
||||
|
||||
async timeline(groupId: string): Promise<Timeline | null> {
|
||||
await this.ensureSchema();
|
||||
const group = await this.getGroup(groupId);
|
||||
|
||||
@@ -2,6 +2,7 @@ import { readFile } from "node:fs/promises";
|
||||
|
||||
import type { TaskStatus, TaskTreeCommand } from "../../internal/tasktree/contracts.ts";
|
||||
import { createTaskTreeDispatcher } from "../../internal/tasktree/dispatcher.ts";
|
||||
import { loadMdtodoImportPayload } from "../../internal/tasktree/mdtodo-import.ts";
|
||||
import { taskTreeRuntime } from "../../internal/tasktree/runtime.ts";
|
||||
|
||||
export async function runTaskTreeCli(argv: string[], env: Record<string, string | undefined> = process.env) {
|
||||
@@ -28,6 +29,7 @@ function help() {
|
||||
"hwlab-cli tasktree task create|update|delete --group ID|--task ID [--parent ID] --title TEXT --start ISO --due ISO --status STATUS",
|
||||
"hwlab-cli tasktree milestone create --group ID [--task ID] --title TEXT --at ISO",
|
||||
"hwlab-cli tasktree report create --task ID --title TEXT (--body TEXT|--body-file PATH)",
|
||||
"hwlab-cli tasktree import mdtodo --file PATH [--name TEXT] [--dry-run] [--overapi]",
|
||||
"hwlab-cli tasktree timeline --group ID [--overapi]",
|
||||
"hwlab-cli tasktree workflow start --task ID"
|
||||
],
|
||||
@@ -48,6 +50,7 @@ async function commandFrom(parsed: Parsed): Promise<TaskTreeCommand> {
|
||||
if (group === "task" && action === "delete") return { operation: "task.delete", taskId: required(parsed, "task") };
|
||||
if (group === "milestone" && action === "create") return { operation: "milestone.create", groupId: required(parsed, "group"), taskId: parsed.values.task, title: required(parsed, "title"), occursAt: required(parsed, "at") };
|
||||
if (group === "report" && action === "create") return { operation: "report.create", taskId: required(parsed, "task"), title: required(parsed, "title"), body: parsed.values.body ?? await readFile(required(parsed, "body-file"), "utf8"), status: parsed.values.status };
|
||||
if (group === "import" && action === "mdtodo") return { operation: "mdtodo.import", ...await loadMdtodoImportPayload(required(parsed, "file"), { groupName: parsed.values.name, dryRun: parsed.flags.has("dry-run") }) };
|
||||
if (group === "workflow" && action === "start") return { operation: "workflow.start", taskId: required(parsed, "task") };
|
||||
throw new Error(`unsupported TaskTree command: ${group} ${action}`.trim());
|
||||
}
|
||||
@@ -61,12 +64,13 @@ async function overApi(command: TaskTreeCommand, env: Record<string, string | un
|
||||
return { ...(body as object), transport: "api", httpStatus: response.status };
|
||||
}
|
||||
|
||||
type Parsed = { positionals: string[]; values: Record<string, string>; overapi: boolean; help: boolean };
|
||||
type Parsed = { positionals: string[]; values: Record<string, string>; flags: Set<string>; overapi: boolean; help: boolean };
|
||||
function parse(argv: string[]): Parsed {
|
||||
const parsed: Parsed = { positionals: [], values: {}, overapi: false, help: false };
|
||||
const parsed: Parsed = { positionals: [], values: {}, flags: new Set(), overapi: false, help: false };
|
||||
for (let index = 0; index < argv.length; index += 1) {
|
||||
const token = argv[index];
|
||||
if (token === "--overapi") parsed.overapi = true;
|
||||
else if (token === "--dry-run") parsed.flags.add("dry-run");
|
||||
else if (token === "--help" || token === "-h") parsed.help = true;
|
||||
else if (token.startsWith("--")) {
|
||||
const key = token.slice(2);
|
||||
|
||||
@@ -13,18 +13,20 @@ const props = withDefaults(defineProps<{
|
||||
closeOnBackdrop?: boolean;
|
||||
busy?: boolean;
|
||||
initialFocus?: string;
|
||||
surfaceClass?: string;
|
||||
}>(), {
|
||||
description: "",
|
||||
wide: false,
|
||||
fullscreen: false,
|
||||
closeOnBackdrop: true,
|
||||
busy: false,
|
||||
initialFocus: ""
|
||||
initialFocus: "",
|
||||
surfaceClass: ""
|
||||
});
|
||||
|
||||
defineEmits<{ close: [] }>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<OverlaySurface :open="open" :title="title" :description="description" :wide="wide" :fullscreen="fullscreen" :close-on-backdrop="closeOnBackdrop" :busy="busy" :initial-focus="initialFocus" @close="$emit('close')"><slot /><template v-if="$slots.footer" #footer><slot name="footer" /></template></OverlaySurface>
|
||||
<OverlaySurface :open="open" :title="title" :description="description" :wide="wide" :fullscreen="fullscreen" :close-on-backdrop="closeOnBackdrop" :busy="busy" :initial-focus="initialFocus" :surface-class="surfaceClass" @close="$emit('close')"><slot /><template v-if="$slots.footer" #footer><slot name="footer" /></template></OverlaySurface>
|
||||
</template>
|
||||
|
||||
@@ -71,7 +71,7 @@ function close(): void {
|
||||
>
|
||||
<header class="console-overlay-header">
|
||||
<div class="console-overlay-title-stack">
|
||||
<h2 :id="titleId">{{ title }}</h2>
|
||||
<h2 :id="titleId" :title="title">{{ title }}</h2>
|
||||
<p v-if="description" :id="descriptionId">{{ description }}</p>
|
||||
</div>
|
||||
<button
|
||||
|
||||
@@ -580,6 +580,8 @@
|
||||
color: var(--console-graphite-950);
|
||||
font-size: 16px;
|
||||
}
|
||||
.console-overlay-surface.tasktree-detail-dialog .console-overlay-title-stack { overflow: hidden; }
|
||||
.console-overlay-surface.tasktree-detail-dialog .console-overlay-title-stack h2 { overflow: hidden; font-size: 20px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.console-overlay-title-stack p {
|
||||
color: var(--console-graphite-600);
|
||||
font-size: 12px;
|
||||
@@ -739,11 +741,36 @@
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.content-viewer-markdown > :first-child { margin-top: 0; }
|
||||
.content-viewer-markdown > :last-child { margin-bottom: 0; }
|
||||
.content-viewer-markdown h1,
|
||||
.content-viewer-markdown h2,
|
||||
.content-viewer-markdown h3,
|
||||
.content-viewer-markdown h4 {
|
||||
margin: 1.35em 0 0.55em;
|
||||
color: var(--console-graphite-950);
|
||||
font-weight: 760;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.content-viewer-markdown h1 { padding-bottom: 0.35em; border-bottom: 1px solid var(--console-border); font-size: 22px; }
|
||||
.content-viewer-markdown h2 { padding-bottom: 0.3em; border-bottom: 1px solid var(--console-border); font-size: 18px; }
|
||||
.content-viewer-markdown h3 { font-size: 15px; }
|
||||
.content-viewer-markdown h4 { font-size: 13px; }
|
||||
.content-viewer-markdown p { margin: 0.7em 0; }
|
||||
.content-viewer-markdown ul,
|
||||
.content-viewer-markdown ol { display: grid; gap: 0.35em; margin: 0.7em 0; padding-left: 1.6em; }
|
||||
.content-viewer-markdown blockquote { margin: 0.8em 0; padding: 0.2em 0 0.2em 1em; border-left: 3px solid var(--console-cyan-600); color: var(--console-graphite-700); }
|
||||
.content-viewer-markdown a { color: var(--console-cyan-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
|
||||
.content-viewer-markdown hr { margin: 1.2em 0; border: 0; border-top: 1px solid var(--console-border); }
|
||||
.content-viewer-markdown img { max-width: 100%; height: auto; }
|
||||
|
||||
.content-viewer-markdown pre,
|
||||
.content-viewer-markdown code {
|
||||
font-family: var(--console-font-mono);
|
||||
}
|
||||
|
||||
.content-viewer-markdown :not(pre) > code { border-radius: 3px; background: #e9eeeb; padding: 0.12em 0.35em; color: var(--console-graphite-950); font-size: 0.9em; }
|
||||
|
||||
.content-viewer-markdown pre {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
@@ -1,30 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from "vue";
|
||||
import { computed, nextTick, onMounted, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ChevronDown, ChevronRight, ZoomIn, ZoomOut } from "lucide-vue-next";
|
||||
import { tasktreeAPI, type TaskTreeGroup, type TaskTreeReport, type TaskTreeTask, type TaskTreeTimeline } from "@/api";
|
||||
import AsyncBoundary from "@/components/common/AsyncBoundary.vue";
|
||||
import BaseDialog from "@/components/common/BaseDialog.vue";
|
||||
import ContentViewer from "@/components/common/ContentViewer.vue";
|
||||
import MessageMarkdown from "@/components/workbench/MessageMarkdown.vue";
|
||||
import PageCommandBar from "@/components/layout/PageCommandBar.vue";
|
||||
import StatusStrip from "@/components/layout/StatusStrip.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const groups = ref<TaskTreeGroup[]>([]);
|
||||
const timeline = ref<TaskTreeTimeline | null>(null);
|
||||
const selectedTask = ref<TaskTreeTask | null>(null);
|
||||
const collapsedTaskIds = ref(new Set<string>());
|
||||
const timelineHeaderElement = ref<HTMLElement | null>(null);
|
||||
const taskLabelsElement = ref<HTMLElement | null>(null);
|
||||
const timelineBodyElement = ref<HTMLElement | null>(null);
|
||||
const timelineScaleIndex = ref(1);
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const groupId = computed(() => String(route.params.groupId || groups.value[0]?.id || ""));
|
||||
const datedTasks = computed(() => timeline.value?.tasks.filter((task) => task.startAt || task.dueAt) ?? []);
|
||||
const childrenByParent = computed(() => {
|
||||
const children = new Map<string, TaskTreeTask[]>();
|
||||
for (const task of timeline.value?.tasks ?? []) {
|
||||
if (!task.parentId) continue;
|
||||
children.set(task.parentId, [...(children.get(task.parentId) ?? []), task]);
|
||||
}
|
||||
return children;
|
||||
});
|
||||
const visibleTasks = computed(() => (timeline.value?.tasks ?? []).filter(
|
||||
(task) => !task.parentId || !collapsedTaskIds.value.has(task.parentId)
|
||||
));
|
||||
const timelineScales = [
|
||||
{ label: "周", stepMs: 2 * 86400000, tickWidth: 96, precision: "date" },
|
||||
{ label: "日", stepMs: 86400000, tickWidth: 144, precision: "date" },
|
||||
{ label: "时", stepMs: 6 * 3600000, tickWidth: 72, precision: "hour" },
|
||||
{ label: "分", stepMs: 3600000, tickWidth: 64, precision: "minute" },
|
||||
{ label: "秒", stepMs: 15 * 60000, tickWidth: 88, precision: "second" }
|
||||
] as const;
|
||||
const timelineScale = computed(() => timelineScales[timelineScaleIndex.value]);
|
||||
const range = computed(() => timelineRange(datedTasks.value));
|
||||
const days = computed(() => Array.from({ length: range.value.dayCount }, (_, index) => new Date(range.value.start.getTime() + index * 86400000)));
|
||||
const timelineTicks = computed(() => Array.from(
|
||||
{ length: Math.ceil(range.value.dayCount * 86400000 / timelineScale.value.stepMs) },
|
||||
(_, index) => new Date(range.value.start.getTime() + index * timelineScale.value.stepMs)
|
||||
));
|
||||
const timelineWidth = computed(() => timelineTicks.value.length * timelineScale.value.tickWidth);
|
||||
const selectedReports = computed<TaskTreeReport[]>(() => selectedTask.value ? timeline.value?.reports.filter((report) => report.taskId === selectedTask.value?.id) ?? [] : []);
|
||||
const statusItems = computed(() => [
|
||||
{ id: "groups", label: "Taskgroups", value: groups.value.length, detail: "PostgreSQL authority" },
|
||||
{ id: "tasks", label: "Tasks", value: timeline.value?.tasks.filter((task) => task.kind === "task").length ?? 0, detail: "甘特主行" },
|
||||
{ id: "subtasks", label: "Subtasks", value: timeline.value?.tasks.filter((task) => task.kind === "subtask").length ?? 0, detail: "二级执行项" },
|
||||
{ id: "reports", label: "Reports", value: timeline.value?.reports.length ?? 0, detail: `${timeline.value?.milestones.length ?? 0} milestones` }
|
||||
]);
|
||||
const asyncState = computed(() => loading.value ? timeline.value ? "refreshing" : "initial-loading" : error.value ? timeline.value ? "partial" : "error" : timeline.value?.tasks.length ? "ready" : "empty");
|
||||
|
||||
onMounted(loadGroups);
|
||||
@@ -47,6 +71,38 @@ async function loadTimeline(id = groupId.value) {
|
||||
timeline.value = response.data.data;
|
||||
}
|
||||
function selectGroup(event: Event) { void router.push(`/projects/tasktree/${encodeURIComponent((event.target as HTMLSelectElement).value)}`); }
|
||||
function toggleTask(taskId: string) {
|
||||
const next = new Set(collapsedTaskIds.value);
|
||||
if (next.has(taskId)) next.delete(taskId);
|
||||
else next.add(taskId);
|
||||
collapsedTaskIds.value = next;
|
||||
}
|
||||
async function changeTimelineScale(direction: -1 | 1) {
|
||||
const body = timelineBodyElement.value;
|
||||
const centerRatio = body && body.scrollWidth > 0 ? (body.scrollLeft + body.clientWidth / 2) / body.scrollWidth : 0;
|
||||
timelineScaleIndex.value = Math.min(timelineScales.length - 1, Math.max(0, timelineScaleIndex.value + direction));
|
||||
await nextTick();
|
||||
if (body) {
|
||||
body.scrollLeft = Math.max(0, centerRatio * body.scrollWidth - body.clientWidth / 2);
|
||||
if (timelineHeaderElement.value) timelineHeaderElement.value.scrollLeft = body.scrollLeft;
|
||||
}
|
||||
}
|
||||
function syncTimelineBody() {
|
||||
const body = timelineBodyElement.value;
|
||||
if (!body) return;
|
||||
if (timelineHeaderElement.value && timelineHeaderElement.value.scrollLeft !== body.scrollLeft) timelineHeaderElement.value.scrollLeft = body.scrollLeft;
|
||||
if (taskLabelsElement.value && taskLabelsElement.value.scrollTop !== body.scrollTop) taskLabelsElement.value.scrollTop = body.scrollTop;
|
||||
}
|
||||
function syncTimelineHeader() {
|
||||
const header = timelineHeaderElement.value;
|
||||
const body = timelineBodyElement.value;
|
||||
if (header && body && body.scrollLeft !== header.scrollLeft) body.scrollLeft = header.scrollLeft;
|
||||
}
|
||||
function syncTaskLabels() {
|
||||
const labels = taskLabelsElement.value;
|
||||
const body = timelineBodyElement.value;
|
||||
if (labels && body && body.scrollTop !== labels.scrollTop) body.scrollTop = labels.scrollTop;
|
||||
}
|
||||
function timelineRange(tasks: TaskTreeTask[]) {
|
||||
const values = tasks.flatMap((task) => [task.startAt, task.dueAt]).filter(Boolean).map((value) => new Date(value as string).getTime());
|
||||
const today = startDay(new Date()); const min = values.length ? Math.min(...values) : today.getTime(); const max = values.length ? Math.max(...values) : min + 6 * 86400000;
|
||||
@@ -59,10 +115,38 @@ function barStyle(task: TaskTreeTask) {
|
||||
const left = Math.max(0, (start - range.value.start.getTime()) / 86400000) * unit; const width = Math.max(unit * 0.65, ((end - start) / 86400000 + 1) * unit);
|
||||
return { left: `${left}%`, width: `${Math.min(100 - left, width)}%` };
|
||||
}
|
||||
function milestoneStyle(occursAt: string) { return barStyle({ startAt: occursAt, dueAt: occursAt } as TaskTreeTask); }
|
||||
function dayLabel(date: Date) { return `${date.getUTCMonth() + 1}/${date.getUTCDate()}`; }
|
||||
function milestoneStyle(occursAt: string) {
|
||||
const time = new Date(occursAt).getTime();
|
||||
const left = Math.max(0, (time - range.value.start.getTime()) / 86400000) * (100 / range.value.dayCount);
|
||||
return { left: `${Math.min(100, left)}%` };
|
||||
}
|
||||
function tickLabel(date: Date) {
|
||||
const monthDay = `${date.getUTCMonth() + 1}/${date.getUTCDate()}`;
|
||||
if (timelineScale.value.precision === "date") return monthDay;
|
||||
const hour = String(date.getUTCHours()).padStart(2, "0");
|
||||
if (timelineScale.value.precision === "hour") return `${monthDay} ${hour}时`;
|
||||
const minute = String(date.getUTCMinutes()).padStart(2, "0");
|
||||
if (timelineScale.value.precision === "minute") return `${monthDay} ${hour}:${minute}`;
|
||||
const second = String(date.getUTCSeconds()).padStart(2, "0");
|
||||
return `${monthDay} ${hour}:${minute}:${second}`;
|
||||
}
|
||||
function dateLabel(value: string | null) { return value ? new Date(value).toLocaleString() : "未设置"; }
|
||||
function statusLabel(status: string) { return ({ pending: "待处理", in_progress: "进行中", completed: "已完成", blocked: "阻塞" } as Record<string, string>)[status] || status; }
|
||||
function displayTaskTitle(task: TaskTreeTask | null) {
|
||||
const title = String(task?.title || "任务详情").trim();
|
||||
const separator = title.search(/[：:]/u);
|
||||
return separator >= 10 && separator <= 120 ? title.slice(0, separator) : title;
|
||||
}
|
||||
function reportMarkdown(report: TaskTreeReport) {
|
||||
const lines = report.body.replace(/\r\n?/gu, "\n").split("\n");
|
||||
const firstContent = lines.findIndex((line) => line.trim().length > 0);
|
||||
if (firstContent < 0) return report.body;
|
||||
const heading = lines[firstContent].match(/^#{1,6}\s+(.+?)\s*#*\s*$/u);
|
||||
if (!heading || normalizeHeading(heading[1]) !== normalizeHeading(report.title)) return report.body;
|
||||
lines.splice(firstContent, 1);
|
||||
return lines.join("\n").trimStart();
|
||||
}
|
||||
function normalizeHeading(value: string) { return value.replace(/\s+/gu, "").toLocaleLowerCase(); }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -70,25 +154,166 @@ function statusLabel(status: string) { return ({ pending: "待处理", in_progre
|
||||
<PageCommandBar title="TaskTree" eyebrow="项目时间线" description="任务、时间节点与执行报告">
|
||||
<template #actions><label class="tasktree-group-select"><span class="sr-only">Taskgroup</span><select :value="groupId" @change="selectGroup"><option v-for="group in groups" :key="group.id" :value="group.id">{{ group.name }}</option></select></label><button class="icon-button" type="button" title="刷新" aria-label="刷新" :disabled="loading" @click="loadTimeline()"><span aria-hidden="true">↻</span></button></template>
|
||||
</PageCommandBar>
|
||||
<StatusStrip :items="statusItems" />
|
||||
<AsyncBoundary :state="asyncState" title="TaskTree 暂无任务" :message="error || '通过 CLI 创建 taskgroup 和任务后会显示在时间轴中。'" @retry="loadGroups">
|
||||
<section v-if="timeline" class="tasktree-workspace" aria-label="TaskTree 甘特图">
|
||||
<header class="tasktree-context"><div><strong>{{ timeline.group.name }}</strong><p>{{ timeline.group.description || '未填写 taskgroup 说明' }}</p></div><span>{{ days.length }} 天</span></header>
|
||||
<div class="tasktree-gantt" :style="{ '--day-count': days.length }">
|
||||
<div class="tasktree-corner">任务</div><div class="tasktree-days"><span v-for="day in days" :key="day.toISOString()">{{ dayLabel(day) }}</span></div>
|
||||
<template v-for="task in timeline.tasks" :key="task.id">
|
||||
<button class="tasktree-label" :class="{ subtask: task.kind === 'subtask' }" type="button" @click="selectedTask = task"><span class="tasktree-status" :data-status="task.status"/><span>{{ task.title }}</span></button>
|
||||
<div class="tasktree-track" :style="{ backgroundSize: `${100 / days.length}% 100%` }"><button class="tasktree-bar" :class="[`status-${task.status}`, { subtask: task.kind === 'subtask' }]" :style="barStyle(task)" type="button" @click="selectedTask = task"><span>{{ statusLabel(task.status) }}</span></button><span v-for="milestone in timeline.milestones.filter((item) => item.taskId === task.id)" :key="milestone.id" class="tasktree-milestone" :title="milestone.title" :style="milestoneStyle(milestone.occursAt)" /></div>
|
||||
</template>
|
||||
<header class="tasktree-context">
|
||||
<div><strong>{{ timeline.group.name }}</strong><p>{{ timeline.group.description || '未填写 taskgroup 说明' }}</p></div>
|
||||
<div class="tasktree-timeline-tools">
|
||||
<span>{{ range.dayCount }} 天</span>
|
||||
<div class="tasktree-zoom" role="group" aria-label="时间轴缩放">
|
||||
<button type="button" title="缩小时间尺度" aria-label="缩小时间尺度" :disabled="timelineScaleIndex === 0" @click="changeTimelineScale(-1)"><ZoomOut :size="15" aria-hidden="true" /></button>
|
||||
<output :title="`当前时间尺度：${timelineScale.label}`" aria-live="polite">{{ timelineScale.label }}</output>
|
||||
<button type="button" title="放大时间尺度" aria-label="放大时间尺度" :disabled="timelineScaleIndex === timelineScales.length - 1" @click="changeTimelineScale(1)"><ZoomIn :size="15" aria-hidden="true" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="tasktree-gantt" :style="{ '--tick-count': timelineTicks.length, '--tick-width': `${timelineScale.tickWidth}px`, '--timeline-width': `${timelineWidth}px` }">
|
||||
<div class="tasktree-corner">任务</div>
|
||||
<div ref="timelineHeaderElement" class="tasktree-timeline-header" @scroll="syncTimelineHeader">
|
||||
<div class="tasktree-days">
|
||||
<span v-for="tick in timelineTicks" :key="tick.toISOString()">{{ tickLabel(tick) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="taskLabelsElement" class="tasktree-labels" @scroll="syncTaskLabels">
|
||||
<div class="tasktree-labels-canvas">
|
||||
<div v-for="task in visibleTasks" :key="task.id" class="tasktree-label" :class="{ subtask: task.kind === 'subtask' }" :data-dated="Boolean(task.startAt || task.dueAt)">
|
||||
<button
|
||||
v-if="childrenByParent.has(task.id)"
|
||||
class="tasktree-disclosure"
|
||||
type="button"
|
||||
:title="collapsedTaskIds.has(task.id) ? '展开子任务' : '收起子任务'"
|
||||
:aria-label="collapsedTaskIds.has(task.id) ? `展开 ${task.title} 的子任务` : `收起 ${task.title} 的子任务`"
|
||||
:aria-expanded="!collapsedTaskIds.has(task.id)"
|
||||
@click="toggleTask(task.id)"
|
||||
>
|
||||
<ChevronRight v-if="collapsedTaskIds.has(task.id)" :size="15" aria-hidden="true" />
|
||||
<ChevronDown v-else :size="15" aria-hidden="true" />
|
||||
</button>
|
||||
<span v-else class="tasktree-disclosure-spacer" aria-hidden="true" />
|
||||
<button class="tasktree-title" type="button" @click="selectedTask = task">
|
||||
<span class="tasktree-status" :data-status="task.status" />
|
||||
<span :title="task.title">{{ displayTaskTitle(task) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="timelineBodyElement" class="tasktree-timeline-body" @scroll="syncTimelineBody">
|
||||
<div class="tasktree-timeline-canvas">
|
||||
<div v-for="task in visibleTasks" :key="task.id" class="tasktree-track" :style="{ backgroundSize: `${100 / timelineTicks.length}% 100%` }">
|
||||
<button
|
||||
v-if="task.startAt || task.dueAt"
|
||||
class="tasktree-bar"
|
||||
:class="[`status-${task.status}`, { subtask: task.kind === 'subtask' }]"
|
||||
:style="barStyle(task)"
|
||||
type="button"
|
||||
:aria-label="`${task.title}，${statusLabel(task.status)}`"
|
||||
@click="selectedTask = task"
|
||||
>
|
||||
<span>{{ statusLabel(task.status) }}</span>
|
||||
</button>
|
||||
<span
|
||||
v-for="milestone in timeline.milestones.filter((item) => item.taskId === task.id)"
|
||||
:key="milestone.id"
|
||||
class="tasktree-milestone"
|
||||
role="img"
|
||||
:aria-label="`里程碑：${milestone.title}`"
|
||||
:title="milestone.title"
|
||||
:style="milestoneStyle(milestone.occursAt)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="tasktree-statusbar" aria-label="TaskTree 状态">
|
||||
<span><strong>{{ groups.length }}</strong> Taskgroups</span>
|
||||
<span><strong>{{ timeline.tasks.filter((task) => task.kind === 'task').length }}</strong> Tasks</span>
|
||||
<span><strong>{{ timeline.tasks.filter((task) => task.kind === 'subtask').length }}</strong> Subtasks</span>
|
||||
<span><strong>{{ timeline.reports.length }}</strong> Reports</span>
|
||||
<span><strong>{{ timeline.milestones.length }}</strong> Milestones</span>
|
||||
<span class="tasktree-statusbar-authority">PostgreSQL</span>
|
||||
</footer>
|
||||
</section>
|
||||
</AsyncBoundary>
|
||||
<BaseDialog :open="Boolean(selectedTask)" :title="selectedTask?.title || '任务详情'" :description="selectedTask ? `${selectedTask.kind === 'subtask' ? 'Subtask' : 'Task'} · ${statusLabel(selectedTask.status)}` : ''" wide @close="selectedTask = null">
|
||||
<div v-if="selectedTask" class="tasktree-detail"><dl><div><dt>开始</dt><dd>{{ dateLabel(selectedTask.startAt) }}</dd></div><div><dt>截止</dt><dd>{{ dateLabel(selectedTask.dueAt) }}</dd></div><div><dt>状态</dt><dd>{{ statusLabel(selectedTask.status) }}</dd></div></dl><section><h3>任务说明</h3><p>{{ selectedTask.description || '未填写任务说明。' }}</p></section><section><h3>执行报告</h3><div v-if="selectedReports.length" class="tasktree-reports"><article v-for="report in selectedReports" :key="report.id"><header><strong>{{ report.title }}</strong><time>{{ dateLabel(report.createdAt) }}</time></header><p>{{ report.body }}</p></article></div><p v-else class="tasktree-muted">尚无执行报告。</p></section></div>
|
||||
<BaseDialog :open="Boolean(selectedTask)" :title="displayTaskTitle(selectedTask)" :description="selectedTask ? `${selectedTask.kind === 'subtask' ? 'Subtask' : 'Task'} · ${statusLabel(selectedTask.status)}` : ''" surface-class="tasktree-detail-dialog" wide @close="selectedTask = null">
|
||||
<div v-if="selectedTask" class="tasktree-detail"><dl><div><dt>开始</dt><dd>{{ dateLabel(selectedTask.startAt) }}</dd></div><div><dt>截止</dt><dd>{{ dateLabel(selectedTask.dueAt) }}</dd></div><div><dt>状态</dt><dd>{{ statusLabel(selectedTask.status) }}</dd></div></dl><section><h3>任务说明</h3><MessageMarkdown v-if="selectedTask.description" class="tasktree-description" :source="selectedTask.description" /><p v-else class="tasktree-muted">未填写任务说明。</p></section><section><h3>执行报告</h3><div v-if="selectedReports.length" class="tasktree-reports"><article v-for="report in selectedReports" :key="report.id"><time>{{ dateLabel(report.createdAt) }}</time><ContentViewer :content="reportMarkdown(report)" mode="markdown" :title="report.title" :filename="`${report.title}.md`" :line-numbers="false" /></article></div><p v-else class="tasktree-muted">尚无执行报告。</p></section></div>
|
||||
</BaseDialog>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tasktree-page{display:grid;gap:12px;min-width:0}.tasktree-workspace{border:1px solid var(--border-color);background:var(--surface-primary);min-width:0;overflow:hidden}.tasktree-context{min-height:58px;padding:10px 14px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;gap:16px}.tasktree-context p{margin:3px 0 0;color:var(--text-secondary);font-size:12px}.tasktree-context>span{color:var(--text-secondary);font-size:12px}.tasktree-gantt{display:grid;grid-template-columns:minmax(210px,280px) minmax(720px,1fr);max-height:calc(100vh - 285px);overflow:auto}.tasktree-corner{position:sticky;left:0;top:0;z-index:4;padding:9px 14px;background:var(--surface-secondary);border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color);font-size:11px;font-weight:700}.tasktree-days{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:repeat(var(--day-count),minmax(28px,1fr));background:var(--surface-secondary);border-bottom:1px solid var(--border-color)}.tasktree-days span{padding:9px 2px;border-right:1px solid var(--border-subtle);font-size:10px;text-align:center;color:var(--text-secondary)}.tasktree-label{position:sticky;left:0;z-index:2;height:46px;border:0;border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-subtle);background:var(--surface-primary);padding:0 12px;display:flex;align-items:center;gap:8px;text-align:left;color:var(--text-primary);min-width:0}.tasktree-label span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tasktree-label.subtask{padding-left:34px;color:var(--text-secondary)}.tasktree-status{width:7px;height:7px;border-radius:50%;background:#83909c;flex:0 0 auto}.tasktree-status[data-status=completed]{background:#1f9d67}.tasktree-status[data-status=in_progress]{background:#2376c9}.tasktree-status[data-status=blocked]{background:#c73e48}.tasktree-track{position:relative;height:46px;border-bottom:1px solid var(--border-subtle);background-image:linear-gradient(to right,var(--border-subtle) 1px,transparent 1px)}.tasktree-bar{position:absolute;top:10px;height:26px;border:0;border-radius:4px;background:#2376c9;color:white;min-width:18px;padding:0 8px;text-align:left;overflow:hidden}.tasktree-bar span{font-size:10px;white-space:nowrap}.tasktree-bar.subtask{top:14px;height:18px;background:#5f7d99}.tasktree-bar.status-completed{background:#23845c}.tasktree-bar.status-blocked{background:#b84149}.tasktree-bar.status-pending{background:#687581}.tasktree-milestone{position:absolute;top:7px;width:12px;height:12px;background:#b36b00;border:2px solid var(--surface-primary);transform:translateX(-6px) rotate(45deg);z-index:2}.tasktree-group-select{display:flex;align-items:center}.tasktree-group-select select{min-width:180px;padding:7px 10px;border:1px solid var(--border-color);background:var(--surface-primary);color:var(--text-primary)}.tasktree-detail{display:grid;gap:18px}.tasktree-detail dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}.tasktree-detail dl div{padding:10px;border-left:2px solid #2376c9;background:var(--surface-secondary)}.tasktree-detail dt{font-size:11px;color:var(--text-secondary)}.tasktree-detail dd{margin:4px 0 0}.tasktree-detail h3{font-size:13px;margin:0 0 8px}.tasktree-detail p{margin:0;white-space:pre-wrap}.tasktree-reports{display:grid;gap:8px}.tasktree-reports article{border:1px solid var(--border-color);padding:10px}.tasktree-reports header{display:flex;justify-content:space-between;gap:10px}.tasktree-reports time,.tasktree-muted{font-size:11px;color:var(--text-secondary)}@media(max-width:720px){.tasktree-gantt{grid-template-columns:170px minmax(680px,1fr);max-height:calc(100vh - 250px)}.tasktree-detail dl{grid-template-columns:1fr}.tasktree-group-select select{min-width:130px;max-width:42vw}}
|
||||
.tasktree-page { display: grid; gap: 12px; min-width: 0; }
|
||||
.tasktree-workspace { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: calc(100dvh - 190px); min-height: 360px; border: 1px solid var(--border-color); background: var(--surface-primary); min-width: 0; overflow: hidden; }
|
||||
.tasktree-context { min-height: 58px; padding: 10px 14px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
||||
.tasktree-context p { margin: 3px 0 0; color: var(--text-secondary); font-size: 12px; }
|
||||
.tasktree-timeline-tools { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 12px; }
|
||||
.tasktree-zoom { display: grid; grid-template-columns: 28px 42px 28px; height: 28px; align-items: stretch; border: 1px solid var(--border-color); background: var(--surface-primary); }
|
||||
.tasktree-zoom button { display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
|
||||
.tasktree-zoom button:hover:not(:disabled) { background: var(--surface-secondary); color: var(--text-primary); }
|
||||
.tasktree-zoom button:disabled { opacity: 0.35; cursor: default; }
|
||||
.tasktree-zoom output { display: grid; place-items: center; border-inline: 1px solid var(--border-color); color: var(--text-primary); font-family: var(--console-font-mono); font-size: 10px; }
|
||||
.tasktree-gantt { display: grid; grid-template-columns: minmax(210px, 280px) minmax(0, 1fr); grid-template-rows: 34px minmax(0, 1fr); min-height: 0; overflow: hidden; }
|
||||
.tasktree-corner { display: flex; align-items: center; padding: 0 14px; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: transparent; font-size: 11px; font-weight: 700; }
|
||||
.tasktree-timeline-header { min-width: 0; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--border-color); background: transparent; scrollbar-width: none; overscroll-behavior-inline: contain; }
|
||||
.tasktree-timeline-header::-webkit-scrollbar,
|
||||
.tasktree-labels::-webkit-scrollbar { display: none; }
|
||||
.tasktree-days { width: var(--timeline-width); height: 100%; display: grid; grid-template-columns: repeat(var(--tick-count), var(--tick-width)); }
|
||||
.tasktree-days span { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 4px; overflow: hidden; border-right: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 10px; white-space: nowrap; }
|
||||
.tasktree-labels { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--border-color); scrollbar-width: none; overscroll-behavior-block: contain; }
|
||||
.tasktree-labels-canvas { min-height: 100%; display: grid; grid-auto-rows: 46px; align-content: start; }
|
||||
.tasktree-label { height: 46px; border-bottom: 1px solid var(--border-subtle); background: transparent; padding: 0 8px; display: flex; align-items: center; color: var(--text-primary); min-width: 0; }
|
||||
.tasktree-label:hover { background: rgb(255 255 255 / 32%); }
|
||||
.tasktree-label.subtask { padding-left: 30px; color: var(--text-secondary); }
|
||||
.tasktree-disclosure,
|
||||
.tasktree-disclosure-spacer { width: 24px; height: 28px; flex: 0 0 24px; }
|
||||
.tasktree-disclosure { display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
|
||||
.tasktree-disclosure:hover { color: var(--text-primary); background: var(--surface-secondary); }
|
||||
.tasktree-title { display: flex; align-items: center; gap: 8px; min-width: 0; height: 100%; padding: 0 4px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
|
||||
.tasktree-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.tasktree-status { width: 7px; height: 7px; border-radius: 50%; background: #83909c; flex: 0 0 auto; }
|
||||
.tasktree-status[data-status="completed"] { background: #1f9d67; }
|
||||
.tasktree-status[data-status="in_progress"] { background: #2376c9; }
|
||||
.tasktree-status[data-status="blocked"] { background: #c73e48; }
|
||||
.tasktree-timeline-body { min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; overscroll-behavior: contain; touch-action: pan-x pan-y; }
|
||||
.tasktree-timeline-canvas { width: var(--timeline-width); min-height: 100%; display: grid; grid-auto-rows: 46px; align-content: start; }
|
||||
.tasktree-track { position: relative; height: 46px; border-bottom: 1px solid var(--border-subtle); background-image: linear-gradient(to right, var(--border-subtle) 1px, transparent 1px); }
|
||||
.tasktree-bar { position: absolute; top: 10px; height: 26px; min-width: 18px; padding: 0; border: 0; border-radius: 4px; background: #2376c9; color: white; overflow: visible; }
|
||||
.tasktree-bar span { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); font-size: 10px; line-height: 1; white-space: nowrap; text-shadow: 0 1px 2px rgb(0 0 0 / 45%); pointer-events: none; }
|
||||
.tasktree-bar.subtask { top: 14px; height: 18px; background: #5f7d99; }
|
||||
.tasktree-bar.status-completed { background: #23845c; }
|
||||
.tasktree-bar.status-blocked { background: #b84149; }
|
||||
.tasktree-bar.status-pending { background: #687581; }
|
||||
.tasktree-milestone { position: absolute; top: 15px; z-index: 2; width: 16px; height: 16px; transform: translateX(-50%); background: #d39114; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 0 0.5px #664000) drop-shadow(0 1px 1px rgb(0 0 0 / 35%)); }
|
||||
.tasktree-statusbar { min-width: 0; min-height: 28px; padding: 0 10px; display: flex; align-items: center; gap: 0; overflow-x: auto; border-top: 1px solid var(--border-color); background: var(--surface-secondary); color: var(--text-secondary); font-family: var(--console-font-mono); font-size: 10px; white-space: nowrap; scrollbar-width: thin; }
|
||||
.tasktree-statusbar span { display: inline-flex; align-items: center; gap: 4px; }
|
||||
.tasktree-statusbar span + span::before { margin: 0 9px; color: var(--border-color); content: "|"; }
|
||||
.tasktree-statusbar strong { color: var(--text-primary); font-weight: 700; }
|
||||
.tasktree-statusbar-authority { margin-left: auto; }
|
||||
.tasktree-statusbar-authority::after { width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #1f9d67; content: ""; }
|
||||
.tasktree-group-select { display: flex; align-items: center; }
|
||||
.tasktree-group-select select { min-width: 180px; padding: 7px 10px; border: 1px solid var(--border-color); background: var(--surface-primary); color: var(--text-primary); }
|
||||
.tasktree-detail { display: grid; gap: 18px; }
|
||||
.tasktree-detail dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
|
||||
.tasktree-detail dl div { padding: 10px; border-left: 2px solid #2376c9; background: var(--surface-secondary); }
|
||||
.tasktree-detail dt { font-size: 11px; color: var(--text-secondary); }
|
||||
.tasktree-detail dd { margin: 4px 0 0; }
|
||||
.tasktree-detail h3 { font-size: 13px; margin: 0 0 8px; }
|
||||
.tasktree-detail p { margin: 0; white-space: pre-wrap; }
|
||||
.tasktree-description { font-size: 14px; line-height: 1.65; }
|
||||
.tasktree-reports { display: grid; gap: 8px; }
|
||||
.tasktree-reports article { border: 1px solid var(--border-color); padding: 10px; }
|
||||
.tasktree-reports time,
|
||||
.tasktree-muted { font-size: 11px; color: var(--text-secondary); }
|
||||
.tasktree-reports time { display: block; margin: 0 0 6px; text-align: right; }
|
||||
.tasktree-reports :deep(.content-viewer) { max-height: min(52vh, 520px); }
|
||||
.tasktree-reports :deep(.content-viewer-body) { overflow: auto; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.tasktree-workspace { height: calc(100dvh - 225px); min-height: 400px; }
|
||||
.tasktree-context { align-items: flex-start; }
|
||||
.tasktree-timeline-tools { flex-direction: column; align-items: flex-end; gap: 4px; }
|
||||
.tasktree-gantt { grid-template-columns: 170px minmax(0, 1fr); }
|
||||
.tasktree-statusbar-authority { margin-left: 0; }
|
||||
.tasktree-detail dl { grid-template-columns: 1fr; }
|
||||
.tasktree-group-select select { min-width: 130px; max-width: 42vw; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user