OpenClaw—AI研究ShopSystem Day 3 主线任务是把视觉风格彻底重做 + 启动后台模块。前两天 Day 1+2 留下来的页面是白底 + 单一红色,看着像开发脚手架不像电商平台,Day 3 先把”淘宝橙红暖风”立起来:主色品牌橙红 + 强调色金黄,配合米白暖底,做”全品类电商”的热闹感。设计 tokens 落到 Tailwind config(brand-500=#ee2c2c、accent-500=#ffd700、warm-100=#fff8f0),globals.css 抽出 btn-primary、card、input、price、badge-brand、section-title 等组件类,后面所有页面都用同一套语义化类名,不再到处写 bg-red-500 临时拼接。当天 commit 完后用户反馈色调不满意 —— 番茄红太”商业喧嚣”,先改成绛红 #9b1c1c(深沉枣红),又改成墨绿 #1f4d3a + 淡绿 #a8d5b8(典雅东方韵),最后调试发现 shadow-brand 用了硬编码 rgba 还在用旧番茄红,一并改掉,前后台终于统一到墨绿清新风格。
前台改造是 Day 3 最大的工作量。首页从原来”标题 + 3 个入口卡片”重做成真正的电商首页:Hero banner(品牌渐变 + 满 ¥99 免运费徽章 + “立即逛逛”按钮)、6 个分类宫格(📱📦👕🏠📚🍎,图标 + hover 放大)、推荐商品瀑布(支持推荐角标 + 折扣角标 + 已售数据)、服务保障区(🚚✅💳🔄 4 项)。SiteHeader 把全局导航立起来:品牌色背景 + logo + 搜索框(form 提交到 /products?q=)+ 购物车凑数(实时从 /api/cart 拉 totalQty,数量徽章 99+ 上限)+ 二级分类导航。SiteFooter 是深色 4 列信息栏(购物指南/配送/支付/关于)+ 版权行。layout.tsx 接入 flex flex-col 让 main 撑开,所有页面自动套上顶部导航 + 底部页脚,不再需要每个页面重复写。
商品详情页是前台最复杂的页面,这次也一并升级。面包屑(首页 / 全部商品 / 当前商品)+ 大图占位 + 缩略图列(4 个,预留多图,hover 切换)+ 品牌色价格高亮区(渐变背景 + 售价标签 + 省 N% 角标 + 库存/销量/评分)+ 服务保障线 + 用户评价模块,布局结构跟京东/淘宝对齐。商品列表页加了排序 tab(综合/销量/价低/价高)+ q 搜索响应(LIKE 模糊查询 title/short_description)+ 售罄遮罩(库存 0 时黑色蒙层 + “已售罄”徽章)+ 无结果友好提示。购物车页、结算页、订单详情页也全部用新设计 tokens 重做,价格徽章、按钮 hover、错误提示框全部统一到 brand/accent/warm 语义类。
下午进入后台模块。src/lib/auth.ts 提供 requireAdmin() helper,检查 shop_user_id cookie + users 表 role 必须是 admin 或 merchant,否则 redirect 到登录页,所有 /ladmintood/* 页面顶部调一次。登录页本来走 Server Action + cookies().set(),Next.js 14 上不稳定(“Failed to find Server Action”+ cookie 不写入),改成客户端组件 fetch /api/auth/login Route Handler + 显式 resp.headers.append('Set-Cookie', ...),稳定可靠。AdminShell 是后台布局壳:深色侧栏(gray-900 + 品牌色 active 项)+ 顶栏(返回前台 + 退出登录)+ 用户卡片(角色徽章)。dashboard(/ladmintood/dashboard)有 4 张统计卡片(商品总数 / 订单总数 / 注册用户 / 成交总额 GMV)+ 订单状态分布进度条 + 系统信息面板。订单管理(/ladmintood/orders)是 7 列表格 + 状态筛选 tab(全部/待支付/已支付/已发货/已送达/已取消/已退款)+ 操作按钮根据当前状态动态显示:pending → 标记已支付/取消、paid → 发货/退款、shipped → 确认送达,点”发货”后数据库 status=shipped + shipped_at 自动写入。