sqxp/docs/原型图/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叁强鲜配 - 原型图导航</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; min-height: 100vh; display: flex; flex-direction: column; }
        
        .header { background: linear-gradient(135deg, #1989fa 0%, #07c160 100%); padding: 40px; text-align: center; color: white; }
        .header h1 { font-size: 32px; font-weight: 600; margin-bottom: 8px; }
        .header p { font-size: 16px; opacity: 0.9; }
        
        .container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; flex: 1; }
        
        .section { margin-bottom: 40px; }
        .section-title { font-size: 20px; font-weight: 600; margin-bottom: 20px; padding-left: 12px; border-left: 4px solid #1989fa; display: flex; align-items: center; gap: 12px; }
        .section-title .icon { font-size: 24px; }
        
        .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
        
        .page-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: all 0.3s; cursor: pointer; display: block; text-decoration: none; color: inherit; }
        .page-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
        
        .page-card .icon { font-size: 40px; margin-bottom: 16px; }
        .page-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
        .page-card p { font-size: 14px; color: #909399; margin-bottom: 12px; }
        .page-card .tags { display: flex; gap: 8px; flex-wrap: wrap; }
        
        .tag { padding: 4px 10px; border-radius: 4px; font-size: 12px; }
        .tag.primary { background: #ecf5ff; color: #1989fa; }
        .tag.success { background: #f0f9eb; color: #07c160; }
        .tag.warning { background: #fdf6ec; color: #ff976a; }
        .tag.orange { background: #fff7e6; color: #ff976a; }
        
        .web-badge { background: linear-gradient(135deg, #1989fa, #07c160); color: white; }
        .mini-badge { background: linear-gradient(135deg, #ff976a, #07c160); color: white; }
        
        .role-tag { padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; }
        .role-tag.supplier { background: #fff7e6; color: #ff976a; }
        .role-tag.client { background: #f0f9eb; color: #07c160; }
        .role-tag.deliver { background: #fef0f0; color: #ee0a24; }
        
        .footer { text-align: center; padding: 20px; color: #909399; font-size: 14px; border-top: 1px solid #eee; }
    </style>
</head>
<body>
    <div class="header">
        <h1>叁强鲜配 - 原型图导航</h1>
        <p>Web端 + 小程序端 完整原型图</p>
    </div>
    
    <div class="container">
        <!-- Web端 -->
        <div class="section">
            <div class="section-title">
                <span class="icon">💻</span>
                <span>Web端 - 运营管理后台</span>
                <span class="tag web-badge" style="font-size:12px;padding:4px 12px;">运营人员专用</span>
            </div>
            <div class="card-grid">
                <a href="web/index.html" class="page-card">
                    <div class="icon">📊</div>
                    <h3>首页 / 数据概览</h3>
                    <p>运营首页，数据统计卡片、最新订单列表</p>
                    <div class="tags">
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="web/用户管理.html" class="page-card">
                    <div class="icon">👥</div>
                    <h3>用户管理</h3>
                    <p>账号列表、新增账号、角色管理</p>
                    <div class="tags">
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="web/区域管理.html" class="page-card">
                    <div class="icon">📍</div>
                    <h3>区域管理</h3>
                    <p>区域列表、新增区域、区域统计</p>
                    <div class="tags">
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="web/商品管理.html" class="page-card">
                    <div class="icon">📦</div>
                    <h3>商品管理</h3>
                    <p>商品分类、商品单位、商品列表</p>
                    <div class="tags">
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="web/询价管理.html" class="page-card">
                    <div class="icon">🔍</div>
                    <h3>询价管理</h3>
                    <p>询价单列表、创建询价单、询价详情</p>
                    <div class="tags">
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="web/报价管理.html" class="page-card">
                    <div class="icon">💰</div>
                    <h3>报价管理</h3>
                    <p>报价审核、供应商比价、选择供应商</p>
                    <div class="tags">
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="web/价格管理.html" class="page-card">
                    <div class="icon">🏷️</div>
                    <h3>价格管理</h3>
                    <p>价格清单列表、版本管理、历史价格</p>
                    <div class="tags">
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="web/订单管理.html" class="page-card">
                    <div class="icon">🛒</div>
                    <h3>订单管理</h3>
                    <p>订单列表、订单详情、订单调整</p>
                    <div class="tags">
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="web/配送管理.html" class="page-card">
                    <div class="icon">🚚</div>
                    <h3>配送管理</h3>
                    <p>配送任务列表、配送分配、时效预警</p>
                    <div class="tags">
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="web/结算管理.html" class="page-card">
                    <div class="icon">💳</div>
                    <h3>结算管理</h3>
                    <p>线下结算、退款记录、结算确认</p>
                    <div class="tags">
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="web/附件管理.html" class="page-card">
                    <div class="icon">📎</div>
                    <h3>附件管理</h3>
                    <p>附件列表、业务关联、文件预览</p>
                    <div class="tags">
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="web/系统设置.html" class="page-card">
                    <div class="icon">⚙️</div>
                    <h3>系统设置</h3>
                    <p>基本设置、安全设置、审计日志</p>
                    <div class="tags">
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="web/数据统计分析.html" class="page-card">
                    <div class="icon">📈</div>
                    <h3>数据统计分析</h3>
                    <p>订单统计、收入统计、区域对比、热销商品排名</p>
                    <div class="tags">
                        <span class="tag success">新增</span>
                    </div>
                </a>
            </div>
        </div>
        
        <!-- 小程序端 -->
        <div class="section">
            <div class="section-title">
                <span class="icon">📱</span>
                <span>小程序端 - 统一框架</span>
                <span class="tag mini-badge" style="font-size:12px;padding:4px 12px;">三角色合一</span>
            </div>
            <div class="card-grid">
                <a href="小程序/统一框架.html" class="page-card">
                    <div class="icon">🔐</div>
                    <h3>统一登录框架</h3>
                    <p>登录页 + 三大角色首页导航<br/>供应商 / 客户 / 配送员</p>
                    <div class="tags">
                        <span class="role-tag supplier">供应商</span>
                        <span class="role-tag client">客户</span>
                        <span class="role-tag deliver">配送员</span>
                    </div>
                </a>
            </div>
        </div>
        
        <!-- 小程序端详细页面 -->
        <div class="section">
            <div class="section-title">
                <span class="icon">📱</span>
                <span>小程序端 - 详细页面</span>
            </div>
            <div class="card-grid">
                <!-- 供应商 -->
                <a href="小程序/供应商工作台.html" class="page-card">
                    <div class="icon" style="color:#ff976a;">🏪</div>
                    <h3>供应商-工作台</h3>
                    <p>首页、询价入口、报价入口、基本信息</p>
                    <div class="tags">
                        <span class="role-tag supplier">供应商</span>
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="小程序/供应商询价列表.html" class="page-card">
                    <div class="icon" style="color:#ff976a;">📋</div>
                    <h3>供应商-询价列表</h3>
                    <p>询价单列表、状态筛选</p>
                    <div class="tags">
                        <span class="role-tag supplier">供应商</span>
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="小程序/供应商取货详情.html" class="page-card">
                    <div class="icon" style="color:#ff976a;">📦</div>
                    <h3>供应商-取货详情</h3>
                    <p>取货任务详情、商品清单、确认取货、凭证上传</p>
                    <div class="tags">
                        <span class="role-tag supplier">供应商</span>
                        <span class="tag success">新增</span>
                    </div>
                </a>
                
                <!-- 客户 -->
                <a href="小程序/客户工作台.html" class="page-card">
                    <div class="icon" style="color:#07c160;">🏠</div>
                    <h3>客户-工作台</h3>
                    <p>首页、价格清单入口、商品入口</p>
                    <div class="tags">
                        <span class="role-tag client">客户</span>
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="小程序/客户商品列表.html" class="page-card">
                    <div class="icon" style="color:#07c160;">📦</div>
                    <h3>客户-商品列表</h3>
                    <p>商品列表查看、价格展示</p>
                    <div class="tags">
                        <span class="role-tag client">客户</span>
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="小程序/客户购物车.html" class="page-card">
                    <div class="icon" style="color:#07c160;">🛒</div>
                    <h3>客户-购物车</h3>
                    <p>购物车管理、数量修改、结算</p>
                    <div class="tags">
                        <span class="role-tag client">客户</span>
                        <span class="tag success">新增</span>
                    </div>
                </a>
                <a href="小程序/客户地址管理.html" class="page-card">
                    <div class="icon" style="color:#07c160;">📍</div>
                    <h3>客户-地址管理</h3>
                    <p>地址列表、新增编辑、设为默认、删除</p>
                    <div class="tags">
                        <span class="role-tag client">客户</span>
                        <span class="tag success">新增</span>
                    </div>
                </a>
                <a href="小程序/客户我的订单.html" class="page-card">
                    <div class="icon" style="color:#07c160;">📄</div>
                    <h3>客户-我的订单</h3>
                    <p>订单列表、订单状态、取消申请</p>
                    <div class="tags">
                        <span class="role-tag client">客户</span>
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                
                <!-- 配送员 -->
                <a href="小程序/配送员工作台.html" class="page-card">
                    <div class="icon" style="color:#ee0a24;">🚚</div>
                    <h3>配送员-工作台</h3>
                    <p>首页、任务统计、待取货入口</p>
                    <div class="tags">
                        <span class="role-tag deliver">配送员</span>
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="小程序/配送员配送任务.html" class="page-card">
                    <div class="icon" style="color:#ee0a24;">📋</div>
                    <h3>配送员-配送任务</h3>
                    <p>任务列表、待取货/配送中状态切换</p>
                    <div class="tags">
                        <span class="role-tag deliver">配送员</span>
                        <span class="tag primary">已实现</span>
                    </div>
                </a>
                <a href="小程序/配送员历史任务.html" class="page-card">
                    <div class="icon" style="color:#ee0a24;">📜</div>
                    <h3>配送员-历史任务</h3>
                    <p>已完成/已取消任务、统计收入</p>
                    <div class="tags">
                        <span class="role-tag deliver">配送员</span>
                        <span class="tag success">新增</span>
                    </div>
                </a>
            </div>
        </div>
        
        <!-- 功能说明 -->
        <div class="section">
            <div class="section-title">
                <span class="icon">📋</span>
                <span>功能模块说明</span>
            </div>
            <div style="background:#fff;border-radius:12px;padding:24px;">
                <table style="width:100%;border-collapse:collapse;">
                    <thead>
                        <tr style="background:#f5f7fa;">
                            <th style="padding:12px;text-align:left;border-bottom:2px solid #eee;">模块</th>
                            <th style="padding:12px;text-align:left;border-bottom:2px solid #eee;">Web端功能</th>
                            <th style="padding:12px;text-align:left;border-bottom:2px solid #eee;">小程序端功能</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="padding:12px;border-bottom:1px solid #eee;">用户管理</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">创建账号、重置密码、角色分配</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">修改个人信息、修改密码</td>
                        </tr>
                        <tr>
                            <td style="padding:12px;border-bottom:1px solid #eee;">区域管理</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">区域CRUD、区域统计</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">查看所属区域</td>
                        </tr>
                        <tr>
                            <td style="padding:12px;border-bottom:1px solid #eee;">商品管理</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">商品分类、单位、商品CRUD</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">查看商品列表、价格</td>
                        </tr>
                        <tr>
                            <td style="padding:12px;border-bottom:1px solid #eee;">询价报价</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">发布询价、审核报价、比价选择</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">查看询价、提交报价</td>
                        </tr>
                        <tr>
                            <td style="padding:12px;border-bottom:1px solid #eee;">价格                            <td style="padding:12管理</td>
px;border-bottom:1px solid #eee;">生成价格清单、版本管理、发布</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">查看最新价格</td>
                        </tr>
                        <tr>
                            <td style="padding:12px;border-bottom:1px solid #eee;">订单管理</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">订单列表、分配配送、订单调整</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">下单、支付、取消、确认收货</td>
                        </tr>
                        <tr>
                            <td style="padding:12px;border-bottom:1px solid #eee;">配送管理</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">分配配送、时效预警</td>
                            <td style="padding:12px;border-bottom:1px solid #eee;">取货确认、送达确认、上传凭证</td>
                        </tr>
                        <tr>
                            <td style="padding:12px;">结算管理</td>
                            <td style="padding:12px;">线下结算确认、退款处理</td>
                            <td style="padding:12px;">查看订单支付状态</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div class="footer">
        <p>叁强鲜配 - 原型图导航 | UI风格已写入 .cursorrules 文件</p>
    </div>
</body>
</html>