码语库记memo便签实现

码语库记memo实现

第一版：

使用markdown作为编辑器，感觉有点牺牲效率，也不是所有人都会markdown的编辑

第二版

所以我又出了个方案，不用markdown，使用html自带的contenteditable属性。可以将html变为可编辑属性，可以粘贴图片，输入文字。

首先将函数先封装好

让后将ipc事件注册好

整体逻辑是：

在memo文件夹下有个config.json配置文件，格式如下

[
    {
        name:"",
        path:"",
        time:"unix",
        id:"unix"
    },
    {
        ...
    }
        ...
]

其中path指向的是文件本身(码语库记识别自创的文件格式.mj)

一个小问题

我打算在编辑便签时新建一个窗口，但是想要打开便签编辑的窗口需要指定路由

let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        nodeIntegration: true, // 允许使用node
        contextIsolation: false, // 允许使用contextBridge
        enableRemoteModule: true, // 允许使用remote
    }
})
if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL+"?page=ememo")
} else {
    win.loadFile("dist/index.html?page=ememo")
}

win.webContents.openDevTools()

我于是想到了这个方法，指定query参数，让后让页面自动获取，让后跳转到对应的页面

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'mdui/mdui.css';
import 'mdui';
import 'mdui/components/icon.js';
const app = createApp(App)
app.use(router)
// 获取query page参数
const query = window.location.search;
// 获取query参数中的page参数
const page = new URLSearchParams(query).get('page');

app.mount('#app')

if (page) {
    router.push("/" + page)
}

其中遇到了一个小问题，花了我一个多小时

这就很神奇，我也是在哪怀疑是不是vue-router有bug，后来也是看到了一篇文章https://blog.csdn.net/Jone_hui/article/details/123041404

感谢这位大哥🙏！！

因为useRoute是异步的所以有延时！！

只要在main.js中等待他加载完成就行

router.isReady().then(() => app.mount('#app'))

也是服了，整天跟bug斗智斗勇。。。。

设置同步功能

测试的时候想到一个问题

当在主页更改主题后，便签的主题不会立马变化

所以我打算用浏览器的便签页通信功能BroadcastChannel，这是具体文档->BroadcastChannel

写到这里发现主页的主题切换有过渡，但是便签没有，有点不统一

写到这里的时候，我的脑子里突然冒出一个点子

是不是可以为多个窗口添加动画效果，就是当更改主题后，其他窗口可以接力主窗口的动画

只需获取鼠标位置和窗口位置，再加上一点点小动画，具体是这么算的 ↓

let x = 鼠标.x - 窗口.x
let y = 鼠标.y - 窗口.y
// 后面减去一些，可以做一个矫正，因为可能不准

于是就得到了遥遥领先于同行的主题切换效果，请看VCR：

有些不同步，是鼠标位置计算不准，后面会优化滴~