[js] 思源笔记左侧空白部分显示自定义文字

使用 CSS 和 js 配合，实现思源笔记窗口获得和失去焦点时，左侧空白竖条显示不同的文字，代码如下（从 AI 获得）:

CSS 代码

.fn__flex-1.dock__item--space {
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	font-size: 20px; /* 字体大小 */
	writing-mode: vertical-rl; /* 竖向排列 */
	text-align: center; /* 文字居中对齐 */
}

js 代码

// 获取目标元素
var targetElement = document.querySelector('div.fn__flex-1.dock__item--space');
targetElement.textContent = '✍ 追 求 效 率 ● 过 犹 不 及';
// 监听窗口获得焦点事件
window.addEventListener('focus', function() {
    // 清除元素上的文本，恢复原状
    targetElement.textContent = '✍ 追 求 效 率 ● 过 犹 不 及';
});

// 监听窗口失去焦点事件
window.addEventListener('blur', function() {
    // 在元素上显示“失去焦点”文字
    targetElement.textContent = '🚫 失 去 焦 点 → 无 目 录';
});