UIDesign.md 26 KB
校园二手书交易系统 — UI 设计文档
版本 1.0 | JavaFX 23 + BootstrapFX 主题框架 | 设计目标：现代化、清晰、易用
1. 设计原则
- 以 BootstrapFX 为基础：直接使用 BootstrapFX 提供的 CSS 类（
.btn,.btn-primary,.table,.table-striped,.label,.badge,.well等），避免重复造轮子 - 定制覆盖层：通过
style.css覆盖少量变量（品牌色、圆角微调），保持整体风格统一 - 布局优先：核心价值在布局结构，而非重新定义基础样式
- 内容层级：通过间距、卡片、视觉权重引导用户注意力
2. 色彩定制
BootstrapFX 默认色彩基础上，覆盖以下品牌色：
| BootstrapFX 变量 | 定制值 | 用途 |
|---|---|---|
-fx-primary |
#4F6CF7 |
主色调：按钮、链接、激活态 |
-fx-success |
#10B981 |
成功：通过、上架 |
-fx-warning |
#F59E0B |
警告：待审核、等待 |
-fx-danger |
#EF4444 |
危险：删除、拒绝、退出 |
-fx-info |
#3B82F6 |
信息：查看详情 |
| 页面背景 | #F5F7FA |
替代纯白，增加层次感 |
在
style.css中通过 BootstrapFX 的选择器覆盖即可，无需重新定义全套组件样式。
3. 布局架构
┌──────────────────────────────────────────────────────────────┐
│ BootstrapFX Navbar（顶部导航） │
│ 🏫 校园二手书市 [浏览] [交易] [个人] [卖家] [统计] [管理] │ 👤 用户 ⏻ |
├──────────────────────────────────────────────────────────────┤
│ │
│ Main Content — 各 Tab 内容区域 │
│ （基于 BootstrapFX .well / .panel / .table 构建） │
│ │
├──────────────────────────────────────────────────────────────┤
│ 底部状态栏（可选） │
└──────────────────────────────────────────────────────────────┘
4. 页面详细设计
4.1 登录页
┌────────────────────────────────────────────┐
│ │
│ ┌──────────────────────┐ │
│ │ .well (圆角卡片) │ │
│ │ │ │
│ │ 📚 校园二手书市 │ │
│ │ │ │
│ │ ┌──────────────┐ │ │
│ │ │ form-control │ │ │
│ │ │ 用户名 │ │ │
│ │ └──────────────┘ │ │
│ │ ┌──────────────┐ │ │
│ │ │ form-control │ │ │
│ │ │ 密码 │ │ │
│ │ └──────────────┘ │ │
│ │ │ │
│ │ [ .btn .btn-primary .btn-block ] │
│ │ │ 登 录 │ │
│ │ └──────────────────────┘ │ │
│ │ │ │
│ │ 没有账号？立即注册 │ │
│ └──────────────────────┘ │
│ │
└────────────────────────────────────────────┘
- 居中
.well卡片，max-width: 400px - 输入框使用
form-control类 - 按钮使用
btn btn-primary btn-block - 注册链接使用 BootstrapFX 默认链接样式
4.2 注册页
与登录页风格一致，增加更多表单字段。布局同上，使用 .well 卡片包裹。
4.3 浏览书籍（核心改造）
┌──────────────────────────────────────────────────────────────┐
│ 搜索栏（BootstrapFX 行内表单） │
│ ┌────────────────────┐ ┌──────────┐ ┌──────┐ │
│ │ form-control │ │ dropdown │ │ .btn │ │
│ │ 搜索书名/作者... │ │ 全部分类 ▾│ │ 🔍 │ │
│ └────────────────────┘ └──────────┘ └──────┘ │
│ │
│ ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━● │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ .well │ │ .well │ │ .well │ │ .well │ │
│ │ 图书卡片 │ │ 图书卡片 │ │ 图书卡片 │ │ 图书卡片 │ │
│ │ │ │ │ │ │ │ │ │
│ │ 书名 │ │ 书名 │ │ 书名 │ │ 书名 │ │
│ │ 作者 │ │ 作者 │ │ 作者 │ │ 作者 │ │
│ │ ¥价格 │ │ ¥价格 │ │ ¥价格 │ │ ¥价格 │ │
│ │ 库存:N │ │ 库存:N │ │ 库存:N │ │ 库存:N │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ 分页: [1] [2] [3] ... │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ .well — 书籍详情面板（右侧滑出 / 底部） │ │
│ │ 书名：Java程序设计 │ │
│ │ 作者：刘晓明 分类：教材 │ │
│ │ 原价：¥49.90 售价：¥48.00 │ │
│ │ ┌──┐ ┌──┐ ┌──┐ [btn-primary] 立即购买 │ │
│ │ │ -│ │ 1│ │ +│ │ │
│ │ └──┘ └──┘ └──┘ │ │
│ └─────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
改造重点：
- 图书列表从
TableView改为 FlowPane / TilePane 卡片网格，每张卡片为.well - 卡片内容：书名（粗体）、作者、售价（
label label-success或品牌色）、原价（删除线）、库存徽章（badge） - 每张卡片 hover 时添加
-fx-effect: dropshadow加深阴影 - 选中卡片→右侧/下方显示详情面板
- 卡片右上角可显示状态徽章（已上架/待审核）
4.4 我的交易
┌──────────────────────────────────────────────────────────────┐
│ 我的交易记录 [.btn .btn-secondary] 刷新 │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ .table .table-striped │ │
│ │ ┌────┬──────────┬──────┬────────┬────────────────┐ │ │
│ │ │ # │ 书名 │ 数量 │ 总价 │ 时间 │ │ │
│ │ ├────┼──────────┼──────┼────────┼────────────────┤ │ │
│ │ │ 1 │ Java... │ 5 │ ¥240 │ 2026-06-15 │ │ │
│ │ │ 2 │ Photo... │ 2 │ ¥112 │ 2026-06-15 │ │ │
│ │ └────┴──────────┴──────┴────────┴────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 空状态：显示友好提示 "还没有交易记录，去逛逛吧～" │
└──────────────────────────────────────────────────────────────┘
- 使用
.table .table-striped直接获得斑马纹表格 - 右上角
.btn .btn-secondary刷新
4.5 个人信息
┌──────────────────────────────────────────────┐
│ .well │
│ ┌──────────────────────────────────────────┐ │
│ │ 👤 个人资料 │ │
│ │ │ │
│ │ 用户名 │ [form-control:readonly] │ │
│ │ 昵称 │ [form-control] │ │
│ │ 邮箱 │ [form-control] │ │
│ │ 电话 │ [form-control] │ │
│ │ 院系 │ [form-control] │ │
│ │ 信用分 │ ⭐⭐⭐⭐⭐ 100 │ │
│ │ │ │
│ │ [.btn .btn-primary] 保存修改 │ │
│ └──────────────────────────────────────────┘ │
└──────────────────────────────────────────────┘
- 使用
.well卡片包裹 - 只读字段使用
form-control+ disabled 样式 - 信用分额外显示星级图标
4.6 卖家中心
┌──────────────────────────────────────────────────────────────┐
│ .well — 统计条 │
│ 在售: 5本 │ 库存: 140本 │ 已售: 23本 │
│ │
│ 我的书籍 [.btn-secondary] 刷新 │
│ [.btn-success] + 添加新书 │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ .table .table-striped │ │
│ │ ┌──┬──────────┬─────┬────┬────────┬──────────────┐ │ │
│ │ │# │ 书名 │售价 │库存│ 状态 │ 操作 │ │ │
│ │ ├──┼──────────┼─────┼────┼────────┼──────────────┤ │ │
│ │ │1 │ Java │¥48 │ 90 │ ✅上架 │ ✏️ 🗑️ 📊 │ │ │
│ │ │2 │ Photo │¥56 │ 50 │ ⏳待审核│ ✏️ 🗑️ 📊 │ │ │
│ │ └──┴──────────┴─────┴────┴────────┴──────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ ▼ 添加新书 / 编辑书籍 (TitledPane) │ │
│ │ 书名 [ ] 作者 [ ] │ │
│ │ 分类 [ ] 原价 [ ] │ │
│ │ 售价 [ ] 库存 [ ] │ │
│ │ [.btn-primary] 保存 │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
- 顶部统计条使用
.label或自定义 HBox - 状态列：
label label-success/label label-warning/label label-danger - 操作列使用图标文字混合按钮（BootstrapFX 默认按钮风格）
- 表单使用
form-control，按钮使用.btn .btn-success/.btn .btn-primary - 查看销售记录：弹出 Dialog，内部使用
.table .table-striped
4.7 数据统计
┌──────────────────────────────────────────────────────────────┐
│ 数据洞察 [.btn-secondary] 刷新数据 │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ .well │ │ .well │ │
│ │ 交易总金额 │ │ 交易总笔数 │ │
│ │ ¥5,720.00 │ │ 12 笔 │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 🔥 热门院系 TOP 3 (.well) │ │
│ │ 1. 计算机学院 ████████████████░░░░ ¥3,200 │ │
│ │ 2. 经济学院 ██████████░░░░░░░░░░ ¥1,800 │ │
│ │ 3. 东语学院 ████░░░░░░░░░░░░░░░░ ¥720 │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 📚 畅销书籍 TOP 5 (.well) │ │
│ │ ┌──┬──────────┬──────┬────┐ │ │
│ │ │# │ 书名 │ 作者 │ 销量│ │ │
│ │ │1 │ Java │ 刘晓明│ 15 │ │ │
│ │ │2 │ Photo │ 王艳梅│ 8 │ │ │
│ │ └──┴──────────┴──────┴────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 📊 各院系平均折扣率 (.well) │ │
│ │ ┌──────────┬────────┬──────────────────────────┐ │ │
│ │ │ 院系 │ 折扣率 │ 进度条 (.progress-bar) │ │ │
│ │ │ 计算机学院│ 85% │ ████████░░ 85% │ │ │
│ │ │ 经济学院 │ 92% │ █████████░ 92% │ │ │
│ │ └──────────┴────────┴──────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
- 顶部 KPI 使用两个
.well并排显示，金额用大号字体 +.text-success颜色 - 热门院系使用自定义进度条（或用 BootstrapFX
.progress-bar模拟） - 畅销书籍使用
.table精简显示 - 折扣率展示使用 BootstrapFX 进度条组件
4.8 管理面板
┌──────────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 👥 用户管理 [.btn-secondary] 刷新 │ │
│ │ [.btn-success] + 添加 │ │
│ │ ┌──┬──────┬────┬──────┬────┬───┬───┬────────────┐ │ │
│ │ │ID│用户名│昵称│ 院系 │信用│角色│卖家│ 操作 │ │ │
│ │ │1 │张大民│大民│计算机│100 │用户│否 │ ✏️ 🔄 🗑️ │ │ │
│ │ └──┴──────┴────┴──────┴────┴───┴───┴────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ ⏳ 待审核书籍 [.btn-secondary] 刷新 │ │
│ │ ┌──┬──────────┬──────┬────┬────┬────────────────┐ │ │
│ │ │ID│ 书名 │ 作者 │卖家│售价│ 操作 │ │ │
│ │ │3 │ 影视栏目..│ 李大山│ 2 │¥42 │ ✅通过 ❌拒绝 │ │ │
│ │ └──┴──────────┴──────┴────┴────┴────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 🤖 AI 分析报告 [.btn-primary] 生成报告 │ │
│ │ ┌──────────────────────────────────────────────────┐│ │
│ │ │ 分析内容（.well 或 textarea） ││ │
│ │ └──────────────────────────────────────────────────┘│ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
- 每个管理区域使用独立的
.well包裹 - 表格使用
.table .table-striped - 操作按钮使用 BootstrapFX 颜色变体
- 待审核的「通过」用
.btn-success，「拒绝」用.btn-danger - 添加用户使用 Dialog 或 TitledPane
5. 小组件规范
| 组件 | BootstrapFX 类 | 说明 |
|---|---|---|
| 按钮 | .btn .btn-{primary/success/danger/warning/info/secondary} |
全套按钮颜色 |
| 输入框 | .form-control |
统一表单样式 |
| 表格 | .table .table-striped |
斑马纹 + 圆角 |
| 卡片容器 | .well |
浅灰背景圆角面板 |
| 标签/徽章 | .label .label-{success/warning/danger/info}、.badge |
状态标记 |
| 进度条 | .progress-bar（需包装在 .progress 内） |
折扣率展示 |
| 导航 | 使用 JavaFX TabPane，应用 BootstrapFX 导航样式 | |
| 提示文字 | .text-success / .text-danger / .text-warning / .text-info |
状态文字着色 |
6. style.css 覆盖层
仅需在 BootstrapFX 基础上覆盖以下内容：
/* ── 品牌色覆盖 ── */
.root {
-fx-primary: #4F6CF7;
-fx-primary-hover: #3B5DE7;
-fx-success: #10B981;
-fx-warning: #F59E0B;
-fx-danger: #EF4444;
-fx-info: #3B82F6;
}
/* ── 页面背景 ── */
.root {
-fx-background-color: #F5F7FA;
}
/* ── Well 卡片微调 ── */
.well {
-fx-background-radius: 8px;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.06), 6, 0, 0, 2);
}
/* ── 卡片 hover ── */
.well:hover {
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.12), 12, 0, 0, 4);
}
/* ── 表格微调 ── */
.table-view {
-fx-background-radius: 8px;
-fx-border-radius: 8px;
}
/* ── 导航 Tab ── */
.tab-pane .tab-header-area .tab {
-fx-padding: 8px 16px;
}
/* ── 输入框高度微调 ── */
.form-control {
-fx-pref-height: 38px;
}
7. 实施要点
- 保留 BootstrapFX：
App.java中scene.getStylesheets().add("org/kordamp/bootstrapfx/bootstrapfx.css")不变 - style.css 后加载：在 BootstrapFX 之后加载，确保覆盖生效
- FXML 中添加 styleClass：统一使用 BootstrapFX 类名，如
styleClass="btn btn-primary" - 卡片网格：浏览页使用
FlowPane+TilePane替代TableView，每个子项为Pane或VBox加.well类 - 自定义组件：仅在 BootstrapFX 不支持的功能上自行实现（如进度条排行榜、数量选择器）
- 色彩一致性：所有按钮/标签优先使用 BootstrapFX 内置颜色类，不额外定义
8. 实施优先级
| Phase | 内容 | 依赖 |
|---|---|---|
| P1 样式覆盖 | 编写 style.css 覆盖层，配置品牌色 |
BootstrapFX 已集成 |
| P2 浏览页改造 | FlowPane 卡片网格代替 TableView，详情卡片 | P1 |
| P3 各页样式 | 统一个人信息、交易、卖家、统计、管理页 | P1 |
| P4 动效细节 | 卡片 hover 阴影、加载状态、空状态 | P2~P3 |
本文档定位为实施蓝图，所有 UI 组件优先使用 BootstrapFX 提供的基础类， 仅在布局结构和少量品牌样式上进行自定义。