今日工作台
2026年9月29日 星期二
顶部通知条
默认主色；可加 notice-success / notice-warning / notice-danger / notice-plain；点右侧 ✕ 可关闭
提示框 / 弹窗
反馈类组件
弹窗（普通 / 大 / 表单 / iframe）
openModal 通用弹窗 API
所有弹窗与提示框均支持 Enter 确认、Esc 取消（输入框内回车同样确认）
抽屉 / 面板 / 菜单
支持点击遮罩关闭，按 Esc 也可关闭
Tip 气泡提示
上方 tip
下方 tip
悬停查看：鼠标移到这里这是鼠标悬停时出现的提示气泡。
栅格系统
col-4
col-4
col-4
col-6
col-3
col-3
1/5
1/5
1/5
1/5
1/5
12 列等宽栅格：col-1 ~ col-12、col-5th 五等分、col-offset-* 偏移、col-resp 响应式
文字大小
12px 辅助说明文字
14px 正文默认
16px 小标题
18px 标题
20px 大标题
业务卡片
会员生日
今日生日提醒
2
新增会员
新增预约
图文卡片 / 列表卡片
库存预警
全部
玫瑰精油
SPA耗材
一次性采耳工具
采耳耗材
美睫胶水
美睫耗材
一次性手套
通用耗材
艾灸条
SPA耗材
热门项目
全部
玫瑰精油护理
60 分钟 · ¥298
日式美睫嫁接
90 分钟 · ¥398
采耳舒缓护理
45 分钟 · ¥168
页面内导航栏
移动端底部导航
底部 Tab 导航（移动端适用）
模拟手机窗口
首页
12
今日订单
¥8,520
今日营业额
订单、收银、会员等快捷入口可在此展示
会员
5
今日新增
1,286
会员总数
会员列表、卡项、标签等入口
消息
系统将于今晚 23:00 升级维护10:24
会员卡「年卡」续费提醒09:12
角标数字跟随未读数量变化
我的
刘明轩
超级管理员
账号、店铺、设置等入口
固定底部、点击切换高亮、未读角标；移动端页面可直接复用此结构
按钮
标签 / 徽标
默认
主要
成功
警告
危险
信息
紫色
描边
带圆点
5
12
完成
警告
头像
刘
刘
刘
M
卡片
任务列表
完成项目需求文档
截止日期：2026-10-01
审核设计稿
提交人：设计组
描边卡片
card-bordered
带 1px 边框
带 1px 边框
扁平卡片
card-flat
无阴影
无阴影
发光卡片
card-glow
悬停光晕
悬停光晕
进度条 / 步骤条
主色进度 60%
成功进度 100%
步骤条
✓
填写信息
2
确认订单
3
完成
表格
| 姓名 | 部门 | 状态 | 操作 |
|---|---|---|---|
| 张三 | 技术部 | 在职 | |
| 李四 | 产品部 | 休假 | |
| 王五 | 设计部 | 在职 |
表格样式扩展
两行数据表格（主副标题）
| 商品信息 | 单价 | 库存 | 状态 |
|---|---|---|---|
|
玫瑰精油护理
SPA · 60分钟
|
¥298 | 12 | 在售 |
|
日式美睫嫁接
美睫 · 90分钟
|
¥398 | 8 | 在售 |
|
采耳舒缓护理
采耳 · 45分钟
|
¥168 | 0 | 缺货 |
|
肩颈放松按摩
按摩 · 40分钟
|
¥228 | 5 | 低库存 |
使用 .cell-stack + .cell-main + .cell-sub 实现两行数据展示
带头像的表格
| 会员 | 手机号 | 会员等级 | 余额 | 操作 |
|---|---|---|---|---|
|
刘
刘明轩
注册于 2025-03-12
|
138****1234 | 黄金 | ¥2,860.00 |
|
|
陈
陈思琪
注册于 2025-06-08
|
159****5678 | 铂金 | ¥5,320.00 |
|
|
王
王雅婷
注册于 2025-09-21
|
186****9012 | 白银 | ¥860.00 |
|
|
赵
赵一鸣
注册于 2024-12-01
|
137****3456 | 普通 | ¥120.00 |
|
使用 .cell-avatar 组合头像与两行文本
多列数据表格（横向滚动）
| 订单编号 | 会员 | 项目 | 金额 | 支付方式 | 服务技师 | 门店 | 下单时间 | 状态 |
|---|---|---|---|---|---|---|---|---|
| #20260929001 | 刘明轩 | 玫瑰精油护理 | ¥298 | 微信支付 | 小美 | 解放东路店 | 2026-09-29 09:12 | 已完成 |
| #20260929002 | 陈思琪 | 日式美睫嫁接 | ¥398 | 支付宝 | 小丽 | 解放东路店 | 2026-09-29 10:05 | 服务中 |
| #20260929003 | 王雅婷 | 采耳舒缓护理 | ¥168 | 会员卡 | 小芳 | 高新区分店 | 2026-09-29 10:30 | 已完成 |
| #20260929004 | 赵一鸣 | 肩颈放松按摩 | ¥228 | 现金 | 小燕 | 解放东路店 | 2026-09-29 11:00 | 待服务 |
外层包裹 .table-scroll-x 实现横向滚动，表格设置 min-width
紧凑表格 (table-sm)
| 时间 | 项目 | 技师 | 状态 |
|---|---|---|---|
| 09:00 | 玫瑰精油护理 | 小美 | 已完成 |
| 10:00 | 日式美睫嫁接 | 小丽 | 进行中 |
| 11:00 | 采耳舒缓护理 | 小芳 | 待开始 |
| 14:00 | 肩颈放松按摩 | 小燕 | 待开始 |
添加 .table-sm 减少内边距，适合数据密集场景
表格（批量选择）
会员列表（带复选框与批量操作）
| 会员 | 手机号 | 等级 | 余额 | 操作 | |
|---|---|---|---|---|---|
|
刘
刘明轩注册于 2025-03-12
|
138****1234 | 黄金 | ¥2,860.00 | ||
|
陈
陈思琪注册于 2025-06-08
|
159****5678 | 铂金 | ¥5,320.00 | ||
|
王
王雅婷注册于 2025-09-21
|
186****9012 | 白银 | ¥860.00 |
表头全选 / 行内单选自动联动，底部实时显示已选数量
下拉刷新 / 上拉加载
下拉刷新
上拉加载更多
点击「下拉刷新」模拟刷新；点「上拉加载更多」模拟加载下一页
时间轴
预约服务时间轴
-
预约确认 2026-09-29 09:00刘明轩 已成功预约「玫瑰精油护理」，服务技师：小美
-
客户到店 2026-09-29 09:10会员 刘明轩 已到店，前台接待并确认服务项目。
-
服务中 2026-09-29 09:20技师 小美 开始为会员提供玫瑰精油护理服务，预计60分钟。
-
服务完成 2026-09-29 10:20玫瑰精油护理服务已完成，会员确认签字，已邀请评价。
-
订单完成 2026-09-29 10:25订单 #20260929001 已结算，金额 ¥298，支付方式：微信支付。
时间轴支持不同颜色的节点徽章（success/warning/danger/默认）和卡片内容
表单
下拉菜单
下拉面板统一由 CSS 变量 --dropdown-max-h 控制最大高度（默认 240px），超出即滚动；也可用 h-160 / h-200 / h-240 / h-300 / h-auto 档位类，或在容器上自定义 --dropdown-max-h:180px
日期 / 时间选择器
下拉面板，不用遮罩
下拉面板，不用遮罩
同一面板内选日期与时间
滚轮选择器为移动端风格，弹窗内上下滑动，同样支持 Enter 确认 / Esc 取消
验证码
60 秒倒计时，手机号校验
搜索筛选栏 · 综合（会员 + 日期区间 + 下拉）
移动端自动换行；会员搜索可输入联想，日期区间点「今天 / 近 7 天 / 本月」自动回填
会员搜索（输入联想）
聚焦展开候选、输入实时过滤；选中后姓名回填、会员 ID 写入隐藏域
日期区间（从日期到日期）
两个日期框复用 picker-date；快捷按钮加 data-range-preset 自动回填
金额输入框
¥
自动千分位、只允许两位小数、失焦格式化
¥
大备注框
会员备注
支持换行，右下角可拖拽调整高度
0 / 500
项目 / 商品选择器
玫瑰精油护理
日式美睫嫁接
采耳舒缓护理
肩颈放松按摩
支持搜索过滤、点击多选、确认后返回选中列表
选项卡
推荐内容面板
热门内容面板
最新内容面板
概述面板（药丸式）
明细面板（药丸式）
统计面板（药丸式）
分页
第 1 / 20 页
共 186 条记录
每页
条
骨架屏 / 空状态
暂无数据