把 Transity 搬进浏览器：Leptos Web 版本与 WASM 演示的构建部署指南

把 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/Transity

Transity 是一款用 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.rs（Axum 服务端）。
• WASM 演示（纯浏览器计算）：通过src/wasm.rs用wasm_bindgen暴露get_balance接口，把账本解析与余额计算逻辑编译成 WebAssembly 模块。数据全程留在本地浏览器，隐私性极佳。

上图展示了 Transity 输出的账户余额视图——多币种（€、$、BTC）账户余额一目了然，这正是网页版中 Balance 页面要呈现的核心数据。

构建前的准备工作：环境与依赖清单

开始构建前，请先确认电脑上已安装以下工具：

工具	用途
Rust 工具链	编译 Transity 本体与 Web 后端
wasm32-unknown-unknown 目标	编译 WebAssembly 必需的交叉编译目标
cargo-leptos	Leptos 官方构建/开发工具
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