# 校园二手书交易系统 — 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 基础上覆盖以下内容： ```css /* ── 品牌色覆盖 ── */ .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. 实施要点 1. **保留 BootstrapFX**：`App.java` 中 `scene.getStylesheets().add("org/kordamp/bootstrapfx/bootstrapfx.css")` 不变 2. **style.css 后加载**：在 BootstrapFX 之后加载，确保覆盖生效 3. **FXML 中添加 styleClass**：统一使用 BootstrapFX 类名，如 `styleClass="btn btn-primary"` 4. **卡片网格**：浏览页使用 `FlowPane` + `TilePane` 替代 `TableView`，每个子项为 `Pane` 或 `VBox` 加 `.well` 类 5. **自定义组件**：仅在 BootstrapFX 不支持的功能上自行实现（如进度条排行榜、数量选择器） 6. **色彩一致性**：所有按钮/标签优先使用 BootstrapFX 内置颜色类，不额外定义 --- ## 8. 实施优先级 | Phase | 内容 | 依赖 | |-------|------|------| | **P1** 样式覆盖 | 编写 `style.css` 覆盖层，配置品牌色 | BootstrapFX 已集成 | | **P2** 浏览页改造 | FlowPane 卡片网格代替 TableView，详情卡片 | P1 | | **P3** 各页样式 | 统一个人信息、交易、卖家、统计、管理页 | P1 | | **P4** 动效细节 | 卡片 hover 阴影、加载状态、空状态 | P2~P3 | --- > 本文档定位为实施蓝图，所有 UI 组件优先使用 BootstrapFX 提供的基础类， > 仅在布局结构和少量品牌样式上进行自定义。