--- theme: smartblue --- ## 开源仓库地址 gitee [Git仓库地址:https://gitee.com/zhanhongzhu/zhanhongzhu.git](https://gitee.com/zhanhongzhu/zhanhongzhu.git) ## 应用地址 [windows应用地址下载 https://kestrel-task.cn](https://kestrel-task.cn/) ## 具体内容也可以看[🎉使用Tauri+vite+koa2+mysql开发了一款待办效率应用 ](https://juejin.cn/post/7383957030346326026) 这篇文章。 ## 💻技术栈 * **Tauri**: Tauri是一个用于构建现代桌面应用程序的工具，结合了Rust、Vue.js和Web技术，提供了强大的跨平台能力。 * **Vue3**: Vue3是流行的JavaScript框架Vue.js的最新版本，具有更好的性能、更好的TypeScript支持和更多的特性。 * **Vite5**: Vite是一个现代化的构建工具，Vite5是其最新版本，具有快速的冷启动、热模块替换和原生ES模块支持。 * **Koa2**: Koa2是一个基于Node.js的轻量级Web框架，使用异步函数处理中间件，提供了简洁而强大的Web开发体验。 * **MySQL**: MySQL是一个流行的关系型数据库管理系统，具有高性能、可靠性和广泛的应用领域，适用于各种规模的应用程序。 ## 我的待办快速添加待办任务，快速查看任务进度，摘要等。新增标签，分类，更好管理待办任务。通过标签、分类筛选待办任务，方便快捷。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6c4381b677d74783af71a81af662c6c5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b6u6IqS5LiN5py9:q75.awebp?rk3s=f64ab15b&x-expires=1764171001&x-signature=TfnnAJUzDnY5wNsLoXqImpDPoUI%3D) ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4c5f85d31f9345d581336102ebd413a1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b6u6IqS5LiN5py9:q75.awebp?rk3s=f64ab15b&x-expires=1764171001&x-signature=Y7v53VYUt%2F9HzE8ImeyXsV2NCLg%3D) ## OKR目标管理我的想法是通过OKR管理系列的任务，这样每完成一个小任务，就可以关闭一个小任务，直观又方便，等到所有关键的小任务都完成了，整个任务也就完成了。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/efe7fbc1bd48491eb0091d2fa8d3374f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b6u6IqS5LiN5py9:q75.awebp?rk3s=f64ab15b&x-expires=1764171001&x-signature=yP4hv%2Bk9uhkHjBSfjQSXd%2BiWKDQ%3D) ## 番茄工作法主要是一个计时的时钟，可以在专注计时的时候，专注地完成某项任务，快捷方便，使用番茄工作法，选择一个待完成的任务，将番茄时间设为25分钟，也可以选择其他的区间，专注工作，中途不允许做任何与该任务无关的事。时刻保持专注。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5a9cc62780ca4d2d9d3695207291e0a8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b6u6IqS5LiN5py9:q75.awebp?rk3s=f64ab15b&x-expires=1764171001&x-signature=J3VGRBPUMrWV%2BbtUAspa%2F3iXV8U%3D) ## 日历视图打开日历界面,通过视图的形式查看公历或农历日历下每个日期的待办提醒或任务事项。也可以在日历视图，添加任务。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6457aa4f3580439d91f967bed1d7fea2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b6u6IqS5LiN5py9:q75.awebp?rk3s=f64ab15b&x-expires=1764171001&x-signature=57MLSddcofFc8T3DkpQdBfXOZSo%3D) ## MEMO快速记录为了更好地帮你捕捉想法与灵感，提供了快速记录的输入框。专注记录想法，无需思考标题和排版。控制记录长度，降低记录压力，快速捕捉。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/78e6a240c6d742c191ffa746a4d1fce9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b6u6IqS5LiN5py9:q75.awebp?rk3s=f64ab15b&x-expires=1764171001&x-signature=57HM3gzv1TefxXqdmnErWDysEMw%3D) ## 统计功能展示了每天的待办数，以及每天新增的待办数量。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/57c9bb54167d41b0be4e8cd5e2798611~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b6u6IqS5LiN5py9:q75.awebp?rk3s=f64ab15b&x-expires=1764171001&x-signature=ce99yYIxTKFwqofB0n%2BmU7b9aG4%3D) # 展示功能点 ## 打包发布版本脚本命令 ```js "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "tauri": "tauri", "pub": "cd build && node ./updateVersion.js && pnpm tauri build && node ./publish.js" } ``` ```js npm run pub ``` ## 更新版本号以及更新publicKey ```js //build/publish.js import fs from 'fs' // 读取 tauri.conf.json const tauriConf = JSON.parse(fs.readFileSync('../src-tauri/tauri.conf.json', 'utf8')); let newVersion = tauriConf.package.version; //更新的版本号 // 读取 update.json let updateJson = JSON.parse(fs.readFileSync('update.json', 'utf8')); // 更新 update.json version updateJson.version = newVersion; //获取版本更新的内容 //签名、版本路径、发版日期 const signature = fs.readFileSync(`../src-tauri/target/release/bundle/msi/kestrel-task_${newVersion}_x64_zh-CN.msi.zip.sig`, 'utf8'); updateJson.platforms['windows-x86_64'].signature = signature; updateJson.platforms['windows-x86_64'].url = `https://kestrel-task.cn/kestrel-task_${newVersion}_x64_zh-CN.msi.zip` updateJson.pub_date = new Date(); fs.writeFileSync('update.json', JSON.stringify(updateJson, null, 2)); ``` ## 版本json信息 ```js //build/update.json { "version": "1.0.8", "notes": "kestrel-task", "pub_date": "2024-03-23T04:23:39.799Z", "platforms": { "windows-x86_64": { "signature": "dW50cnVzdGVkIGNvbW1lbnQ6IHNpZ25hdHVyZSBmcm9tIHRhdXJpIHNlY3JldCBrZXkKUlVSNVRCUit5Zjc1Y3JLV085djl6eTMza2NqMXFIV0paNkl2ckgrTGZTRm9wcEJwcUlkaTBhM2hvN3pSVkRUZXlTZ2NSejJremg2Vklja041VkZmdGlZZ0hxTGVVM2xlL3dFPQp0cnVzdGVkIGNvbW1lbnQ6IHRpbWVzdGFtcDoxNzExMTY3ODE5CWZpbGU6a2VzdHJlbC10YXNrXzEuMC44X3g2NF96aC1DTi5tc2kuemlwCldSWVdwb0dwRU1aQUJ2ckFra2FTMjBkcnZtL0FWU3grd3MzeHZVTDhWRFFFUC9QWkpzdUNvUG9HZXBrVmhWMkoxTkpGc2pkYU5rRHYwcVdHdlk5dkFBPT0K", "url": "https://kestrel-task.cn/kestrel-task_1.0.8_x64_zh-CN.msi.zip" } } } ``` ## 更新tauri.conf.json版本信息 ```js // build/updateVersion.js import fs from 'fs' // 读取 tauri.conf.json const tauriConf = JSON.parse(fs.readFileSync('../src-tauri/tauri.conf.json', 'utf8')); let version = tauriConf.package.version; //更新的版本号 //更新版本号 let versionParts = version.split('.').map(Number); versionParts[2] += 1; let newVersion =versionParts.join('.'); // 更新 tauri.conf.json version tauriConf.package.version = newVersion; fs.writeFileSync('../src-tauri/tauri.conf.json', JSON.stringify(tauriConf, null, 2)); ``` ## 使用tauri的http模块此处进行简单的封装，接口请求在控制台无法被查看到。如果觉得不方便，完全可以使用axios库。也是可以的。 ```js import { http } from "@tauri-apps/api"; export function request(config) { return new Promise((resolve, reject) => { http .fetch("https://kestrel-task.cn" + config.url, { method: "POST", body: http.Body.json(config.data), headers: { Authorization: token, }, }) .then((res) => { resolve(res.data.data); }) .catch((err) => { reject(err); }); }); } ``` ## http封装get请求 ```js export function requestGet(config, d) { let url = d ? config.url : "https://kestrel-task.cn" + config.url; return new Promise((resolve, reject) => { http .fetch(url, { method: "get", headers: { Authorization: token, }, }) .then((res) => { resolve(d ? res.data : res.data.data); }) .catch((err) => { reject(err); }); }); } ``` ## 使用封装的request函数 ```js export const login = (data) => { return request({ url: "/web/login", method: "post", data, }); }; ``` ## 使用WebviewWindow封装公共的窗口 ```js import { WebviewWindow } from '@tauri-apps/api/window' import { emit } from '@tauri-apps/api/event' // 创建新窗口 export async function createWin(args) { await emit('win-create', args) } // 获取窗口 export async function getWin(label) { return await WebviewWindow.getByLabel(label) } /** * @desc 设置窗口 * @param type {string} 'show'|'hide'|'close'|'min'|'max'|'max2min'|'exit'|'relaunch' */ export async function setWin(type) { await emit('win-' + type) } // 登录窗口 export async function loginWin() { await createWin({ label: 'Login', title: '登录', url: '/login', width: 320, height: 420, resizable: false, alwaysOnTop: true, }) } // ... ``` ```js /** * @desc 封装新开多窗体 */ import { WebviewWindow, appWindow, getAll, getCurrent, } from "@tauri-apps/api/window"; import { relaunch, exit } from "@tauri-apps/api/process"; import { emit, listen } from "@tauri-apps/api/event"; import { setWin } from "./actions.js"; // 系统参数配置 export const windowConfig = { label: null, // 窗口唯一label title: "", // 窗口标题 url: "", // 路由地址url width: 900, // 窗口宽度 height: 640, // 窗口高度 minWidth: null, // 窗口最小宽度 minHeight: null, // 窗口最小高度 x: null, // 窗口相对于屏幕左侧坐标 y: null, // 窗口相对于屏幕顶端坐标 center: true, // 窗口居中显示 resizable: true, // 是否支持缩放 maximized: false, // 最大化窗口 decorations: true, // 窗口是否无边框及导航条 alwaysOnTop: false, // 置顶窗口 }; class Windows { constructor() { this.mainWin = null; } // 获取窗口 getWin(label) { return WebviewWindow.getByLabel(label); } // 获取全部窗口 getAllWin() { return getAll(); } // 创建新窗口 async createWin(options) { const args = Object.assign({}, windowConfig, options); // 判断窗口是否存在 const existWin = getAll().find((w) => w.label == args.label); if (existWin) { if (existWin.label.indexOf("main") == -1) { await existWin?.unminimize(); await existWin?.setFocus(); return; } await existWin?.close(); } // 创建窗口对象 let win = new WebviewWindow(args.label, args); // 是否最大化 if (args.maximized && args.resizable) { win.maximize(); } // 窗口创建完毕/失败 win.once("tauri://created", async () => { console.log("window create success!"); }); win.once("tauri://error", async () => { console.log("window create error!"); }); } // 开启主进程监听事件 async listen() { // 创建新窗体 await listen("win-create", (event) => { this.createWin(JSON.parse(event.payload)); }); // 显示窗体 await listen("win-show", async (event) => { if (appWindow.label.indexOf("main") == -1) return; await appWindow.show(); await appWindow.unminimize(); await appWindow.setFocus(); }); // 隐藏窗体 await listen("win-hide", async (event) => { if (appWindow.label.indexOf("main") == -1) return; await appWindow.hide(); }); // 退出应用 await listen("win-exit", async (event) => { setWin("logout"); await exit(); }); // 重启应用 await listen("win-relaunch", async (event) => { await relaunch(); }); // 主/渲染进程传参 await listen("win-setdata", async (event) => { await emit("win-postdata", JSON.parse(event.payload)); }); } } export default Windows; ``` ## 封装Echart组件，便于使用 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c58317a1cff24d27a5a4f4bfd69556bb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b6u6IqS5LiN5py9:q75.awebp?rk3s=f64ab15b&x-expires=1764171001&x-signature=qebaaJWGQT2q4yic6eqnk%2F664l0%3D) ```js ``` ## echart主题模块 ```js //echarts-theme-T.js const T = { color: ['#409EFF', '#36CE9E', '#f56e6a', '#626c91', '#edb00d', '#909399'], // 颜色数组 grid: { // 网格 left: '3%', // 左边距 right: '3%', // 右边距 bottom: '10', // 下边距 top: '40', // 上边距 containLabel: true // 包含标签 }, legend: { // 图例 textStyle: { // 文本样式 color: '#999' // 颜色 }, inactiveColor: 'rgba(128,128,128,0.4)' // 不活跃颜色 }, categoryAxis: { // 类别轴 axisLine: { // 轴线 show: true, // 显示 lineStyle: { // 线条样式 color: 'rgba(128,128,128,0.2)', // 颜色 width: 1 // 宽度 } }, axisTick: { // 刻度线 show: false, // 不显示 lineStyle: { // 线条样式 color: '#000' // 颜色 } }, axisLabel: { // 轴标签 color: '#999' // 颜色 }, splitLine: { // 分隔线 show: false, // 不显示 lineStyle: { // 线条样式 color: ['#eee'] // 颜色 } }, splitArea: { // 分隔区域 show: false, // 不显示 areaStyle: { // 区域样式 color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)'] // 颜色 } } }, valueAxis: { // 数值轴 axisLine: { // 轴线 show: false, // 不显示 lineStyle: { // 线条样式 color: '#999' // 颜色 } }, splitLine: { // 分隔线 show: true, // 显示 lineStyle: { // 线条样式 color: 'rgba(128,128,128,0.2)' // 颜色 } } } } export default T ``` ## 封装公共的弹窗组件 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b90b6962ec454c8c83239e4ee7df1557~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b6u6IqS5LiN5py9:q75.awebp?rk3s=f64ab15b&x-expires=1764171001&x-signature=VNYZHj8lSAEgSsi2ND9IiNjRJ%2BQ%3D) ```js ``` ## 封装ResizeObserver函数主要是监听元素的变化或者窗口的变化。有一部分用到了可以拉伸的左右布局的模块。 ```js //directive/index.js // 监听元素大小变化的指令 const map = new WeakMap(); const ob = new ResizeObserver((entries) => { for (const entry of entries) { // 获取dom元素的回调 const handler = map.get(entry.target); //存在回调函数 if (handler) { // 将监听的值给回调函数 handler({ width: entry.borderBoxSize[0].inlineSize, height: entry.borderBoxSize[0].blockSize, }); } } }); export const Resize = { mounted(el, binding) { //将dom与回调的关系塞入map map.set(el, binding.value); //监听el元素的变化 ob.observe(el); }, unmounted(el) { //取消监听 ob.unobserve(el); }, }; const directives = { Resize }; const registerDirective = (app) => { Object.keys(directives).forEach((key) => { app.directive(key, directives[key]); }); }; export default registerDirective; ``` ## 公共拖曳布局的函数主要是用于左右布局宽度的变化，可以使用鼠标进行拖曳，改变左右盒子的高度。 ```js export const useCommon = ()=>{ function setLayoutDrag(dragId) { const resize = document.getElementById(dragId) let previousElement = resize.previousSibling let nextElement = resize.nextSibling let previousTag = previousElement.tagName let nextTag = nextElement.tagName resize.onmousedown = (e) => { const startX = e.clientX const startY = e.clientY let type = '' if (previousTag === 'ASIDE' && nextTag === 'MAIN') { type = 'ASIDE-MAIN' } else if (previousTag === 'MAIN' && nextTag === 'ASIDE') { type = 'MAIN-ASIDE' } else if ( (previousTag === 'HEADER' && nextTag === 'MAIN') || (previousTag === 'FOOTER' && nextTag === 'MAIN') ) { type = 'HEADER-MAIN' } else if ( (previousTag === 'MAIN' && nextTag === 'HEADER') || (previousTag === 'MAIN' && nextTag === 'FOOTER') ) { type = 'MAIN-HEADER' } let initWidth = 0, initHeight = 0 if (type === 'ASIDE-MAIN') { initWidth = previousElement.clientWidth // 初始位置 } else if (type === 'MAIN-ASIDE') { initWidth = nextElement.clientWidth // 初始位置 } else if (type === 'HEADER-MAIN') { initHeight = previousElement.clientHeight } else if (type === 'MAIN-HEADER') { initHeight = nextElement.clientHeight } document.onmousemove = (k) => { const endX = k.clientX const endY = k.clientY let moveLen = endX - startX // 横向移动宽度 let moveHeight = endY - startY // 纵向移动高度 switch (type) { case 'ASIDE-MAIN': let asideMainWidth = initWidth + moveLen if (moveLen < 0) { // 向左移 if (asideMainWidth > 400) { // 左侧剩90 previousElement.style.width = asideMainWidth + 'px' } } else { // 向右移动 if (nextElement.clientWidth > 400) { // 右侧剩90 previousElement.style.width = asideMainWidth + 'px' } } break case 'MAIN-ASIDE': let mainAsideWidth = initWidth - moveLen if (moveLen < 0) { // 向左移 if (previousElement.clientWidth > 400) { // 左侧剩90 nextElement.style.width = mainAsideWidth + 'px' } } else { // 向右移动 if (mainAsideWidth > 400) { nextElement.style.width = mainAsideWidth + 'px' } } break case 'HEADER-MAIN': { let headerMainHeight = initHeight + moveHeight if (moveHeight < 0) { // 向上移 if (headerMainHeight > 60) { // 上侧剩90 previousElement.style.height = headerMainHeight + 'px' } } else { // 向下移动 if (nextElement.clientHeight > 60) { // 下侧剩90 previousElement.style.height = headerMainHeight + 'px' } } break } case 'MAIN-HEADER': { let mainHeaderHeight = initHeight - moveHeight if (moveHeight < 0) { // 向上移 if (previousElement.clientHeight > 60) { // 左侧剩90 nextElement.style.height = mainHeaderHeight + 'px' } } else { // 向下移动 if (mainHeaderHeight > 60) { nextElement.style.height = mainHeaderHeight + 'px' } } break } default: } } document.onmouseup = (evt) => { document.onmousemove = null document.onmouseup = null resize.releaseCapture && resize.releaseCapture() } resize.setCapture && resize.setCapture() return false } } return { setLayoutDrag } } ``` ## 公共布局此处的可以自己查看代码。 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a1ed96f041ad4bbf8a4f75e9b19ab10b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5b6u6IqS5LiN5py9:q75.awebp?rk3s=f64ab15b&x-expires=1764171001&x-signature=3KZ5bSQipSbEApJr%2FOE4JUZHHUw%3D) ## invoke调用rust函数，关闭splash ```js import { invoke } from '@tauri-apps/api/tauri' onMounted(() => { // window.addEventListener('contextmenu', (e) => e.preventDefault(), false) document.addEventListener('DOMContentLoaded', () => { // This will wait for the window to load, but you could // run this function on whatever trigger you want setTimeout(() => { invoke('close_splashscreen') }, 1000) }) }) ``` 🎉结语感兴趣的可以试试，有不清楚的问题，关于tauri开发方面的问题，也可以一起交流。欢迎加我：zhan_1337608148。一起成长，一起进步。