把 Transity 搬进浏览器Leptos Web 版本与 WASM 演示的构建部署指南【免费下载链接】TransityKeep track of your , , , , on your command line with the plain text accounting tool of the future! 项目地址: https://gitcode.com/gh_mirrors/tr/TransityTransity 是一款用 Rust 编写的开源纯文本记账工具plain text accounting让你在命令行中轻松记录和查询 现金、 时间、 资产、 家畜、 啤酒等各种账目。它不仅是终端工具还同时提供了基于 Leptos 的 Web 版本以及完全在浏览器内运行、不发送任何数据到服务器的 WASM 演示。本文就是一份面向新手的完整构建部署指南带你一步步把 Transity 网页版从源码编译出来、本地运行并部署上线。认识 Transity 网页版Web 版本与 WASM 演示两种形态在动手之前先搞清楚 Transity 网页版的两条技术路线这决定了后面不同的构建命令Leptos Web 版本SSR Hydration基于 Leptos 0.8 与 Axum 构建服务端渲染页面再通过 hydration 在浏览器端接管交互。功能包括账户余额表、交易流水列表、交易附件预览等。核心代码位于src/app.rs前端组件与路由和src/server.rsAxum 服务端。WASM 演示纯浏览器计算通过src/wasm.rs用wasm_bindgen暴露get_balance接口把账本解析与余额计算逻辑编译成 WebAssembly 模块。数据全程留在本地浏览器隐私性极佳。上图展示了 Transity 输出的账户余额视图——多币种€、$、BTC账户余额一目了然这正是网页版中 Balance 页面要呈现的核心数据。构建前的准备工作环境与依赖清单开始构建前请先确认电脑上已安装以下工具工具用途Rust 工具链编译 Transity 本体与 Web 后端wasm32-unknown-unknown 目标编译 WebAssembly 必需的交叉编译目标cargo-leptosLeptos 官方构建/开发工具wasm-pack打包 WASM 演示模块wasm32 目标可以用一条命令安装rustup target add wasm32-unknown-unknown一键构建 Leptos Web 版本make server-build 完整步骤仓库根目录的makefile已经把构建流程封装好了。构建 Web 版本只需执行make server-build该命令等价于cargo leptos build它会读取Cargo.toml中[package.metadata.leptos]的配置输出目录target/site、样式文件style/main.css等完成 SSR 编译与前端资源打包。最妙的是JS、CSS、WASM 资源会被直接嵌入最终二进制部署时你只需要分发一个可执行文件无需手动拷贝静态资源。如上图所示每笔交易都带时间戳、转出方、转入方与金额网页版中的 Transactions 页面就是用表格形式展示这些流水并支持高亮没有附件的记录。本地开发调试热重载模式运行 Web 服务开发阶段使用make dev可以获得极佳的迭代体验make dev它等价于cargo leptos watch -- server examples/journal.yaml会启动一个监听127.0.0.1:3000的本地服务并启用热重载——你每次保存源码页面都会自动刷新。开发模式下JS/CSS/WASM 会直接从磁盘加载判断逻辑见src/server.rs中的dev_mode方便快速验证改动。编译 WASM 演示wasm-pack 打包纯浏览器版本如果你想要一个零后端、可离线运行的演示页就用 wasm-pack 编译 WASM 版本make wasm-build-production它等价于wasm-pack build --out-dir webapp/pkg --target web --release --no-default-features --features wasm。编译产物输出到webapp/pkg/配合webapp/index.html与webapp/main.js用户在浏览器里直接编辑账本 YAML余额会实时计算并显示——全程没有任何数据离开浏览器。上图是 Transity 生成的累积资金趋势图网页版同样可以对接这类图表能力让账户走势直观可见。部署上线Web 版本与 WASM 演示的发布方式两种形态的部署路径略有不同Leptos Web 版本执行make install等价于cargo install --path .安装后直接运行transity server examples/journal.yaml即可启动服务。注意默认绑定127.0.0.1如需对外访问可以自行调整src/server.rs中的监听地址。WASM 演示把webapp/目录整体发布到任意静态托管平台即可。更省事的做法是执行make docs它会先编译 WASM 演示再把演示与 mdbook 文档整合输出到docs/目录一次搞定文档站点。常见问题与故障排查提示 Frontend assets are not available说明没有先执行make server-build或make dev。先完成前端构建再启动服务即可。WASM 体积偏大Cargo.toml中的wasm-releaseprofile 已启用opt-level z与 LTO专门为减小体积做了优化正常按make wasm-build-production打包即可。端口被占用修改Cargo.toml中[package.metadata.leptos]的site-addr与reload-port配置后重新构建。想要自定义样式全局样式在style/main.css网页版表格样式在此基础上按需覆盖即可。小结至此你已经掌握了把 Transity 从命令行搬进浏览器的完整路径用make server-build构建 Leptos Web 版本、用make dev本地热重载调试、用make wasm-build-production编译纯浏览器 WASM 演示再按需部署。无论你是想自建一个私人记账网页还是做一个数据不出本机的离线演示这套流程都能直接上手。快去试试把账本搬进浏览器吧【免费下载链接】TransityKeep track of your , , , , on your command line with the plain text accounting tool of the future! 项目地址: https://gitcode.com/gh_mirrors/tr/Transity创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考