3.9 KiB
3.9 KiB
CODEBUDDY.md
本文件为 CodeBuddy Code 在此仓库中工作提供指引。
项目概述
smartserve-client 是一个基于 Wails v2 构建的桌面应用程序。Wails 是一个将 Go 后端与 React + TypeScript 前端结合并打包为原生桌面应用的框架。Go 代码负责处理应用逻辑,并通过自动生成的 JavaScript 绑定暴露给前端。
命令
完整应用
# 开发模式(前端热重载,保存时自动重新编译 Go)
wails dev
# 生产构建(输出二进制文件至 build/bin/)
wails build
仅前端(在 frontend/ 目录下执行)
# 安装依赖
pnpm install
# 开发服务器(浏览器预览地址 http://localhost:5173,无 Go 后端)
pnpm run dev
# 类型检查 + 生产构建
pnpm run build
# 代码检查
pnpm run lint
Go 后端
# 运行所有 Go 测试
go test ./...
# 运行单个测试
go test -run TestName ./...
架构
Go ↔ 前端桥接(Wails 绑定)
- 在
main.go的Bind: []interface{}{app}中注册的结构体方法会自动暴露给前端。 - Wails 会在
frontend/wailsjs/go/main/App.d.ts和App.js中生成 TypeScript 绑定——不要手动编辑这些文件,它们会在wails dev/wails build时自动重新生成。 - 在 React 中调用 Go 函数:
import { Greet } from '../wailsjs/go/main/App'——所有调用均返回Promise。 - 运行时工具(窗口管理、事件、对话框等)位于
frontend/wailsjs/runtime/。
关键文件
| 文件 | 用途 |
|---|---|
main.go |
入口点;配置 Wails 应用(窗口尺寸、标题、资源服务器、绑定结构体) |
app.go |
App 结构体,包含暴露给前端的方法;新增 Go→JS 方法在此添加 |
frontend/src/App.tsx |
根 React 组件 |
frontend/src/main.tsx |
React 入口点 |
wails.json |
项目配置(前端构建命令、输出文件名、作者信息) |
前端技术栈
- React 19 + TypeScript(严格模式)
- Ant Design 6(
antd@6.x+@ant-design/icons@6.x)用于 UI 组件——编写页面时优先使用 antd 组件 - react-router-dom v7 用于路由管理
- Vite 8 用于打包
- pnpm 作为包管理器(不要使用 npm/yarn)
Ant Design 文档
编写或修改 UI 组件时,可通过以下地址查询 antd 最新用法:
- 索引:
https://ant.design/llms.txt - 完整文档(中文):
https://ant.design/llms-full-cn.txt - 语义文档(中文):
https://ant.design/llms-semantic-cn.md
前端目录命名规范
- 功能分类目录(
pages/、layouts/、router/、components/等):小写 - 页面目录(
pages/下的子目录):小驼峰,如pages/home、pages/notFound - 自定义组件目录(
layouts/、components/下的子目录):大驼峰,如layouts/BasicLayout、components/SideMenu
前端路由结构
路由相关文件位于 frontend/src/router/:
| 文件 | 用途 |
|---|---|
frontend/src/router/routes.tsx |
路由配置数据,导出 RouteConfig 接口和 routes 数组;菜单组件从这里取数据 |
frontend/src/router/index.tsx |
基于 routes 创建并导出 router 实例(createBrowserRouter) |
RouteConfig 包含 path、label、icon、element、hideInMenu、children 字段,菜单组件过滤 hideInMenu: true 的条目即可渲染菜单。
添加新的 Go 方法
- 在
app.go的App结构体中添加方法(必须是导出/公开的)。 - 运行
wails dev——frontend/wailsjs/go/main/中的绑定会自动重新生成。 - 在 React 中使用生成的 TypeScript 类型导入并调用。
前端资源
前端的 dist/ 目录在构建时通过 main.go 中的 //go:embed all:frontend/dist 嵌入到 Go 二进制文件中。开发模式下,Wails 会代理到 Vite 开发服务器。