صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
liugang
/
zhifu-platform
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
شاخه: main
شاخه‌ها تگ‌ها
zhifu-platform
/
docs
/
design
/
wireframes
/
product-layout.js

product-layout.js 12 KB
لینک دائمی تاريخچه خام

123456789101112131415161718192021222324252627282930313233343536373839404142 
  1. /* 产品导航体现正常商城和管理系统结构；学习范围之外的栏目只展示功能范围说明。 */
    2. 

  2. const roleHomes = { customer: 'home', staff: 'queue', supervisor: 'approvals', merchant: 'overview', platform: 'dashboard' };
    3. 

  3. const menuGroups = {
    4. 

  4.   staff: [['客户服务', [['queue', '客服接待'], ['ticket', '售后工单'], ['customers', '客户管理']]], ['服务资源', [['reference', '知识中心'], ['quick-replies', '快捷回复'], ['statistics', '服务统计']]]],
    5. 

  5.   supervisor: [['服务管理', [['approvals', '审批待办'], ['history', '售后工单'], ['team', '客服团队'], ['statistics', '服务统计']]]],
    6. 

  6.   merchant: [['经营管理', [['overview', '经营概览'], ['products', '商品管理'], ['orders', '订单管理'], ['after-sales', '售后管理'], ['customers', '客户管理'], ['marketing', '营销中心']]], ['智能服务', [['service', '客服管理'], ['knowledge', '知识中心'], ['rules', '售后规则'], ['release', 'AI 配置'], ['billing', '模型费用']]], ['店铺设置', [['access', '店铺与员工'], ['channels', '渠道接入']]]],
    7. 

  7.   platform: [['平台运营', [['dashboard', '平台概览'], ['tenants', '商家管理'], ['applications', '应用接入']]], ['资源与运行', [['capacity', '配额管理'], ['models', '模型服务'], ['deliveries', '消息投递'], ['health', '运行监控']]], ['系统管理', [['audit', '操作审计'], ['permissions', '权限管理'], ['settings', '系统设置']]]],
    8. 

  8. };
    9. 

  9. function menuItem(page, label) {
    10. 

  10.   const selected = currentPage === page || currentRole === 'staff' && ['conversation', 'draft'].includes(currentPage) && page === 'queue' || currentRole === 'supervisor' && currentPage === 'review' && page === 'approvals';
    11. 

  11.   return `<button type="button" data-page="${page}" data-role="${currentRole}" ${selected ? 'aria-current="page"' : ''}>${label}</button>`;
    12. 

  12. }
    13. 

  13. function adminShell(content) {
    14. 

  14.   const title = screens[`${currentRole}/${currentPage}`]?.title || '工作台';
    15. 

  15.   const person = { staff: '王芳 · 客服', supervisor: '李明 · 主管', merchant: '商家管理员', platform: '平台运营' }[currentRole];
    16. 

  16.   return `<div class="admin-shell"><aside class="admin-sidebar"><div class="admin-brand">智服中台<small>${roleLabels[currentRole]}</small></div><nav aria-label="系统导航">${menuGroups[currentRole].map(([group, items]) => `<div class="nav-group"><p>${group}</p>${items.map(([page, label]) => menuItem(page, label)).join('')}</div>`).join('')}</nav></aside><div class="admin-main"><header class="admin-topbar"><strong>${currentRole === 'platform' ? '平台运营中心' : 'A 商家 / 配件店'}</strong><div>${currentRole === 'staff' ? '<span class="tag">在线接待</span>' : ''}<span>${person}</span></div></header><div class="admin-breadcrumb">${roleLabels[currentRole]} / ${title}</div><div class="admin-tabs"><span>${title}</span></div><div class="admin-content"><div class="admin-title"><h2>${title}</h2><span>当前范围：${currentRole === 'platform' ? '已授权的平台运行信息' : '配件店'}</span></div><div class="surface">${content}</div></div></div></div>`;
    17. 

  17. }
    18. 

  18. const productCard = (name, type = '键盘') => `<button class="goods-card" type="button" data-page="product" data-role="customer" data-category="${type}"><div class="goods-image">${type}<small>商品图片</small></div><div><strong>${name}</strong><p>日常办公 · 数码配件</p><span>查看商品</span></div></button>`;
    19. 

  19. const shortcut = (label, page) => `<button type="button" class="shortcut" data-page="${page}" data-role="customer"><span class="shortcut-icon" aria-hidden="true"></span>${label}</button>`;
    20. 

  20. register('customer', 'home', 'H11', '商城首页', () => mobile('首页', `<button class="shop-search" type="button" data-page="categories" data-role="customer">搜索商品、品牌、配件</button><div class="shop-banner"><small>A 商家 · 配件店</small><h2>数码配件专区</h2><p>键盘 / 鼠标 / 桌面配件</p>${link('进入商品分类', 'categories')}</div><div class="shortcut-grid">${shortcut('键盘', 'categories')}${shortcut('鼠标', 'categories')}${shortcut('配件', 'categories')}${shortcut('全部订单', 'orders')}</div><button class="ai-entry" type="button" data-page="chat" data-role="customer"><strong>AI 购物助手</strong><span>商品咨询、查订单、办售后</span><span>开始咨询　›</span></button><div class="section-heading"><h2>店铺商品</h2>${link('查看全部', 'categories')}</div><div class="goods-grid">${productCard('办公键盘')}${productCard('无线鼠标', '鼠标')}</div>`), ['首页保留搜索、分类、活动区域和商品列表的购物信息结构。', 'AI 提供独立服务入口，商品与订单也可以携带上下文进入咨询。', '商品浏览为场景页面，交易、支付与营销不在本项目学习业务范围。']);
    21. 

  21. register('customer', 'categories', 'H12', '商品分类', () => mobile('分类', `<button class="shop-search" type="button" data-action="catalog-search">搜索商品</button><div class="catalog"><nav aria-label="商品分类"><button data-action="category" data-category="键盘">键盘</button><button data-action="category" data-category="鼠标">鼠标</button><button data-action="category" data-category="桌面配件">桌面配件</button></nav><section><h2>${escapeHtml(state.category || '键盘')}</h2>${productCard(state.category === '鼠标' ? '无线鼠标' : '办公键盘', state.category || '键盘')}</section></div>`), ['分类导航与商品区域组成普通商城分类页面。', '商品咨询通过商品详情进入 AI，并显示当前咨询商品。']);
    22. 

  22. register('customer', 'product', 'H13', '商品详情', () => mobile('商品详情', `<div class="goods-image product-hero">${escapeHtml(state.category || '键盘')}<small>商品主图位置</small></div><h2>${state.category === '鼠标' ? '无线鼠标' : '办公键盘'}</h2><p>商品规格 · 产品介绍 · 使用说明</p><div class="product-section">选择规格 <span>标准款　›</span></div><div class="product-section">配送服务 <span>店铺配送说明　›</span></div><div class="product-section">店铺 <span>A 商家 · 配件店</span></div>${box('商品介绍', '<p>商品介绍正文与规格参数位置。</p>')}<div class="purchase-bar">${link('客服咨询', 'chat')}${button('加入购物车', 'commerce-scope')}${button('立即购买', 'commerce-scope', 'class="primary"')}</div>`), ['商品页保留图片、标题、规格、配送与购买操作位置。', '交易操作说明本项目范围，客服咨询与已购订单售后可继续演示。']);
    23. 

  23. register('customer', 'cart', 'H14', '购物车', () => mobile('购物车', `<div class="section-heading"><span>A 商家 · 配件店</span><span>管理</span></div><div class="empty"><h2>购物车暂时没有商品</h2><p>可以浏览店铺商品，或咨询购物助手。</p>${actions(`${link('去逛逛', 'categories')}${link('咨询 AI', 'chat')}`)}</div><div class="cart-total"><span>已选 0 件 · 合计 ¥0.00</span><button disabled>结算</button></div>`), ['保留正常商城购物车的位置和空状态。', '购物车计算与结算属于交易业务，当前学习范围提供已购订单和售后。']);
    24. 

  24. register('customer', 'profile', 'H15', '个人中心', () => mobile('我的', `<div class="profile-card"><div class="avatar-placeholder">头像</div><div><h2>${state.loggedIn ? 'A01' : '登录 / 注册'}</h2><p>${state.loggedIn ? '欢迎来到智选商城' : '登录后查看订单和售后进度'}</p>${!state.loggedIn ? link('立即登录', 'login') : ''}</div></div><div class="section-heading"><h2>我的订单</h2>${link('全部订单　›', 'orders')}</div><div class="order-shortcuts">${['待付款', '待发货', '待收货', '已完成'].map(label => `<button data-action="order-filter" data-filter="${label}"><span class="shortcut-icon"></span>${label}</button>`).join('')}${shortcut('退款 / 售后', 'ticket')}</div><button class="ai-entry" data-page="chat" data-role="customer"><strong>AI 客服</strong><span>查订单、了解规则、申请换货</span><span>进入会话　›</span></button><div class="account-list">${link('消息中心　›', 'messages')}${link('收货地址　›', 'address')}${link('我的收藏　›', 'favorites')}${link('沟通习惯　›', 'memory')}${link('账户与渠道身份　›', 'identity')}${link('设置　›', 'settings')}</div>`), ['个人中心集中订单状态、售后、账户和客户服务入口。', '沟通习惯属于 AI 服务设置，放在个人中心的功能列表内。']);
    25. 

  25. register('customer', 'messages', 'H16', '消息中心', () => mobile('消息中心', `<div class="account-list">${link('AI 客服 · 继续咨询　›', 'chat')}${link(`售后通知 · ${statusLabels[state.ticket]}　›`, 'ticket')}</div><div class="empty">店铺通知<br><span class="muted">暂无其他消息</span></div>`), ['消息中心区分客服会话、售后通知与店铺通知。']);
    26. 

  26. for (const [page, code, title] of [['address', 'H17', '收货地址'], ['favorites', 'H18', '我的收藏'], ['settings', 'H19', '账户设置']]) {
    27. 

  27.   register('customer', page, code, title, () => mobile(title, `${box(title, '<p>该栏目保留商城标准功能位置。本项目提供订单查询、AI 咨询和换货服务。</p>')}${actions(`${link('返回个人中心', 'profile')}${link('进入 AI 客服', 'chat')}`)}`), ['此页面用于确认产品导航位置，相关业务不在当前学习范围。']);
    28. 

  28. }
    29. 

  29. 

  30. register('platform', 'dashboard', 'P06', '平台概览', () => desktop(`<div class="metric-grid">${['接入商家', '运行应用', '等待任务', '异常告警'].map(label => `<section class="metric"><span>${label}</span><strong>—</strong><small>等待运行数据</small></section>`).join('')}</div><div class="grid">${box('平台运行趋势', '<div class="chart-placeholder">请求量 / 任务成功率 / 资源使用趋势</div>')}${box('待处理事项', `<div class="account-list">${link('商家接入申请　›', 'tenants')}${link('异常投递　›', 'deliveries')}${link('服务告警　›', 'health')}</div>`)}</div>${box('常用管理', actions(`${link('商家管理', 'tenants')}${link('配额管理', 'capacity')}${link('操作审计', 'audit')}`))}`), ['平台首页围绕接入、资源、运行和治理，业务正文权限独立。']);
    31. 

  31. 

  32. const auxiliaryPages = {
    33. 

  33.   staff: [['customers', '客户管理', '授权店铺客户、会话与售后记录'], ['reference', '知识中心', '服务规则、资料版本与引用'], ['quick-replies', '快捷回复', '客服常用回复管理'], ['statistics', '服务统计', '接待量、响应时间与处理情况']],
    34. 

  34.   supervisor: [['team', '客服团队', '团队接待与工作分配'], ['statistics', '服务统计', '审批处理与服务质量']],
    35. 

  35.   merchant: [['products', '商品管理', '商品列表、分类与库存'], ['orders', '订单管理', '订单查询、交易与履约状态'], ['after-sales', '售后管理', '换货工单、审批与履约'], ['customers', '客户管理', '本商家客户与服务记录'], ['marketing', '营销中心', '店铺活动与优惠'], ['service', '客服管理', '客服人员、会话与智能服务']],
    36. 

  36.   platform: [['applications', '应用接入', '应用、渠道与授权范围'], ['models', '模型服务', '模型配置、供应商与运行状态'], ['permissions', '权限管理', '平台人员与管理权限'], ['settings', '系统设置', '通知渠道与系统运行配置']],
    37. 

  37. };
    38. 

  38. for (const [role, pages] of Object.entries(auxiliaryPages)) {
    39. 

  39.   for (const [page, title, description] of pages) {
    40. 

  40.     register(role, page, `${role.toUpperCase()}-${page}`, title, () => desktop(`${box(title, `<p>${description}</p>`)}${role === 'merchant' && page === 'after-sales' ? table(['工单', '状态', '处理入口'], [['SH-001', statusLabels[state.ticket], link('处理售后工单', 'ticket', 'staff')]]) : role === 'merchant' && page === 'orders' ? table(['订单', '商品', '状态'], [['A-20260918-001', '键盘 × 1', '已签收']]) : `<div class="empty">当前栏目提供系统结构预览。<p>本项目学习业务集中于 AI 咨询、订单查询、换货、知识和平台治理。</p></div>`}${role === 'merchant' && page === 'service' ? `<p>员工需要会话接管与回复权限才可以接待客户。</p>${actions(link('接待客户', 'queue', 'staff'))}` : ''}`), ['栏目采用正常管理系统的信息结构，菜单与操作受当前员工权限限制。']);
    41. 

  41.   }
    42. 

  42. }
    43.