TreeSelect UI编程题求助：高效实现renderTreeSelect函数

近期参加在线测评（OA）时遇到TreeSelect编程题失利，特此求助该题的高效解法，欢迎各位提供思路。作为社区新人，若问题表述欠妥敬请谅解。

题目规则说明 #

节点状态定义 #

• checked：子树中所有叶子节点均被选中
• partially-checked：子树中部分（非全部）叶子节点被选中
• unchecked：子树中无叶子节点被选中

点击交互逻辑 #

• 若节点处于checked状态，点击后取消子树所有叶子节点的选中状态
• 若节点处于partially-checked或unchecked状态，点击后选中子树所有叶子节点

输入输出要求 #

树结构通过叶子节点的斜杠分隔路径给出（假设所有节点名称唯一）。需实现renderTreeSelect函数，接收以下两个参数：

1. paths：字符串数组，存储所有叶子节点的路径
2. clicks：字符串数组，存储一系列节点点击操作路径

函数需返回树结构的渲染字符串，满足：

• 按层级缩进，每层用一个点（.）表示
• 用[v]、[o]、[ ]分别对应checked、partially-checked、unchecked状态
• 子节点按名称排序

初始函数框架 #

/*
Complete the 'renderTreeSelect' function below.
The function is expected to return a STRING. The function accepts following parameters:
1. STRING_ARRAY paths 2. STRING_ARRAY clicks
*/

function renderTreeSelect(paths, clicks) {

}

个人思路回顾 #

我尝试创建包含状态、子节点列表与路径映射的Node结构，先构建完整树结构，再处理点击操作时将节点状态向上传播至父节点，最后遍历树生成渲染字符串，但未能成功完成整个流程。

内容的提问来源于stack exchange，提问作者callbackJs