求助:用Dataviewjs写一个任务管理面版,无法渲染成task插件展示的任务列表

遇到的问题

Obsidian1.8.10,主题是Minimal。
让AI写了一个Dataviewjs管理任务管理的面版,但AI给出的任务列表展示不能渲染成Task语法的任务列表,给了很多种提示,都实现不了。

尝试了什么

目前可实现的是能渲染成task插件的任务样式,但是在选择任务分类时,任务列表不能更新成分类对应的任务列表,它会展示所有点击过的分类的任务列表。

希望解决

通过Dataviewjs代码查询对应分类的任务列表,任务列表要渲染成task插件的任务展示样式,以便于在当前页面可以编辑任务。

希望实现的是:我的任务分类是:逾期、进行中、待办、今日、明日、一周内、一周后(未来)、完成
当点击「逾期」分类时,下方只显示「逾期」的任务列表
当点击「进行中」分类时,下方只显示「进行中」的任务列表
且,显示的任务列表是渲染成task插件的任务样式,可以在当前页面进行任务编辑。

现在能部分满足要求的代码

// 设置初始分类

const today = window.moment();
let selectedCategory = "今日"; // 初始分类

// 分类列表
const categories = [
    "逾期", "进行中", "待办", "今日", "明日", "一周内", "一周后", "已完成"
];

// 分类对应的查询模板
const queries = {
    "逾期": `
((due before today) OR (scheduled before today)) AND (not done) AND (status.type is not IN_PROGRESS)
(path includes 01Projects) OR (path includes 02Business) OR (path includes 00Todolist) OR (path includes People) OR (path includes 00Journal) 
sort by priority
sort by created reverse
short mode
show tree
`,
    "待办": `
(not done) AND ((no due date) AND (no scheduled date)) AND (status.type is not IN_PROGRESS) 
(path includes 01Projects) OR (path includes 02Business) OR (path includes 00Todolist) OR (path includes People) OR (path includes 00Journal) 
is not recurring
sort by priority
sort by created reverse
short mode
show tree
`,
    "进行中": `
status.type is IN_PROGRESS 
(path includes 01Projects) OR (path includes 02Business) OR (path includes 00Todolist) OR (path includes People) OR (path includes 00Journal)   
sort by priority
sort by due
sort by created
short mode
show tree
`,
    "今日": `
(not done) AND ((scheduled on today) OR (due on today)) AND (status.type is not IN_PROGRESS) 
(path includes 01Projects) OR (path includes 02Business) OR (path includes 00Todolist) OR (path includes People) OR (path includes 00Journal)    
is not recurring
sort by priority
sort by due
sort by created
short mode
show tree
`,
    "明日": `
(not done) AND ((due on tomorrow) OR (scheduled on tomorrow)) AND (status.type is not IN_PROGRESS) 
(path includes 01Projects) OR (path includes 02Business) OR (path includes 00Todolist) OR (path includes People) OR (path includes 00Journal)   
is not recurring
sort by priority
sort by due
sort by created
short mode
show tree
`,
    "一周内": `
(not done) AND (status.type is not IN_PROGRESS) 
((due after tomorrow) AND (due before in 7 day)) OR ((scheduled after tomorrow) AND (scheduled before in 7 day))
(path includes 01Projects) OR (path includes 02Business) OR (path includes 00Todolist) OR (path includes People) OR (path includes 00Journal)  
is not recurring
sort by priority
sort by due
sort by created
short mode
show tree
`,
    "一周后": `
(not done) AND (status.type is not IN_PROGRESS) 
((due after in 7 day)) OR ((scheduled after in 7 day))
(path includes 01Projects) OR (path includes 02Business) OR (path includes 00Todolist) OR (path includes People) OR (path includes 00Journal)  
is not recurring
sort by priority
sort by due
sort by created
short mode
show tree
`,
    "已完成": `
done
(path includes 01Projects) OR (path includes 02Business) OR (path includes 00Todolist) OR (path includes People) OR (path includes 00Journal)  
is not recurring
sort by priority
sort by due
sort by created
short mode
show tree
`
};

// 创建按钮区域
const buttonContainer = document.createElement("div");
buttonContainer.style.display = "flex";
buttonContainer.style.flexWrap = "wrap";
buttonContainer.style.justifyContent = "center";
buttonContainer.style.marginBottom = "10px";

const defaultButtonStyle = {
    border: "1px solid var(--background-modifier-border)",
    borderRadius: "6px",
    margin: "5px",
    padding: "5px 10px",
    cursor: "pointer",
    fontSize: "medium",
    backgroundColor: "var(--background-primary)",
    color: "var(--text-normal)"
};

let selectedButton = null;

// 创建任务显示区域
const queryContainer = document.createElement("div");

// 更新任务列表
function updateQuery() {
    const query = queries[selectedCategory];

    // 清空旧内容
    queryContainer.innerHTML = "";

    // 创建一个临时虚拟 markdown 块,动态执行 tasks 查询
    const markdownQuery = `\`\`\`tasks\n${query}\n\`\`\``;

    // 用 Dataview API 渲染出来
    dv.el("div", markdownQuery);
}

// 创建按钮并绑定事件
categories.forEach(category => {
    const button = document.createElement("button");
    button.textContent = category;
    Object.assign(button.style, defaultButtonStyle);

    button.addEventListener("click", () => {
        selectedCategory = category;
        updateQuery();

        if (selectedButton) {
            Object.assign(selectedButton.style, defaultButtonStyle);
        }
        button.style.backgroundColor = "var(--interactive-accent)";
        button.style.color = "var(--text-on-accent)";
        selectedButton = button;
    });

    buttonContainer.appendChild(button);
});

// 插入到页面
dv.container.appendChild(buttonContainer);
dv.container.appendChild(queryContainer);

// 初始显示默认分类
updateQuery();
const defaultIndex = categories.indexOf(selectedCategory);
if (defaultIndex >= 0) {
    buttonContainer.children[defaultIndex].click();
}

可以尝试用task插件的符号来识别完成任务,未完成任务。

现在不是任务筛选的问题,是任务显示的样式的问题。

截图看下什么情况。

image