Document icons support the use of dynamic icons

[TCOTC]

文档图标支持使用动态图标

关联 #12939

交互参考 Wolai：

[TCOTC]

另外还有个需求：type 8 支持使用模板来显示文本

[88250]

这个目前只考虑在文档图标上实现，否则导出会有问题。

[Achuan-2]

另外还有个需求：type 8 支持使用模板来显示文本

目前type 8不适合输入太多文字的，5-6个字感觉就是极限了，再多也看不清

更有意义的是date用模板语法输入，不过用模板设置就行了

[TCOTC]

不用输入太多文本，几个字就行，比如 “第 X 天”，比如查询某个任务列表块的完成进度 “XX%” 。

[Achuan-2]

不用输入太多文本，几个字就行，比如 “第 X 天”，比如查询某个任务列表块的完成进度 “XX%” 。

注意content输入下面特殊符号，需要用URL编码替代，否则导致解析参数失败或丢失

• %: %25
• +: %2B
• #: %23
• &: %26

[TCOTC]

另外我发现像%、#之类的符号，输入会截断URL，需要处理下

符号在渲染的时候用 HTML 字符实体

[Vanessa219]

#12939

[Achuan-2]

动态图标使用的时候，可以直接用api/icon/getDynamicIcon，例如api/icon/getDynamicIcon?color=red&type=7&lang=zh_CN，这样用伺服的时候也能用而不失效

[Achuan-2]

我觉得3.1.11可以先支持dailynote模板设置动态图标（目前dailynote模板还不支持用网络图标），文档添加动态图标的按钮界面之后再出

[TCOTC]

我觉得应该先搞这个 👉 #12926

[Achuan-2]

需要改进下：
如果文档图标本来就是动态图标，希望点击动态图标设置界面，会读取现在图标的参数，加载到选项里，方便修改，而不是所有选项都要重新设置

[TCOTC]

还有格式化这里，需要根据选择的语种显示不同的语言（而不是 简体/English）：

[SaXz2]

BUG反馈： 使用模版后文档树与页面图标颜色不一致

[88250]

@SaXz2 我这里无法重现，麻烦录屏看下

[TCOTC]

还有页签图标的圆角看起来怪怪的，我建议去掉圆角：

[SaXz2]

@SaXz2 我这里无法重现，麻烦录屏看下

2024-11-10.20-08-39_batch.mp4

Todo2.md
模版文件

[Achuan-2]

@SaXz2 我这里无法重现，麻烦录屏看下

2024-11-10.20-08-39_batch.mp4
Todo2.md 模版文件

直接用& 试试，不要用HTML实体编码

[SaXz2]

@SaXz2 我这里无法重现，麻烦录屏看下

2024-11-10.20-08-39_batch.mp4
Todo2.md 模版文件

直接用& 试试，不要用HTML实体编码

直接用&的话就生成不了图标了

[Achuan-2]

@SaXz2 我这里无法重现，麻烦录屏看下

2024-11-10.20-08-39_batch.mp4
Todo2.md 模版文件

直接用& 试试，不要用HTML实体编码

直接用&的话就生成不了图标了

我这边用&是正常的

URL直接用&会被截断，因为这个不是URL编码，之所以文档图标可以显示，可能是额外做了编码转换，而文档树图标没有额外处理

[SaXz2]

可以了，我把 amp； 去掉就行了仅保留 & 就能正常识别了

[HibernalGlow]

这里的颜色能自定义吗 我想改成自己常用的

[Achuan-2]

这里的颜色能自定义吗 我想改成自己常用的

@Vanessa219 ，我觉得可以像自定义文档图标一样，颜色变量暴露出来，通过js代码片段来修改颜色变量。css变量也行，如果做不到修改变量，统一更改过去的图标，就算了，能改当前的就行

感觉icon保存的时候color用变量，然后渲染的时候替换为具体的值，这个是不是可以做到

[HibernalGlow]

能不能记忆自定义的内容啊 包括日期 文字颜色啥的 每次都要重新填

[TCOTC]

输入框还有一点布局偏移问题：

video.webm

[Vanessa219]

颜色在输入框中输入 #色值即可，已修改下列问题

• 回填
• 格式化
• tab 圆角
• 位置偏移

[Achuan-2]

@Vanessa219 回填会自动往颜色里添加#，如果填入的是自带的变量比如blue就会有问题，希望不额外处理

由于回填，导致输入失效，颜色变为默认

[Vanessa219]

统一使用 # 号开头的色值代码，不然不好处理。

[Achuan-2]

统一使用 # 号开头的色值代码，不然不好处理。

好吧，相当于文档图标直接砍掉了直接输入color=red这种用法吗？（虽然我之前意思是文档图标也支持用这种用法）

那我直接写个代码片段，把文档图标的动态图标给替换成自己需要的颜色吧

[Achuan-2]

自定义动态图标的颜色，js代码片段写好了，发现用js直接更改background值，会自动变为rgb值，末尾还会加上"；"，需要改用square.setAttribute('style'
@AvoidantPerDis

(async () => {

    // 定义观察DOM变化的函数
    function observeDomChange(targetNode, callback) {
        const config = { childList: true, subtree: true };
        const observer = new MutationObserver((mutationsList) => {
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    callback(mutation);
                }
            }
        });
        observer.observe(targetNode, config);
        return observer;
    }

    // 定义颜色替换的逻辑
    function updateColors() {
        // 定义新的颜色数组
        const newColors = [
            "#d13d51", // red
            "#3eb0ea", // blue
            "#eec468", // yellow
            "#52E0B8", // green
            "#a36cda", // purple
            "#f183aa", // pink
            "#f3865e", // orange
            "#576574" // grey
        ];

        const colorSquares = document.querySelectorAll('.fn__flex.emoji__dynamic-color .color__square');
        colorSquares.forEach((square, index) => {
                square.setAttribute('style', `background-color:${newColors[index]}`);
        });
        console.log("颜色替换")

    }

    // 选择要观察的节点（通常是整个文档或特定的容器）
    const targetNode = document.body;

    // 开始观察DOM变化，并在检测到.color__square元素时运行updateColors
    observeDomChange(targetNode, (mutation) => {
        // 监听代码列表的弹窗事件
        if (mutation.target.classList.contains("fn__flex")) {
            const dialog_emoji_open = document.querySelector('.b3-dialog--open[data-key="dialog-emojis"]');
            console.log(dialog_emoji_open)
            if (dialog_emoji_open) {
                updateColors();
            }
        }

    });


})();

[TCOTC]

@Vanessa219 需要给 .emojis__tabbody 元素增加 scrollbar-gutter: stable; 才能避免偏移，不过左右两边的宽度看起来会不一样：

目前输入框还是有偏移：

video.webm

[Vanessa219]

侧边有点不好看，先不改了。