"请基于 Ant Design 规范,使用 React/Tailwind CSS 开发一套租赁与押金管理系统的高保真原型。
视觉要求:
主色调使用 #1677FF,整体风格要求专业、严谨、硬朗,组件圆角设为 4px。
页面背景色使用 #F0F2F5,卡片采用无阴影、细边框设计。
核心页面结构:
移动端 (Mobile): 设计一个‘新建订单’表单页,包含商品选择抽屉、含税切换开关、以及吸底的汇总金额栏。
移动端 (Mobile): 设计一个‘订单跟踪详情页’,使用纵向 Steps 组件展示全流程状态,并区分已完成、进行中、待操作节点。
管理端 (PC): 设计一个‘数据监控大盘’,包含四个指标卡片(带 Icon)和一个订单趋势折线图。
管理端 (PC): 设计一个‘订单管理列表’,包含状态标签(Tag)、金额列、以及右侧操作区(查看/编辑)。
交互细节:
状态标签颜色需符合:审核中(Orange), 已支付(Blue), 已完结(Green), 异常/赔偿(Red)。
所有列表需有空状态展示,所有操作需有反馈提示。"
Now I have a good understanding of the codebase. Let me start building. First, I'll update the global styles and theme, then build all the components and pages.
Now let me build the main page with navigation to all 4 prototype pages, and then build each page component.
Now let me build the PC admin sidebar component and the dashboard page.
租赁押金管理系统的高保真原型已全部完成。系统包含 4 个核心页面:
全局主色调为 #1677FF,圆角 4px,背景 #F0F2F5,卡片无阴影细边框,严格遵循 Ant Design 设计规范。
Role: Senior UI/UX Engineer & React Developer
Task: 开发一套专业级租赁与售卖系统的高保真 React 原型。
Theme: Ant Design 风格,主色 #1677FF,圆角 4px,专业信赖感。
核心页面需求:
移动端 - 商品列表页 (Standard Mall Style):
采用两列网格布局 (Grid, 2 columns)。
每个卡片包含:大尺寸商品图片、标题、价格 (Primary Color)、库存数量 (Secondary Text)。
顶部包含搜索框和简单的分类 Tabs。
移动端 - 商品详情页 (Taobao Style):
顶部为 1:1 的商品大图轮播组件 (Carousel)。
包含商品标题、价格、及详细的图文描述区。
底部固定工具栏 (Sticky Bottom Bar):包含“咨询”按钮和全宽度的“立即租赁”按钮。
移动端 - 流程页面:
下单页: 包含服务类型选择、已选商品汇总、税费计算 Switch 及其动态逻辑。
订单跟踪页: 纵向 Steps 步骤条,清晰展示“下单-一审-二审-配送-完结”状态。
管理端 (PC):
一个简洁的侧边栏导航布局。
一个美观的数据大盘,包含 4 个核心指标卡片和订单增长折线图。
一个支持状态筛选的订单管理表格。
技术栈要求:
使用 React, Tailwind CSS, Lucide-react 图标库。
状态管理:使用简单的 React useState 模拟页面切换和开关逻辑。
交互效果:包含按钮点击反馈、抽屉 (Drawer) 弹出效果。 基于新的需求微调已有原型,并确保原型在同一个单页中,方便我进行展示
Now I have a complete understanding of the codebase. The user wants:
Let me build this. I'll create the new components and update the main page.
Now let me rewrite the order page with service type selection and refined tax logic:
Now rewrite the order tracking with the 5-step flow (下单-一审-二审-配送-完结):
Now let me update the PC dashboard and order list slightly, and then rewrite the main page to include all 6 pages in a single-page navigation:
Now update the admin layout to not require onBack/onNavigate props since it will be embedded:
Now let me rewrite the main page to combine everything into a single-page presentation with tab-based navigation:
Let me verify everything compiles correctly by checking for any import issues:
All imports look correct. Let me verify the sonner Toaster is in the layout:
All good. The entire system is ready. Here's a summary of all the changes:
新增 2 个移动端页面:
优化 2 个已有移动端页面:
全部 6 个页面整合到单页中,顶部导航栏支持标签页切换和前后翻页,移动端页面以 375px 手机模拟器居中展示,PC 管理端全宽渲染,方便一站式演示。
You can send messages while the preview loads