码语库记的开发流程

码语库记的功能介绍，和以及实现方法

码语库记的仓库地址为：码语库记

功能介绍

全部功能预览

• 搜索所写过的所有笔记，便签，函数功能
• 笔记
• 便签（随记）
• 函数笔记
• 设置

搜索

实现方式：

遍历所有文章，便签，查找所匹配的项目。

这个比较简单，就不多说了

笔记

提供所有MarkDown功能，使用vditor作为markdown编辑器

支持及时渲染，类似Typora

支持笔记分类

支持常规操作，删除，重命名，新建，导出

便签

不使用MarkDown编辑器，因为便签讲究快速，便捷

所以只支持输入文字，加粗，斜体，粘贴图片

可以使用快捷键快速呼出便签，快速录入。

便签名默认为第一行输入的内容

支持常规操作，删除，重命名，新建，不支持导出

函数笔记

规划中…

设置

配置文件将在第一次打开软件自动在C:\User\YourUserName\AppData\Roaming\CodeSpeak-LibraryNotes下创建一个名为scln-config.json文件

具体内容为

{
    "author": "xiaowumin & SanWei",
    "title": "CodeSpeak-LibraryNotes",
    "description": "CodeSpeak-LibraryNotes",
    "warehouse": {
        "main": "https://gitee.com/xiaowumin-mark/CodeSpeak-LibraryNotes",
        "releases": "https://gitee.com/xiaowumin-mark/CodeSpeak-LibraryNotes/releases",
        "all_releases": "https://gitee.com/api/v5/repos/xiaowumin-mark/CodeSpeak-LibraryNotes/releases?page=1&per_page=100",
        "latest_release": "https://gitee.com/api/v5/repos/xiaowumin-mark/CodeSpeak-LibraryNotes/releases/latest"
    },
    "note_path": "C:\\Users\\YourUserName\\AppData\\Local\\CodeSpeak-LibraryNotes",
    "config_path": "C:\\Users\\YourUserName\\AppData\\Roaming\\CodeSpeak-LibraryNotes\\csln-config.json",
    "setting": {
        "auto_update": true,
        "theme": "auto",
        "color_theme": "auto"
    }
}

功能难点（我认为）

主题切换效果

起因：bilibili客户端的主题切换效果很炫酷，但是一直没有思路。

偶然有一天想起可以用animate动画的clip-path属性画圆

但是因为主题要变动所以画圆时整个body元素是被切割的

偶然有一天，知道了startViewTransition这个api，于是一切就变得顺利起来了

只要在document.startViewTransition里面运行改变样式的代码，这样就可以让主题变化变得不那么生硬

但是我想要的是画圆效果，就必须要将动画加上去

于是去看文档https://developer.mozilla.org/zh-CN/docs/Web/API/Document/startViewTransition

最后封装为一个函数,要用到勾股定理哦~

function changeTheme(type, if_animate = true) {
    let html = document.documentElement
    //html.classList.add("all-animate")
    //console.log(html.classList);
    const transition = document.startViewTransition(async () => {

        let o_type = getThemeType()
        if (type == o_type) {
            return
        } else if (type == "dark") {
            if (!document.documentElement.classList.contains('mdui-theme-dark')) {
                document.documentElement.classList.add('mdui-theme-dark')
                document.querySelector(".nav").style.borderRight = "1px solid rgb(45 45 45)"
            }
        } else if (type == "light") {
            if (document.documentElement.classList.contains('mdui-theme-dark')) {
                document.documentElement.classList.remove('mdui-theme-dark')
                document.querySelector(".nav").style.borderRight = "1px solid rgb(230 230 230)"
            }
        }

    });
    if (if_animate) {


        const x = event.pageX || (event.clientX + window.scrollX);
        const y = event.pageY || (event.clientY + window.scrollY);
        // 从点击点到窗口最远边缘的距离，这个距离即为圆的半径，用于确定一个圆形裁剪路径 (clip path) 的最大尺寸，以便覆盖整个视窗。
        // 勾股定理：a² + b² = c²
        const radius = Math.sqrt(Math.max(x, (window.innerWidth - x)) ** 2 + Math.max(y, (window.innerHeight - y)) ** 2)
        let clipPath = [
            `circle(0 at ${x}px ${y}px)`,
            `circle(${radius}px at ${x}px ${y}px)`,
        ]
        let is_dark = html.classList.contains('mdui-theme-dark')
        transition.ready.then(() => {
            // 实现过渡的过程 circle
            document.documentElement.animate(
                {
                    clipPath: clipPath,
                },
                {
                    duration: 300,
                    pseudoElement: '::view-transition-new(root)',
                }
            )
        })
    }

}

这是最终的效果图 ↓

这个东西也是花了我一天……