AI Product Design · Pisell SaaS

POS System React · Ant Design 真实上线

员工 PIN
身份认证系统

Staff Identity · PIN Auth · Retail POS

为零售 SaaS 平台 Pisell 设计并实现的员工登录身份认证模块。支持多员工卡片切换、PIN 键盘输入、员工 ID 搜索添加与响应式跨端适配。全程使用 AI 辅助设计、组件拆解与 React 代码实现,从设计方案到线上交付完整落地。

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

Project Overview

项目背景与目标

Pisell 是一个面向零售商家的 SaaS 管理平台。在 POS 场景中,一台设备常由多名员工共用。本模块解决的核心问题是:如何让不同员工在不切换账号的前提下,快速、安全地完成身份认证并开始工作。设计目标是一个「3 秒内完成操作」的高效 PIN 登录体验。

4+
支持同时在线员工数
4
位 PIN 码,安全快捷
3
响应式断点覆盖
0→1
全程 AI 辅助交付

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 校验
防穷举 · 防误操作

AI Development Process

AI 辅助开发全流程

从产品需求到上线交付,全程使用 AI 工具辅助各个阶段,大幅提升设计与开发效率。

💬
ChatGPT
需求拆解
分析 POS 场景下多员工共用设备的认证痛点,拆解核心用户流程
🧩
Claude
组件拆解
拆解 StaffCard、KeyButton、StaffPicker 等组件 Props 与状态设计
Cursor
代码实现
使用 Cursor 快速生成 React + Framer Motion 代码,精调动效参数
📐
v0 / Figma
响应式设计
AI 辅助生成多断点响应式变体,覆盖 mobile/tablet/desktop 三端
Review
集成交付
与工程团队对接,完成组件规范文档与 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

Staff Identity System

这是 Pisell SaaS 平台的真实生产模块,已集成至正式零售门店使用。