项目体验

Retail POS · Staff Identity

POS System React · Ant Design 已上线

员工 PIN
身份认证系统

Staff Identity · PIN Auth · Retail POS

为 Pisell POS 设计的员工认证模块,支持员工切换、4 位 PIN、员工 ID 添加和多端适配。我负责流程、状态、视觉与原型实现,并与研发一起完成组件接入。

平台 Pisell SaaS
场景 零售 POS 员工认证
技术栈 React · Ant Design · Framer Motion
Mobile · Tablet · Desktop
设计思路

Project Overview

项目背景与目标

在 POS 场景中,一台设备常由多名员工共用。这个模块需要保留当前门店和收银台上下文,同时让员工快速确认身份,并能处理 PIN 错误、员工切换和新员工添加。

4+
支持同时在线员工数
4
位 PIN 码,安全快捷
3
响应式断点覆盖
1 套
统一认证流程

Core Features

核心功能特性

👤
多员工快速切换
员工列表以卡片形式展示,显示当前员工(Current)、上次使用(Last used)和其他员工,点击即可切换,带渐变动画过渡。
🔢
PIN 键盘认证
大按键数字键盘(0-9 + 退格),支持按压反馈动画,PIN 输入以圆点脱敏显示,最多 4 位,清晰的输入状态反馈。
🔍
员工 ID 搜索添加
支持通过员工 ID 搜索并添加新员工至当前设备,未找到时展示清晰错误提示,防止非法 ID 输入(4 位抖动动画)。
📱
全端响应式适配
4 个响应式断点:手机垂直布局 / 小平板 / 平板(侧边栏 + 主区域)/ 宽屏(大侧边栏 + 大键盘),自动适配当前设备。
流畅过渡动效
使用 Framer Motion 实现员工切换淡出淡入(180ms/360ms),键盘按压物理感反馈,底部抽屉滑入滑出等微交互。
🏪
上下文信息展示
登录界面展示当前门店时间、收银台编号等上下文信息,让员工知晓自己正在操作哪台设备。

Design Showcase

界面设计展示

以 Pisell 零售 SaaS 的品牌色体系为基础,采用暖褐色调背景(#140C09)营造沉稳专业的氛围,主要操作区域使用高对比白色卡片,确保在收银台光线复杂环境下的高可读性。

Staff PIN Sign In
Fancy
Staff ID 7788
Current
Sophia
Staff ID 6688
Last used
Kiddy
Staff ID 5566
Leon
Staff ID 2233
+
Other Staff
Fancy
Staff ID 7788
Enter PIN
1
2
3
4
5
6
7
8
9
0
Need help? Contact manager
🕐 Session Context
Tuesday, 09:42 AM
Counter #3 · Main Floor
⚡ Switch Behavior
180ms Fade Out → In
Framer Motion 无感切换
🔒 Security Design
PIN 脱敏 · ID 校验
防穷举 · 防误操作

Design & Implementation

从员工切换到认证结果

先梳理共用设备中的员工身份、设备上下文、错误与恢复状态,再拆分组件并完成多端原型和研发交付。

💬
Discovery
需求拆解
分析 POS 场景下多员工共用设备的认证痛点,拆解核心用户流程
🧩
Components
组件拆解
拆解 StaffCard、KeyButton、StaffPicker 等组件 Props 与状态设计
Prototype
原型实现
完成 React 交互原型,并根据操作反馈调整切换与按键动效
📐
Responsive
响应式设计
针对 Mobile、Tablet 与 Desktop 调整布局、触控区域和信息密度
Delivery
集成交付
与工程团队对接,完成组件规范文档与 Pisell 平台集成验收

Responsive Design

多端响应式适配

根据零售门店常见的三种设备形态调整布局,让员工在不同屏幕上都能清楚看到身份、输入状态和主要操作。

FANCY
1
2
3
4
5
6
Mobile · 垂直布局
Tablet · 侧边栏 + 键盘
Fancy
1
2
3
4
5
6
Desktop · 宽屏完整版

Tech Stack

React 18 TypeScript Ant Design 5 Framer Motion Tailwind CSS useBreakpoint useMemo / useCallback Custom Hooks

Complete demo task

从选择员工开始,到锁定恢复与会话完成。

产品范围是共享门店设备上的高频身份切换;交互证据覆盖禁用、键盘输入、错误次数、临时锁定、恢复、成功身份和继续进入业务。

  1. 01 / Select选择员工身份
  2. 02 / Input输入错误 PIN
  3. 03 / Protect三次错误锁定
  4. 04 / Recover恢复后输入 2468
  5. 05 / Complete进入会话或切换

Case evidence / high-frequency auth

把员工切换、PIN 输入、锁定恢复和进入收银台做成一条明确的门店任务

我负责员工选择、数字键盘、错误次数、锁定恢复、成功会话与多端布局。Demo 使用公开演示 PIN,不读取或保存真实凭据。

01 / 背景与角色

共享设备上,高频身份切换必须快也必须可控

范围包括员工选择、PIN 输入、错误反馈、临时锁定、恢复重试、会话完成与切换下一位员工。

02 / 难点

速度、安全感与可恢复性同时成立

  • 未选员工时键盘必须真实禁用。
  • 输错不能只闪一下,要显示剩余次数和恢复方法。
  • 成功后要保留已认证身份,避免自动消失造成不确定。
03 / 关键决策

先确认身份,再开放输入;成功后进入明确会话

选择员工后才启用数字键盘;连续三次错误进入本地锁定;恢复后可重试;正确 PIN 后显示身份与角色,并提供“进入收银台”和“切换员工”。

04 / 组件系统关联

Button、Focus、错误和成功状态遵循同一契约

员工卡和数字键全部使用原生按钮;Disabled、Selected、Error、Locked、Success 与 Session Ready 状态有视觉和语义反馈,并支持物理键盘。

05 / 真实交付证据

不依赖接口的确定性认证 Demo

  • 演示 PIN 固定为 2468,所有逻辑在本地运行。
  • 可完成输错、三次锁定、恢复、正确登录与进入会话。
  • 支持数字键、Backspace、Delete、Enter 与 Tab 焦点操作。
06 / 结果表达

结果是状态覆盖与交互验证,不是安全认证产品

本原型证明了门店身份切换流程与异常恢复。它没有后端鉴权、加密存储或真实权限系统,因此不把 Demo 描述为生产级安全方案。

选择员工输入 PIN错误 / 锁定 / 恢复正确认证进入会话 / 切换员工

INTERACTIVE DEMO

体验 Staff PIN

选择员工并输入 PIN,查看身份切换、错误反馈与完成状态。

全屏体验 Demo ↗

Staff Identity System

该模块用于 Pisell 门店终端的员工切换与身份确认。