中科集团HTML托管
返回管理
编辑页面
页面标题
有效期
7天
30天
90天
修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
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> <style> *{margin:0;padding:0;box-sizing:border-box} body{font-family:'PingFang SC','Microsoft YaHei',sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px} .container{max-width:1400px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.3);overflow:hidden;display:flex;min-height:calc(100vh - 40px)} .sidebar{width:280px;background:linear-gradient(180deg,#1a1a2e 0%,#16213e 100%);padding:20px 0;flex-shrink:0;overflow-y:auto;max-height:calc(100vh - 40px)} .logo{text-align:center;padding:20px;border-bottom:1px solid rgba(255,255,255,0.1);margin-bottom:10px} .logo h1{color:#fff;font-size:20px;font-weight:600;background:linear-gradient(90deg,#f093fb,#f5576c);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .logo p{color:rgba(255,255,255,0.5);font-size:12px;margin-top:5px} .menu-item{cursor:pointer;transition:all 0.3s ease;border:none;background:none;width:100%;text-align:left;outline:none} .menu-item:hover{background:rgba(255,255,255,0.05)} .menu-item.active{background:linear-gradient(90deg,rgba(246,78,139,0.3),rgba(136,99,251,0.3));border-left:3px solid #f5576c} .menu-item-btn{display:flex;align-items:center;width:100%;padding:14px 20px;color:rgba(255,255,255,0.85);font-size:14px;cursor:pointer;transition:all 0.3s ease} .menu-item-btn:hover{background:rgba(255,255,255,0.08)} .menu-item-btn .icon{width:36px;height:36px;background:linear-gradient(135deg,#f5576c,#f093fb);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-right:12px;font-size:16px;flex-shrink:0} .menu-item-btn .text{flex:1;font-weight:500} .menu-item-btn .arrow{transition:transform 0.3s ease;font-size:12px;opacity:0.7} .menu-item.active .arrow{transform:rotate(180deg)} .submenu{max-height:0;overflow:hidden;transition:max-height 0.3s ease;background:rgba(0,0,0,0.2)} .submenu.open{max-height:500px} .submenu-item{display:block;padding:10px 20px 10px 68px;color:rgba(255,255,255,0.7);font-size:13px;cursor:pointer;transition:all 0.2s ease;border-left:2px solid transparent} .submenu-item:hover{color:#fff;background:rgba(255,255,255,0.05)} .submenu-item.active{color:#f5576c;border-left-color:#f5576c;background:rgba(245,87,108,0.1)} .submenu-item .sub-num{color:rgba(255,255,255,0.4);font-size:11px;margin-right:8px} .main-content{flex:1;display:flex;flex-direction:column;overflow:hidden} .header{background:linear-gradient(90deg,#f093fb,#f5576c);padding:24px 30px;color:#fff;display:flex;align-items:center;justify-content:space-between} .header h2{font-size:24px;font-weight:600} .header p{opacity:0.9;font-size:14px;margin-top:5px} .content-area{flex:1;padding:24px;overflow-y:auto;background:#f8f9fa} .back-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;color:#f5576c;border:2px solid #f5576c;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all 0.3s ease} .back-btn:hover{background:#f5576c;color:#fff} .demo-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,0.08);animation:fadeIn 0.3s ease} @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .demo-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:2px solid #f0f0f0;margin-bottom:20px;flex-wrap:wrap;gap:15px} .demo-title{display:flex;align-items:center;gap:15px} .demo-icon{width:50px;height:50px;background:linear-gradient(135deg,#f5576c,#f093fb);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0} .demo-title h3{font-size:20px;color:#1a1a2e;margin-bottom:4px} .demo-title .tag{display:inline-block;background:rgba(245,87,108,0.1);color:#f5576c;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500} .btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s ease;border:none;display:inline-flex;align-items:center;gap:6px} .btn-primary{background:linear-gradient(135deg,#f5576c,#f093fb);color:#fff} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(245,87,108,0.3)} .btn-secondary{background:#fff;color:#666;border:1px solid #ddd} .btn-secondary:hover{border-color:#f5576c;color:#f5576c} .btn-success{background:#43e97b;color:#fff} .btn-danger{background:#f44336;color:#fff} .btn-sm{padding:6px 12px;font-size:12px} .table-wrapper{overflow-x:auto;margin:20px 0} table{width:100%;border-collapse:collapse} th,td{padding:12px 15px;text-align:left;border-bottom:1px solid #eee} th{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-weight:500;font-size:14px} th:first-child{border-radius:8px 0 0 0} th:last-child{border-radius:0 8px 0 0} tr:hover{background:rgba(102,126,234,0.05)} tr:nth-child(even){background:#f9f9f9} tr:nth-child(even):hover{background:rgba(102,126,234,0.08)} .badge{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500} .badge-vip{background:linear-gradient(135deg,#ffd700,#ffb347);color:#fff} .badge-gold{background:linear-gradient(135deg,#f5576c,#f093fb);color:#fff} .badge-normal{background:#e0e0e0;color:#666} .badge-active{background:#43e97b;color:#fff} .badge-inactive{background:#e0e0e0;color:#999} .badge-pending{background:#ffa726;color:#fff} .action-btns{display:flex;gap:8px} .action-btns button{padding:5px 10px;border:none;border-radius:4px;cursor:pointer;font-size:12px;transition:all 0.2s} .action-btns .edit{background:#e3f2fd;color:#1976d2} .action-btns .delete{background:#ffebee;color:#c62828} .action-btns .view{background:#f3e5f5;color:#7b1fa2} .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:20px} .form-group{margin-bottom:15px} .form-group label{display:block;margin-bottom:8px;color:#333;font-weight:500;font-size:14px} .form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 15px;border:1px solid #ddd;border-radius:8px;font-size:14px;transition:border-color 0.3s} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#f5576c} .form-group textarea{min-height:100px;resize:vertical} .search-bar{display:flex;gap:15px;margin-bottom:20px;flex-wrap:wrap;background:#f8f9fa;padding:20px;border-radius:12px} .search-bar input,.search-bar select{padding:10px 15px;border:1px solid #ddd;border-radius:8px;font-size:14px} .search-bar input{flex:1;min-width:200px} .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:24px} .stat-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;padding:20px;color:#fff} .stat-card.success{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%)} .stat-card.warning{background:linear-gradient(135deg,#ffa726 0%,#ff9800 100%)} .stat-card.danger{background:linear-gradient(135deg,#f5576c 0%,#f093fb 100%)} .stat-card h4{font-size:13px;opacity:0.9;margin-bottom:10px;font-weight:400} .stat-card .value{font-size:28px;font-weight:700} .stat-card .sub{font-size:12px;opacity:0.8;margin-top:5px} .pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px} .pagination button{padding:8px 14px;border:1px solid #ddd;background:#fff;border-radius:6px;cursor:pointer;transition:all 0.2s} .pagination button:hover{border-color:#f5576c;color:#f5576c} .pagination button.active{background:linear-gradient(135deg,#f5576c,#f093fb);color:#fff;border-color:transparent} .pagination button:disabled{opacity:0.5;cursor:not-allowed} .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center} .modal.show{display:flex} .modal-content{background:#fff;border-radius:16px;padding:30px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;animation:modalIn 0.3s ease} @keyframes modalIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}} .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #eee} .modal-header h3{font-size:18px;color:#1a1a2e} .modal-close{width:36px;height:36px;border:none;background:#f5f5f5;border-radius:50%;cursor:pointer;font-size:18px;transition:all 0.2s} .modal-close:hover{background:#f5576c;color:#fff} .modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid #eee} .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px} .info-card{background:#f8f9fa;border-radius:12px;padding:20px;border:2px solid transparent;transition:all 0.3s;cursor:pointer} .info-card:hover{border-color:#f5576c;transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,0.1)} .info-card h4{font-size:16px;color:#1a1a2e;margin-bottom:10px;display:flex;align-items:center;gap:8px} .info-card p{color:#666;font-size:13px;line-height:1.6} .log-list{max-height:400px;overflow-y:auto} .log-item{display:flex;gap:15px;padding:15px;border-bottom:1px solid #eee} .log-item:last-child{border-bottom:none} .log-time{color:#999;font-size:12px;min-width:80px} .log-content{flex:1} .log-action{color:#f5576c;font-weight:500} .log-user{color:#666} .welcome{text-align:center;padding:60px 40px} .welcome-icon{width:100px;height:100px;background:linear-gradient(135deg,#f5576c,#f093fb);border-radius:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 30px;font-size:48px} .welcome h3{color:#1a1a2e;font-size:24px;margin-bottom:12px} .welcome p{color:#666;font-size:15px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px} .stat-item{background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:12px;padding:20px;text-align:center} .stat-item .stat-num{font-size:28px;font-weight:700;background:linear-gradient(90deg,#f5576c,#f093fb);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .stat-item .stat-label{color:#666;font-size:13px;margin-top:5px} .chart-area{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:20px 0} .chart-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,0.05)} .chart-card h4{font-size:14px;color:#333;margin-bottom:15px} .chart-placeholder{height:200px;background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#999;font-size:14px} .steps{display:flex;justify-content:center;margin:30px 0} .step{display:flex;align-items:center} .step-num{width:36px;height:36px;background:#e0e0e0;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600} .step.active .step-num{background:linear-gradient(135deg,#f5576c,#f093fb)} .step-text{margin-left:10px;font-size:14px;color:#666} .step.active .step-text{color:#f5576c;font-weight:500} .step-line{width:60px;height:2px;background:#e0e0e0;margin:0 15px} .step-line.active{background:linear-gradient(90deg,#f5576c,#f093fb)} .cashier-layout{display:grid;grid-template-columns:1fr 350px;gap:20px} .cashier-left{background:#fff;border-radius:12px;padding:20px} .cashier-right{background:linear-gradient(180deg,#1a1a2e,#16213e);border-radius:12px;padding:20px;color:#fff} .cashier-item{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.1)} .cashier-item:last-child{border-bottom:none} .cashier-total{border-top:2px solid #f5576c;padding-top:15px;margin-top:15px} .cashier-total .label{font-size:16px;color:rgba(255,255,255,0.7)} .cashier-total .amount{font-size:24px;font-weight:700;color:#f5576c} .pay-methods{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px} .pay-method{padding:15px;background:rgba(255,255,255,0.1);border-radius:8px;text-align:center;cursor:pointer;transition:all 0.2s;border:2px solid transparent} .pay-method:hover,.pay-method.active{background:rgba(255,255,255,0.2);border-color:#f5576c} .pay-method .icon{font-size:24px;margin-bottom:5px} .dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px} .dashboard-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,0.05)} .dashboard-card .icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:15px} .dashboard-card .value{font-size:28px;font-weight:700;color:#1a1a2e} .dashboard-card .label{font-size:13px;color:#999;margin-top:5px} .dashboard-card .trend{font-size:12px;margin-top:8px} .dashboard-card .trend.up{color:#43e97b} .dashboard-card .trend.down{color:#f5576c} .project-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#f8f9fa;border-radius:8px;margin-bottom:10px} .project-info h4{font-size:15px;color:#333;margin-bottom:5px} .project-info span{font-size:12px;color:#999} .project-price{font-size:18px;font-weight:600;color:#f5576c} .tabs{display:flex;gap:5px;margin-bottom:20px;border-bottom:2px solid #eee} .tab{padding:12px 24px;cursor:pointer;font-size:14px;color:#666;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all 0.2s} .tab:hover{color:#f5576c} .tab.active{color:#f5576c;border-bottom-color:#f5576c;font-weight:500} .tab-content{display:none} .tab-content.active{display:block} @media(max-width:900px){.container{flex-direction:column}.sidebar{width:100%;max-height:none}.stats{grid-template-columns:repeat(2,1fr)}.cashier-layout{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:repeat(2,1fr)}} </style> </head> <body> <div class="container"> <nav class="sidebar"> <div class="logo"><h1>美业管理系统</h1><p>BEAUTY SALON MANAGEMENT</p></div> <div id="menuList"></div> </nav> <main class="main-content"> <header class="header"> <div><h2 id="headerTitle">功能模块总览</h2><p id="headerDesc">点击左侧菜单查看各功能详情</p></div> <button class="back-btn" onclick="showWelcome()" style="background:rgba(255,255,255,0.2);color:#fff;border-color:rgba(255,255,255,0.3)">← 返回总览</button> </header> <div class="content-area" id="contentArea"></div> </main> </div> <div class="modal" id="commonModal"><div class="modal-content" id="modalContent"></div></div> <script> const modules=[{id:1,name:"会员管理",icon:"👥",color:"#f5576c",features:[{id:1,name:"会员档案管理",desc:"支持录入会员基本信息（姓名、手机、性别、生日、备注），支持头像上传、档案编辑与删除，支持按手机号/姓名快速检索",demo:"memberProfile"},{id:2,name:"会员等级设置",desc:"自定义会员等级（如普通/VIP/金卡/钻石），各等级对应不同折扣、积分倍率与权益，支持升级条件自动判定",demo:"memberLevel"},{id:3,name:"会员标签管理",desc:"自定义标签（如高频客、沉睡客、过敏体质），支持单会员多标签，按标签筛选与群发营销",demo:"memberTag"},{id:4,name:"会员卡类型管理",desc:"支持储值卡、次卡、期限卡等多种卡类型创建，设置开卡金额、充值规则、有效期、使用范围等",demo:"cardType"},{id:5,name:"会员积分管理",desc:"消费自动积分，支持积分获取规则与兑换规则设置，积分明细查询与兑换记录",demo:"memberPoints"},{id:6,name:"会员跟进记录",desc:"记录每次服务后的回访、提醒、关怀内容，支持下次到店提醒与满意度跟踪",demo:"memberFollow"}]},{id:2,name:"充卡管理",icon:"💳",color:"#f093fb",features:[{id:7,name:"充值方案设置",desc:"创建充值赠送方案（如充1000送200），支持阶梯赠送、限时活动方案，方案可启用/停用",demo:"rechargePlan"},{id:8,name:"会员充值",desc:"选择会员→选择充值方案→支付→到账，支持现金/微信/支付宝/银行卡等多种支付方式，充值即时生效",demo:"memberRecharge"},{id:9,name:"充值赠送规则",desc:"赠送金额/次数自动到账，赠送部分可设置有效期、使用限制（仅限特定项目）",demo:"rechargeRule"},{id:10,name:"充值记录查询",desc:"按门店/时间/会员/操作人筛选充值记录，支持导出，显示实充金额与赠送金额",demo:"rechargeRecord"},{id:11,name:"退卡处理",desc:"支持储值卡余额退款，按消费比例扣除赠送金额，生成退卡流水并更新会员余额",demo:"refundCard"}]},{id:3,name:"项目管理",icon:"🛠️",color:"#4facfe",features:[{id:12,name:"服务项目设置",desc:"创建/编辑/删除服务项目，录入项目名称、编码、分类、参考时长、参考价格、适用性别",demo:"serviceProject"},{id:13,name:"项目分类管理",desc:"自定义项目分类（如面部护理、身体养生、美甲美睫、脱毛等），支持多级分类，分类排序",demo:"projectCategory"},{id:14,name:"项目定价",desc:"设置项目散客价、会员价、各等级差异化定价，支持按门店独立定价",demo:"projectPrice"},{id:15,name:"项目时长设置",desc:"设置项目标准服务时长，用于预约排班和员工工时统计",demo:"projectDuration"},{id:16,name:"项目物料关联",desc:"关联项目消耗的物料（如精油、面膜），每次服务自动扣减库存",demo:"projectMaterial"}]},{id:4,name:"价格管理",icon:"💰",color:"#43e97b",features:[{id:17,name:"基础定价",desc:"设置项目散客标准价，作为价格体系基准",demo:"basePrice"},{id:18,name:"会员价设置",desc:"按会员等级设置差异化价格，支持折扣率和固定价两种模式",demo:"memberPrice"},{id:19,name:"促销活动管理",desc:"创建限时折扣、体验价、新客专享价等促销活动，设置活动时间、适用项目与适用对象",demo:"promotion"},{id:20,name:"套餐管理",desc:"组合多个项目打包销售，设置套餐价格（低于单买总价），设置套餐有效期与使用规则",demo:"package"},{id:21,name:"价格审批",desc:"价格调整提交审批流程，审批通过后生效，保留历史价格记录",demo:"priceApproval"}]},{id:5,name:"员工管理",icon:"👨💼",color:"#fa709a",features:[{id:22,name:"员工档案管理",desc:"录入员工基本信息（姓名、手机、角色、入职日期、技能标签），支持状态管理（在职/离职）",demo:"staffProfile"},{id:23,name:"员工排班管理",desc:"按门店/日期设置员工班次，支持早班/晚班/休息，可视化管理排班表",demo:"staffSchedule"},{id:24,name:"业绩规则设置",desc:"按项目/岗位设置提成规则（固定金额/百分比/阶梯提成），支持手工与仪器项目分别设置",demo:"performanceRule"},{id:25,name:"员工业绩明细",desc:"实时查看每位员工的服务次数、业绩金额、提成金额，按日/周/月统计",demo:"performanceDetail"},{id:26,name:"员工业绩汇总",desc:"按门店/部门/时间段汇总员工业绩，支持排名与对比，可导出业绩报表",demo:"performanceSummary"},{id:27,name:"员工提成结算",desc:"按结算周期自动计算应发提成，支持手动调整，生成提成结算单",demo:"commissionSettle"}]},{id:6,name:"结账收银",icon:"🧾",color:"#ffa726",features:[{id:28,name:"开单结账",desc:"选择会员/散客→添加项目→指定服务员工→确认金额→选择支付方式→完成结账，支持同时使用多种支付方式组合支付",demo:"checkout"},{id:29,name:"挂单管理",desc:"服务未完成或等待支付时支持挂单，挂单可随时调出继续结算，支持挂单超时提醒",demo:"suspendOrder"},{id:30,name:"会员卡支付",desc:"结账时选择会员卡扣款（储值扣金额/次卡扣次数），自动按会员等级计算折扣",demo:"cardPayment"},{id:31,name:"组合支付",desc:"支持会员卡+现金、会员卡+微信等多种支付方式组合，各支付方式金额分别记录",demo:"comboPayment"},{id:32,name:"退款管理",desc:"已结账订单支持退款，退款按原支付路径退回，部分退款支持，生成退款流水",demo:"refundManage"},{id:33,name:"账单查询",desc:"按时间/门店/员工/会员查询账单明细，支持单笔账单详情查看与打印",demo:"billQuery"}]},{id:7,name:"会员卡消费",icon:"🎫",color:"#a18cd1",features:[{id:34,name:"储值卡消费",desc:"会员到店消费时从储值卡余额扣款，自动按会员等级享受折扣，余额不足时提示补差",demo:"storedValueConsume"},{id:35,name:"次卡消费",desc:"选择次卡对应项目进行扣次，显示剩余次数，次数用完自动提示续卡",demo:"timesCardConsume"},{id:36,name:"期限卡消费",desc:"期限卡有效期内不限次或限次消费，过期自动失效并提醒续卡",demo:"periodCardConsume"},{id:37,name:"消费记录查询",desc:"查询会员所有消费明细（时间、项目、门店、金额/次数、服务员工），支持按条件筛选",demo:"consumeRecord"},{id:38,name:"消费提醒",desc:"消费完成后自动推送消费详情（微信/短信），包含项目、金额、余额等信息",demo:"consumeNotice"}]},{id:8,name:"散客消费",icon:"🚶",color:"#30cfd0",features:[{id:39,name:"散客开单",desc:"无需注册会员即可开单消费，录入手机号便于后续查询与转化，按散客价计费",demo:"walkinOrder"},{id:40,name:"散客结账",desc:"支持现金/微信/支付宝等支付方式，不支持会员卡支付与会员折扣",demo:"walkinCheckout"},{id:41,name:"散客转会员",desc:"散客结账时可一键转为会员，历史消费记录自动关联至新会员档案",demo:"walkinToMember"},{id:42,name:"散客消费记录",desc:"按手机号查询散客历史消费，支持消费频次与金额统计，辅助营销决策",demo:"walkinRecord"}]},{id:9,name:"管理后台",icon:"⚙️",color:"#667eea",features:[{id:43,name:"数据看板",desc:"首页展示核心经营指标：今日营业额、到店人数、新增会员、充值金额、项目热度排行，支持按门店切换",demo:"dashboard"},{id:44,name:"营业报表",desc:"按日/周/月/自定义时段统计营业额、到店量、客单价、会员消费占比等，支持多维度对比分析",demo:"businessReport"},{id:45,name:"会员分析",desc:"会员增长趋势、活跃度分析、消费频次分布、沉睡会员预警，支持导出分析报告",demo:"memberAnalysis"},{id:46,name:"员工报表",desc:"员工业绩排名、服务时长统计、提成汇总、出勤统计，支持按门店/角色筛选",demo:"staffReport"},{id:47,name:"门店设置",desc:"门店基本信息管理（名称、地址、营业时间、联系方式），门店状态启停",demo:"storeSettings"},{id:48,name:"权限管理",desc:"角色权限配置（店长/顾问/技师/前台），各角色可访问的功能模块与数据范围不同，支持自定义角色",demo:"permission"},{id:49,name:"操作日志",desc:"记录关键操作（充值、退款、价格修改、权限变更），支持按时间/操作人/类型查询",demo:"operationLog"}]}]; let activeModule=null,activeFeature=null; const demoData={memberProfile:()=>`<div class="stats-grid"><div class="stat-card"><h4>会员总数</h4><div class="value">1,286</div><div class="sub">本月新增 86 人</div></div><div class="stat-card success"><h4>活跃会员</h4><div class="value">856</div><div class="sub">占比 66.5%</div></div><div class="stat-card warning"><h4>沉睡会员</h4><div class="value">320</div><div class="sub">30天未到店</div></div><div class="stat-card danger"><h4>即将流失</h4><div class="value">110</div><div class="sub">需要跟进</div></div></div><div class="search-bar"><input type="text" placeholder="搜索姓名/手机号..."><select><option>全部等级</option><option>VIP</option><option>金卡</option><option>普通</option></select><select><option>全部状态</option><option>活跃</option><option>沉睡</option></select><button class="btn btn-primary">🔍 搜索</button></div><div class="table-wrapper"><table><thead><tr><th>姓名</th><th>手机号</th><th>等级</th><th>余额</th><th>积分</th><th>最近到店</th><th>操作</th></tr></thead><tbody><tr><td>李小姐</td><td>138****8888</td><td><span class="badge badge-vip">VIP</span></td><td>¥8,860</td><td>12,600</td><td>2026-05-20</td><td class="action-btns"><button class="view">查看</button><button class="edit">编辑</button></td></tr><tr><td>王女士</td><td>139****6666</td><td><span class="badge badge-gold">金卡</span></td><td>¥3,200</td><td>8,400</td><td>2026-05-18</td><td class="action-btns"><button class="view">查看</button><button class="edit">编辑</button></td></tr><tr><td>张帅哥</td><td>136****1234</td><td><span class="badge badge-normal">普通</span></td><td>¥500</td><td>2,100</td><td>2026-05-15</td><td class="action-btns"><button class="view">查看</button><button class="edit">编辑</button></td></tr><tr><td>陈太太</td><td>135****9999</td><td><span class="badge badge-vip">VIP</span></td><td>¥15,600</td><td>25,000</td><td>2026-05-19</td><td class="action-btns"><button class="view">查看</button><button class="edit">编辑</button></td></tr></tbody></table></div><div class="pagination"><button disabled>上一页</button><button class="active">1</button><button>2</button><button>3</button><button>...</button><button>25</button><button>下一页</button></div>`,memberLevel:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('新增会员等级')">➕ 新增等级</button></div><div class="card-grid"><div class="info-card" style="border-left:4px solid #ffd700"><h4>🌟 VIP会员 <span class="badge badge-vip" style="margin-left:10px">进行中</span></h4><p><strong>折扣:</strong> 7折 <strong>积分倍率:</strong> 3倍</p><p><strong>升级条件:</strong> 累计消费满 ¥30,000</p><p><strong>权益:</strong> 专属通道、生日礼遇、优先预约</p></div><div class="info-card" style="border-left:4px solid #f5576c"><h4>💎 金卡会员 <span class="badge badge-gold" style="margin-left:10px">进行中</span></h4><p><strong>折扣:</strong> 8折 <strong>积分倍率:</strong> 2倍</p><p><strong>升级条件:</strong> 累计消费满 ¥10,000</p><p><strong>权益:</strong> 生日礼遇、积分加倍</p></div><div class="info-card" style="border-left:4px solid #4facfe"><h4>🎫 银卡会员 <span class="badge badge-normal" style="margin-left:10px">进行中</span></h4><p><strong>折扣:</strong> 9折 <strong>积分倍率:</strong> 1.5倍</p><p><strong>升级条件:</strong> 累计消费满 ¥3,000</p><p><strong>权益:</strong> 基本会员优惠</p></div><div class="info-card" style="border-left:4px solid #999"><h4>👤 普通会员 <span class="badge badge-normal" style="margin-left:10px">进行中</span></h4><p><strong>折扣:</strong> 无折扣 <strong>积分倍率:</strong> 1倍</p><p><strong>升级条件:</strong> 无门槛</p><p><strong>权益:</strong> 注册即可成为会员</p></div></div>`,memberTag:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('新增标签')">➕ 新增标签</button></div><div class="card-grid"><div class="info-card"><h4>🔥 高频客 <span class="badge badge-active" style="margin-left:10px">156人</span></h4><p>月消费3次以上，核心客户群体</p></div><div class="info-card"><h4>😴 沉睡客 <span class="badge badge-pending" style="margin-left:10px">89人</span></h4><p>30天以上未到店的会员</p></div><div class="info-card"><h4>🌿 过敏体质 <span class="badge badge-normal" style="margin-left:10px">23人</span></h4><p>有特定过敏史，需注意产品选择</p></div><div class="info-card"><h4>💆 养生爱好者 <span class="badge badge-active" style="margin-left:10px">245人</span></h4><p>偏好身体养生类项目</p></div><div class="info-card"><h4>💅 美甲爱好者 <span class="badge badge-active" style="margin-left:10px">312人</span></h4><p>偏好美甲美睫类项目</p></div><div class="info-card"><h4>👶 孕产期 <span class="badge badge-pending" style="margin-left:10px">18人</span></h4><p>孕期或产后恢复期会员</p></div></div>`,cardType:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('新增卡类型')">➕ 新增卡类型</button></div><div class="card-grid"><div class="info-card" style="border-left:4px solid #43e97b"><h4>💳 储值卡</h4><p><strong>开卡金额:</strong> ¥500 起</p><p><strong>有效期:</strong> 永久有效</p><p><strong>使用范围:</strong> 全店通用</p><p><strong>特点:</strong> 余额可退，按消费比例扣除赠送</p></div><div class="info-card" style="border-left:4px solid #4facfe"><h4>🎫 次卡</h4><p><strong>最低次数:</strong> 5次起</p><p><strong>有效期:</strong> 购买后12个月</p><p><strong>使用范围:</strong> 指定项目</p><p><strong>特点:</strong> 按次扣费，适合高频项目</p></div><div class="info-card" style="border-left:4px solid #f093fb"><h4>📅 期限卡</h4><p><strong>最低期限:</strong> 1个月起</p><p><strong>有效期:</strong> 按卡类型</p><p><strong>使用范围:</strong> 全店通用</p><p><strong>特点:</strong> 期限内不限次或限次消费</p></div></div>`,memberPoints:()=>`<div class="stats-grid"><div class="stat-card"><h4>本月发放积分</h4><div class="value">156,800</div><div class="sub">较上月 +12%</div></div><div class="stat-card success"><h4>本月兑换积分</h4><div class="value">45,600</div><div class="sub">共 89 笔兑换</div></div><div class="stat-card warning"><h4>积分结余</h4><div class="value">2,156,000</div><div class="sub">会员总计</div></div></div><div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('设置积分规则')">⚙️ 设置规则</button></div><div class="table-wrapper"><table><thead><tr><th>规则名称</th><th>获取方式</th><th>积分倍率</th><th>状态</th><th>操作</th></tr></thead><tbody><tr><td>消费积分</td><td>每消费1元</td><td>1倍</td><td><span class="badge badge-active">启用</span></td><td class="action-btns"><button class="edit">编辑</button></td></tr><tr><td>生日积分</td><td>生日当月</td><td>2倍</td><td><span class="badge badge-active">启用</span></td><td class="action-btns"><button class="edit">编辑</button></td></tr><tr><td>推荐积分</td><td>推荐新会员</td><td>500积分/次</td><td><span class="badge badge-active">启用</span></td><td class="action-btns"><button class="edit">编辑</button></td></tr></tbody></table></div>`,memberFollow:()=>`<div class="search-bar"><select><option>全部类型</option><option>回访</option><option>提醒</option><option>关怀</option></select><input type="date" value="2026-05-01"> - <input type="date" value="2026-05-21"><button class="btn btn-primary">🔍 查询</button></div><div class="table-wrapper"><table><thead><tr><th>会员</th><th>跟进类型</th><th>跟进内容</th><th>服务员工</th><th>跟进时间</th><th>下次提醒</th><th>操作</th></tr></thead><tbody><tr><td>李小姐</td><td><span class="badge badge-active">回访</span></td><td>项目效果良好，皮肤状态改善明显</td><td>小明</td><td>2026-05-20</td><td>2026-05-27</td><td class="action-btns"><button class="view">详情</button></td></tr><tr><td>王女士</td><td><span class="badge badge-pending">提醒</span></td><td>睫毛护理即将到期，提醒续卡</td><td>小红</td><td>2026-05-19</td><td>2026-05-26</td><td class="action-btns"><button class="view">详情</button></td></tr><tr><td>张帅哥</td><td><span class="badge badge-gold">关怀</span></td><td>天气变化注意保湿，已发送护理建议</td><td>小华</td><td>2026-05-18</td><td>-</td><td class="action-btns"><button class="view">详情</button></td></tr></tbody></table></div>`,rechargePlan:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('新建充值方案')">➕ 新建方案</button></div><div class="card-grid"><div class="info-card" style="border-left:4px solid #43e97b"><h4>💰 基础充值 <span class="badge badge-active" style="margin-left:10px">启用</span></h4><p><strong>充500</strong> 送 50 (9.1折)</p><p><strong>充1000</strong> 送 150 (8.7折)</p><p><strong>充2000</strong> 送 400 (8.3折)</p><p><strong>充5000</strong> 送 1200 (8.1折)</p></div><div class="info-card" style="border-left:4px solid #f5576c"><h4>🎁 限时活动 <span class="badge badge-pending" style="margin-left:10px">5月限定</span></h4><p><strong>充1000</strong> 送 300 (特别回馈)</p><p><strong>有效期:</strong> 2026.05.01-05.31</p><p><strong>参与门店:</strong> 全门店</p></div><div class="info-card" style="border-left:4px solid #ffa726"><h4>🌟 VIP专享 <span class="badge badge-vip" style="margin-left:10px">VIP专属</span></h4><p><strong>充3000</strong> 送 900 (额外送)</p><p><strong>充5000</strong> 送 1600 (额外送)</p><p><strong>充10000</strong> 送 3500 (额外送)</p></div></div>`,memberRecharge:()=>`<div class="steps"><div class="step active"><div class="step-num">1</div><div class="step-text">选择会员</div></div><div class="step-line active"></div><div class="step active"><div class="step-num">2</div><div class="step-text">选择方案</div></div><div class="step-line active"></div><div class="step"><div class="step-num">3</div><div class="step-text">确认支付</div></div><div class="step-line"></div><div class="step"><div class="step-num">4</div><div class="step-text">完成充值</div></div></div><div class="form-row"><div class="form-group"><label>会员手机号/姓名</label><input type="text" placeholder="输入手机号或姓名搜索" value="138****8888"><p style="margin-top:5px;color:#43e97b">✅ 会员: 李小姐 | VIP | 余额: ¥8,860</p></div><div class="form-group"><label>选择充值方案</label><select><option>💰 基础充值 - 充1000送150</option><option>🎁 限时活动 - 充1000送300</option><option>🌟 VIP专享 - 充3000送900</option></select></div></div><div style="background:#f8f9fa;padding:20px;border-radius:12px;margin:20px 0"><h4 style="margin-bottom:15px">💳 支付方式</h4><div class="pay-methods"><div class="pay-method active"><div class="icon">💵</div><div>现金</div></div><div class="pay-method"><div class="icon">💚</div><div>微信</div></div><div class="pay-method"><div class="icon">💙</div><div>支付宝</div></div><div class="pay-method"><div class="icon">🏦</div><div>银行卡</div></div></div></div><div style="text-align:center;margin-top:30px"><div style="font-size:24px;color:#666;margin-bottom:10px">实付金额</div><div style="font-size:48px;font-weight:700;color:#f5576c">¥1,000</div><div style="color:#43e97b;font-size:14px;margin-top:10px">赠送 ¥150 (实时到账)</div></div><div style="text-align:center;margin-top:20px"><button class="btn btn-primary btn-lg" style="padding:15px 60px;font-size:18px">💳 确认充值 ¥1,000</button></div>`,rechargeRule:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('设置赠送规则')">⚙️ 设置规则</button></div><div class="card-grid"><div class="info-card"><h4>📋 赠送规则设置</h4><p><strong>赠送方式:</strong> 实时到账</p><p><strong>有效期:</strong> 与主卡一致</p><p><strong>使用限制:</strong> 无限制（全店通用）</p></div><div class="info-card"><h4>⚠️ 退款规则</h4><p><strong>退款计算:</strong> 消费部分扣除赠送</p><p><strong>公式:</strong> 实退 = 余额 - (赠送/实充×已消费)</p><p><strong>示例:</strong> 充值1000送200，消费500后退款</p></div></div>`,rechargeRecord:()=>`<div class="search-bar"><input type="text" placeholder="搜索会员/操作人..."><input type="date"> - <input type="date"><select><option>全部门店</option><option>旗舰店</option><option>二店</option></select><button class="btn btn-primary">🔍 查询</button><button class="btn btn-secondary">📥 导出</button></div><div class="table-wrapper"><table><thead><tr><th>会员</th><th>实充金额</th><th>赠送金额</th><th>到账金额</th><th>支付方式</th><th>操作人</th><th>时间</th></tr></thead><tbody><tr><td>李小姐</td><td>¥1,000</td><td>¥150</td><td>¥1,150</td><td>微信</td><td>前台小王</td><td>2026-05-21 10:30</td></tr><tr><td>王女士</td><td>¥3,000</td><td>¥900</td><td>¥3,900</td><td>支付宝</td><td>前台小红</td><td>2026-05-21 09:15</td></tr><tr><td>陈太太</td><td>¥5,000</td><td>¥1,600</td><td>¥6,600</td><td>银行卡</td><td>前台小王</td><td>2026-05-20 16:45</td></tr><tr><td>刘小姐</td><td>¥1,000</td><td>¥150</td><td>¥1,150</td><td>微信</td><td>前台小李</td><td>2026-05-20 14:20</td></tr></tbody></table></div>`,refundCard:()=>`<div class="form-row"><div class="form-group"><label>会员手机号</label><input type="text" placeholder="输入手机号查询"></div><div class="form-group"><label>退卡原因</label><select><option>客户自愿</option><option>服务不满意</option><option>门店关闭</option><option>其他</option></select></div></div><div style="background:#fff5f5;border:1px solid #f5576c;border-radius:12px;padding:20px;margin:20px 0"><h4 style="color:#f5576c;margin-bottom:15px">⚠️ 退卡确认信息</h4><p><strong>会员:</strong> 李小姐 (VIP)</p><p><strong>储值余额:</strong> ¥8,860</p><p><strong>赠送余额:</strong> ¥860 (已消费 ¥2,000)</p><p style="border-top:1px solid #eee;padding-top:15px;margin-top:15px"><strong>应退金额计算:</strong></p><p>主卡余额: ¥8,860</p><p>赠送已消费扣除: ¥860 × (2000/3000) = ¥573</p><p style="font-size:18px;font-weight:700;color:#f5576c;margin-top:10px">💰 应退金额: ¥8,287</p></div><div style="text-align:center"><button class="btn btn-danger" style="padding:12px 40px">⚠️ 确认退卡</button></div>`,serviceProject:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('新增项目')">➕ 新增项目</button></div><div class="search-bar"><input type="text" placeholder="搜索项目名称/编码..."><select><option>全部分类</option><option>面部护理</option><option>身体养生</option><option>美甲美睫</option></select><button class="btn btn-primary">🔍 搜索</button></div><div class="table-wrapper"><table><thead><tr><th>编码</th><th>项目名称</th><th>分类</th><th>时长</th><th>散客价</th><th>会员价</th><th>状态</th><th>操作</th></tr></thead><tbody><tr><td>P001</td><td>深层清洁面部护理</td><td>面部护理</td><td>60分钟</td><td>¥398</td><td>¥298</td><td><span class="badge badge-active">上架</span></td><td class="action-btns"><button class="edit">编辑</button><button class="delete">删除</button></td></tr><tr><td>P002</td><td>补水精华导入</td><td>面部护理</td><td>45分钟</td><td>¥298</td><td>¥218</td><td><span class="badge badge-active">上架</span></td><td class="action-btns"><button class="edit">编辑</button><button class="delete">删除</button></td></tr><tr><td>P003</td><td>全身经络疏通</td><td>身体养生</td><td>90分钟</td><td>¥528</td><td>¥398</td><td><span class="badge badge-active">上架</span></td><td class="action-btns"><button class="edit">编辑</button><button class="delete">删除</button></td></tr></tbody></table></div>`,projectCategory:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('新增分类')">➕ 新增分类</button></div><div class="card-grid"><div class="info-card" style="border-left:4px solid #4facfe"><h4>👩 面部护理 <span style="color:#999;font-size:12px">(23个项目)</span></h4><p>深层清洁、补水保湿、美白淡斑、抗衰紧致、眼部护理...</p><div style="margin-top:10px;display:flex;gap:8px"><button class="btn btn-sm btn-secondary">➕ 子分类</button><button class="btn btn-sm btn-secondary">编辑</button></div></div><div class="info-card" style="border-left:4px solid #43e97b"><h4>💆 身体养生 <span style="color:#999;font-size:12px">(18个项目)</span></h4><p>经络疏通、肩颈护理、卵巢保养、肾部保养...</p><div style="margin-top:10px;display:flex;gap:8px"><button class="btn btn-sm btn-secondary">➕ 子分类</button><button class="btn btn-sm btn-secondary">编辑</button></div></div><div class="info-card" style="border-left:4px solid #f5576c"><h4>💅 美甲美睫 <span style="color:#999;font-size:12px">(15个项目)</span></h4><p>日式美睫、法式美甲、光疗甲、晕染美甲...</p><div style="margin-top:10px;display:flex;gap:8px"><button class="btn btn-sm btn-secondary">➕ 子分类</button><button class="btn btn-sm btn-secondary">编辑</button></div></div><div class="info-card" style="border-left:4px solid #f093fb"><h4>✨ 脱毛 <span style="color:#999;font-size:12px">(8个项目)</span></h4><p>腋下脱毛、腿部脱毛、手臂脱毛、唇毛脱毛...</p><div style="margin-top:10px;display:flex;gap:8px"><button class="btn btn-sm btn-secondary">➕ 子分类</button><button class="btn btn-sm btn-secondary">编辑</button></div></div></div>`,projectPrice:()=>`<div class="search-bar"><input type="text" placeholder="搜索项目名称..."><select><option>全部分类</option><option>面部护理</option><option>身体养生</option></select><button class="btn btn-primary">🔍 搜索</button></div><div class="table-wrapper"><table><thead><tr><th>项目</th><th>散客价</th><th>普通会员</th><th>银卡会员</th><th>金卡会员</th><th>VIP会员</th><th>操作</th></tr></thead><tbody><tr><td>深层清洁面部护理</td><td>¥398</td><td>¥358 (9折)</td><td>¥338 (8.5折)</td><td>¥318 (8折)</td><td>¥278 (7折)</td><td><button class="edit">调整</button></td></tr><tr><td>补水精华导入</td><td>¥298</td><td>¥268 (9折)</td><td>¥253 (8.5折)</td><td>¥238 (8折)</td><td>¥208 (7折)</td><td><button class="edit">调整</button></td></tr><tr><td>全身经络疏通</td><td>¥528</td><td>¥475 (9折)</td><td>¥448 (8.5折)</td><td>¥422 (8折)</td><td>¥370 (7折)</td><td><button class="edit">调整</button></td></tr></tbody></table></div>`,projectDuration:()=>`<div class="search-bar"><input type="text" placeholder="搜索项目..."><button class="btn btn-primary">🔍 搜索</button></div><div class="table-wrapper"><table><thead><tr><th>项目名称</th><th>标准时长</th><th>缓冲时间</th><th>总时长</th><th>操作</th></tr></thead><tbody><tr><td>深层清洁面部护理</td><td>60分钟</td><td>10分钟</td><td>70分钟</td><td><button class="edit">编辑</button></td></tr><tr><td>补水精华导入</td><td>45分钟</td><td>10分钟</td><td>55分钟</td><td><button class="edit">编辑</button></td></tr><tr><td>全身经络疏通</td><td>90分钟</td><td>15分钟</td><td>105分钟</td><td><button class="edit">编辑</button></td></tr><tr><td>日式美睫</td><td>45分钟</td><td>5分钟</td><td>50分钟</td><td><button class="edit">编辑</button></td></tr></tbody></table></div>`,projectMaterial:()=>`<div class="search-bar"><input type="text" placeholder="搜索项目/物料..."><button class="btn btn-primary">🔍 搜索</button></div><div class="table-wrapper"><table><thead><tr><th>项目名称</th><th>关联物料</th><th>消耗量</th><th>库存预警</th><th>操作</th></tr></thead><tbody><tr><td>深层清洁面部护理</td><td>导出精华液</td><td>5ml/次</td><td><span style="color:#43e97b">充足</span></td><td><button class="edit">编辑</button></td></tr><tr><td>补水精华导入</td><td>补水面膜</td><td>1片/次</td><td><span style="color:#ffa726">剩余15片</span></td><td><button class="edit">编辑</button></td></tr><tr><td>全身经络疏通</td><td>按摩精油</td><td>20ml/次</td><td><span style="color:#f5576c">库存不足</span></td><td><button class="edit">编辑</button></td></tr></tbody></table></div>`,basePrice:()=>`<div class="search-bar"><input type="text" placeholder="搜索项目..."><button class="btn btn-primary">🔍 搜索</button><button class="btn btn-secondary">📥 批量导入</button></div><div class="table-wrapper"><table><thead><tr><th>项目编码</th><th>项目名称</th><th>分类</th><th>散客标准价</th><th>成本价</th><th>毛利率</th><th>操作</th></tr></thead><tbody><tr><td>P001</td><td>深层清洁面部护理</td><td>面部护理</td><td>¥398</td><td>¥80</td><td>79.9%</td><td><button class="edit">调整</button></td></tr><tr><td>P002</td><td>补水精华导入</td><td>面部护理</td><td>¥298</td><td>¥50</td><td>83.2%</td><td><button class="edit">调整</button></td></tr><tr><td>P003</td><td>全身经络疏通</td><td>身体养生</td><td>¥528</td><td>¥100</td><td>81.1%</td><td><button class="edit">调整</button></td></tr></tbody></table></div>`,memberPrice:()=>`<div class="search-bar"><select><option>全部等级</option><option>普通会员</option><option>银卡会员</option><option>金卡会员</option><option>VIP会员</option></select><button class="btn btn-primary">🔍 筛选</button></div><div class="table-wrapper"><table><thead><tr><th>项目</th><th>等级</th><th>定价模式</th><th>折扣率</th><th>会员价</th><th>操作</th></tr></thead><tbody><tr><td rowspan="4">深层清洁面部护理</td><td>普通</td><td>折扣</td><td>9折</td><td>¥358</td><td rowspan="4"><button class="edit">批量调整</button></td></tr><tr><td>银卡</td><td>折扣</td><td>8.5折</td><td>¥338</td></tr><tr><td>金卡</td><td>折扣</td><td>8折</td><td>¥318</td></tr><tr><td>VIP</td><td>折扣</td><td>7折</td><td>¥278</td></tr></tbody></table></div>`,promotion:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('创建促销')">➕ 创建促销</button></div><div class="card-grid"><div class="info-card" style="border-left:4px solid #f5576c"><h4>🔥 新客专享 <span class="badge badge-active" style="margin-left:10px">进行中</span></h4><p><strong>活动时间:</strong> 2026.05.01-05.31</p><p><strong>优惠内容:</strong> 首单5折 (限面部护理)</p><p><strong>参与人数:</strong> 156人</p></div><div class="info-card" style="border-left:4px solid #ffa726"><h4>⏰ 限时折扣 <span class="badge badge-pending" style="margin-left:10px">即将开始</span></h4><p><strong>活动时间:</strong> 2026.06.01-06.07</p><p><strong>优惠内容:</strong> 母亲节特惠 全场8折</p><p><strong>状态:</strong> 预热中</p></div><div class="info-card" style="border-left:4px solid #43e97b"><h4>💆 体验价 <span class="badge badge-inactive" style="margin-left:10px">已结束</span></h4><p><strong>活动时间:</strong> 2026.04.01-04.30</p><p><strong>优惠内容:</strong> 身体项目体验价 ¥198</p><p><strong>参与人数:</strong> 89人</p></div></div>`,package:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('创建套餐')">➕ 创建套餐</button></div><div class="card-grid"><div class="info-card" style="border-left:4px solid #4facfe"><h4>🌸 面部护理套餐A <span class="badge badge-active" style="margin-left:10px">在售</span></h4><p><strong>包含项目:</strong> 深层清洁+补水精华+眼部护理</p><p><strong>套餐价:</strong> ¥680 (原价 ¥894)</p><p><strong>有效期:</strong> 购买后6个月</p><p><strong>已售:</strong> 234份</p></div><div class="info-card" style="border-left:4px solid #43e97b"><h4>💆 养生套餐B <span class="badge badge-active" style="margin-left:10px">在售</span></h4><p><strong>包含项目:</strong> 肩颈+腰部+腿部经络疏通</p><p><strong>套餐价:</strong> ¥980 (原价 ¥1280)</p><p><strong>有效期:</strong> 购买后12个月</p><p><strong>已售:</strong> 156份</p></div></div>`,priceApproval:()=>`<div class="table-wrapper"><table><thead><tr><th>申请人</th><th>项目</th><th>原价</th><th>调整价</th><th>调整幅度</th><th>申请理由</th><th>申请时间</th><th>操作</th></tr></thead><tbody><tr><td>管理员小王</td><td>深层清洁面部护理</td><td>¥398</td><td>¥358</td><td style="color:#43e97b">-10%</td><td>竞争对手促销降价</td><td>2026-05-21 09:30</td><td><button class="btn btn-sm btn-success">通过</button><button class="btn btn-sm btn-danger">驳回</button></td></tr><tr><td>管理员小红</td><td>全身经络疏通</td><td>¥528</td><td>¥588</td><td style="color:#f5576c">+11%</td><td>成本上涨</td><td>2026-05-21 10:15</td><td><button class="btn btn-sm btn-success">通过</button><button class="btn btn-sm btn-danger">驳回</button></td></tr></tbody></table></div>`,staffProfile:()=>`<div class="stats-grid"><div class="stat-card"><h4>在职员工</h4><div class="value">28</div><div class="sub">本月入职 2 人</div></div><div class="stat-card success"><h4>在职</h4><div class="value">24</div></div><div class="stat-card warning"><h4>休息中</h4><div class="value">3</div></div><div class="stat-card danger"><h4>离职</h4><div class="value">4</div></div></div><div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('新增员工')">➕ 新增员工</button></div><div class="table-wrapper"><table><thead><tr><th>姓名</th><th>手机号</th><th>角色</th><th>入职日期</th><th>技能标签</th><th>状态</th><th>操作</th></tr></thead><tbody><tr><td>小明</td><td>138****8888</td><td>美容师</td><td>2023-06-15</td><td><span style="background:#e8f5e9;color:#2e7d32;padding:2px 8px;border-radius:10px;font-size:11px">面部护理</span><span style="background:#e3f2fd;color:#1565c0;padding:2px 8px;border-radius:10px;font-size:11px;margin-left:5px">经络疏通</span></td><td><span class="badge badge-active">在职</span></td><td class="action-btns"><button class="edit">编辑</button></td></tr><tr><td>小红</td><td>139****6666</td><td>高级美容师</td><td>2022-03-20</td><td><span style="background:#e8f5e9;color:#2e7d32;padding:2px 8px;border-radius:10px;font-size:11px">面部护理</span><span style="background:#e3f2fd;color:#1565c0;padding:2px 8px;border-radius:10px;font-size:11px;margin-left:5px">美甲美睫</span></td><td><span class="badge badge-active">在职</span></td><td class="action-btns"><button class="edit">编辑</button></td></tr><tr><td>小华</td><td>137****1234</td><td>顾问</td><td>2024-01-10</td><td><span style="background:#fff3e0;color:#ef6c00;padding:2px 8px;border-radius:10px;font-size:11px">咨询</span></td><td><span class="badge badge-pending">休息</span></td><td class="action-btns"><button class="edit">编辑</button></td></tr></tbody></table></div>`,staffSchedule:()=>`<div class="search-bar"><select><option>全部门店</option><option>旗舰店</option></select><input type="date" value="2026-05-21"><button class="btn btn-primary">🔍 查询</button></div><div class="table-wrapper"><table><thead><tr><th>员工</th><th>角色</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th><th>周日</th></tr></thead><tbody><tr><td>小明</td><td>美容师</td><td style="background:#c8e6c9">早班</td><td style="background:#c8e6c9">早班</td><td style="background:#c8e6c9">早班</td><td style="background:#c8e6c9">早班</td><td style="background:#c8e6c9">早班</td><td style="background:#ffecb3">晚班</td><td style="background:#fff"></td></tr><tr><td>小红</td><td>美容师</td><td style="background:#c8e6c9">早班</td><td style="background:#c8e6c9">早班</td><td style="background:#fff3e0">休息</td><td style="background:#c8e6c9">早班</td><td style="background:#c8e6c9">早班</td><td style="background:#c8e6c9">早班</td><td style="background:#ffecb3">晚班</td></tr><tr><td>小华</td><td>顾问</td><td style="background:#c8e6c9">早班</td><td style="background:#ffecb3">晚班</td><td style="background:#c8e6c9">早班</td><td style="background:#ffecb3">晚班</td><td style="background:#c8e6c9">早班</td><td style="background:#c8e6c9">早班</td><td style="background:#fff"></td></tr></tbody></table><p style="font-size:12px;color:#999;margin-top:10px">🟢 早班 09:00-18:00 🟡 晚班 14:00-22:00 ⬜ 休息</p></div>`,performanceRule:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('设置提成规则')">➕ 新增规则</button></div><div class="table-wrapper"><table><thead><tr><th>规则名称</th><th>项目类型</th><th>岗位</th><th>提成方式</th><th>提成比例</th><th>生效日期</th><th>操作</th></tr></thead><tbody><tr><td>手工项目提成</td><td>面部护理/身体养生</td><td>美容师</td><td>百分比</td><td>20%</td><td>2026-01-01</td><td><button class="edit">编辑</button></td></tr><tr><td>仪器项目提成</td><td>仪器类</td><td>美容师</td><td>固定金额</td><td>¥50/次</td><td>2026-01-01</td><td><button class="edit">编辑</button></td></tr><tr><td>顾问推荐提成</td><td>全部</td><td>顾问</td><td>百分比</td><td>5%</td><td>2026-01-01</td><td><button class="edit">编辑</button></td></tr></tbody></table></div>`,performanceDetail:()=>`<div class="search-bar"><select><option>选择员工</option><option>小明</option><option>小红</option></select><select><option>本月</option><option>上周</option><option>本周</option></select><button class="btn btn-primary">🔍 查询</button></div><div class="table-wrapper"><table><thead><tr><th>日期</th><th>项目</th><th>客户</th><th>业绩</th><th>提成金额</th><th>状态</th></tr></thead><tbody><tr><td>2026-05-21</td><td>深层清洁面部护理</td><td>李小姐</td><td>¥298</td><td>¥59.6</td><td><span class="badge badge-active">已结算</span></td></tr><tr><td>2026-05-20</td><td>补水精华导入</td><td>王女士</td><td>¥218</td><td>¥43.6</td><td><span class="badge badge-active">已结算</span></td></tr><tr><td>2026-05-19</td><td>全身经络疏通</td><td>陈太太</td><td>¥398</td><td>¥79.6</td><td><span class="badge badge-active">已结算</span></td></tr></tbody></table></div><div style="background:#f8f9fa;padding:15px;border-radius:8px;margin-top:20px;display:flex;justify-content:space-between"><div><span style="color:#666">本月累计业绩:</span> <strong style="color:#f5576c">¥8,560</strong></div><div><span style="color:#666">本月累计提成:</span> <strong style="color:#43e97b">¥1,712</strong></div></div>`,performanceSummary:()=>`<div class="search-bar"><select><option>全部门店</option><option>旗舰店</option></select><input type="date" value="2026-05-01"> - <input type="date" value="2026-05-21"><button class="btn btn-primary">🔍 查询</button><button class="btn btn-secondary">📥 导出报表</button></div><div class="table-wrapper"><table><thead><tr><th>排名</th><th>员工</th><th>角色</th><th>服务次数</th><th>业绩金额</th><th>提成金额</th><th>完成率</th></tr></thead><tbody><tr><td>🥇 1</td><td>小明</td><td>美容师</td><td>86</td><td>¥25,680</td><td>¥5,136</td><td><span style="color:#43e97b">128%</span></td></tr><tr><td>🥈 2</td><td>小红</td><td>高级美容师</td><td>72</td><td>¥21,600</td><td>¥4,320</td><td><span style="color:#43e97b">108%</span></td></tr><tr><td>🥉 3</td><td>小华</td><td>顾问</td><td>45</td><td>¥18,900</td><td>¥945</td><td><span style="color:#ffa726">95%</span></td></tr></tbody></table></div>`,commissionSettle:()=>`<div class="search-bar"><select><option>2026年5月</option><option>2026年4月</option></select><select><option>全部状态</option><option>待结算</option><option>已结算</option></select><button class="btn btn-primary">🔍 查询</button></div><div class="table-wrapper"><table><thead><tr><th>员工</th><th>结算周期</th><th>服务次数</th><th>业绩金额</th><th>提成金额</th><th>调整金额</th><th>实发金额</th><th>状态</th><th>操作</th></tr></thead><tbody><tr><td>小明</td><td>2026.05.01-05.15</td><td>42</td><td>¥12,600</td><td>¥2,520</td><td>¥0</td><td>¥2,520</td><td><span class="badge badge-active">已结算</span></td><td><button class="view">查看</button></td></tr><tr><td>小红</td><td>2026.05.01-05.15</td><td>36</td><td>¥10,800</td><td>¥2,160</td><td>¥100</td><td>¥2,260</td><td><span class="badge badge-pending">待结算</span></td><td><button class="btn btn-sm btn-success">结算</button></td></tr></tbody></table></div>`,checkout:()=>`<div class="cashier-layout"><div class="cashier-left"><h4 style="margin-bottom:15px">🛒 已选项目</h4><div class="project-item"><div class="project-info"><h4>深层清洁面部护理</h4><span>美容师: 小明 | 60分钟</span></div><div class="project-price">¥298</div></div><div class="project-item"><div class="project-info"><h4>补水精华导入</h4><span>美容师: 小红 | 45分钟</span></div><div class="project-price">¥218</div></div><div style="margin-top:20px"><button class="btn btn-secondary" style="width:100%">➕ 添加项目</button></div></div><div class="cashier-right"><h4 style="margin-bottom:20px">💳 结算信息</h4><div class="cashier-item"><span>会员</span><span>李小姐 VIP</span></div><div class="cashier-item"><span>享受折扣</span><span style="color:#43e97b">7折</span></div><div class="cashier-item"><span>原总价</span><span style="text-decoration:line-through;color:rgba(255,255,255,0.5)">¥516</span></div><div class="cashier-item"><span>会员价</span><span>¥361</span></div><div class="cashier-total"><div class="label">应付金额</div><div class="amount">¥361</div></div><div style="margin-top:20px"><h4 style="margin-bottom:10px">💰 支付方式</h4><div class="pay-methods"><div class="pay-method"><div class="icon">💵</div><div>现金</div></div><div class="pay-method"><div class="icon">💚</div><div>微信</div></div><div class="pay-method"><div class="icon">💙</div><div>支付宝</div></div><div class="pay-method active"><div class="icon">💳</div><div>会员卡</div></div></div></div><div style="margin-top:20px"><button class="btn btn-primary" style="width:100%;padding:15px;font-size:16px">🎉 完成结账 ¥361</button></div></div></div>`,suspendOrder:()=>`<div class="search-bar"><select><option>全部门店</option><option>旗舰店</option></select><select><option>全部状态</option><option>已挂单</option><option>超时提醒</option></select><button class="btn btn-primary">🔍 查询</button></div><div class="table-wrapper"><table><thead><tr><th>挂单号</th><th>会员</th><th>项目</th><th>金额</th><th>挂单时间</th><th>状态</th><th>操作</th></tr></thead><tbody><tr><td>G2026052101</td><td>王女士</td><td>深层清洁+补水精华</td><td>¥218</td><td>2026-05-21 10:30</td><td><span class="badge badge-active">已挂单</span></td><td><button class="btn btn-sm btn-primary">继续结算</button><button class="btn btn-sm btn-danger">取消挂单</button></td></tr><tr><td>G2026052102</td><td>陈太太</td><td>全身经络疏通</td><td>¥398</td><td>2026-05-21 09:15</td><td><span class="badge badge-pending">超时提醒</span></td><td><button class="btn btn-sm btn-primary">继续结算</button><button class="btn btn-sm btn-danger">取消挂单</button></td></tr></tbody></table></div><p style="color:#999;font-size:12px;margin-top:10px">💡 挂单超时时间默认为2小时，超时后将发送提醒通知</p>`,cardPayment:()=>`<div class="form-row"><div class="form-group"><label>会员手机号</label><input type="text" placeholder="输入手机号" value="138****8888"></div><div class="form-group"><label>会员卡类型</label><select><option>储值卡</option><option>次卡</option><option>期限卡</option></select></div></div><div style="background:#f8f9fa;padding:20px;border-radius:12px;margin:20px 0"><h4 style="margin-bottom:15px">💳 会员卡信息</h4><p><strong>会员:</strong> 李小姐</p><p><strong>卡类型:</strong> VIP储值卡</p><p><strong>卡余额:</strong> <span style="color:#43e97b;font-size:20px;font-weight:700">¥8,860</span></p><p><strong>本次消费:</strong> ¥361 (7折后)</p><p style="margin-top:15px;font-size:16px"><strong>扣款后余额:</strong> <span style="color:#f5576c;font-weight:700">¥8,499</span></p></div><div style="text-align:center"><button class="btn btn-primary" style="padding:15px 40px;font-size:16px">💳 确认会员卡支付 ¥361</button></div>`,comboPayment:()=>`<div class="form-row"><div class="form-group"><label>会员手机号</label><input type="text" value="138****8888"></div></div><div style="background:#fff5f5;padding:20px;border-radius:12px;margin:20px 0"><h4 style="margin-bottom:15px">💰 组合支付</h4><p><strong>应付金额:</strong> <span style="font-size:24px;font-weight:700;color:#f5576c">¥516</span></p><div style="margin-top:20px"><div style="display:flex;align-items:center;gap:15px;margin-bottom:15px"><span style="width:100px">会员卡支付</span><input type="number" value="361" style="flex:1;padding:10px;border:1px solid #ddd;border-radius:8px"><span style="color:#43e97b">余额 ¥8,860</span></div><div style="display:flex;align-items:center;gap:15px;margin-bottom:15px"><span style="width:100px">微信支付</span><input type="number" value="155" style="flex:1;padding:10px;border:1px solid #ddd;border-radius:8px"></div><div style="display:flex;align-items:center;gap:15px"><span style="width:100px;color:#666">还需支付</span><span style="font-size:20px;font-weight:700;color:#f5576c">¥0</span><span style="color:#43e97b;font-size:12px">✓ 已结清</span></div></div></div><div style="text-align:center"><button class="btn btn-primary" style="padding:15px 40px;font-size:16px">🎉 确认收款</button></div>`,refundManage:()=>`<div class="search-bar"><input type="text" placeholder="订单号/会员手机号..."><input type="date"> - <input type="date"><button class="btn btn-primary">🔍 查询</button></div><div class="table-wrapper"><table><thead><tr><th>订单号</th><th>会员</th><th>原金额</th><th>退款金额</th><th>退款方式</th><th>退款原因</th><th>操作人</th><th>时间</th><th>操作</th></tr></thead><tbody><tr><td>O2026052001</td><td>王女士</td><td>¥298</td><td>¥298</td><td>原路退回</td><td>服务不满意</td><td>前台小王</td><td>2026-05-20 15:30</td><td><button class="view">详情</button></td></tr><tr><td>O2026051902</td><td>张帅哥</td><td>¥168</td><td>¥100</td><td>部分退款</td><td>项目未完成</td><td>前台小红</td><td>2026-05-19 11:20</td><td><button class="view">详情</button></td></tr></tbody></table></div>`,billQuery:()=>`<div class="search-bar"><input type="text" placeholder="订单号/会员手机号..."><input type="date" value="2026-05-01"> - <input type="date" value="2026-05-21"><select><option>全部门店</option><option>旗舰店</option></select><button class="btn btn-primary">🔍 查询</button><button class="btn btn-secondary">📥 导出</button></div><div class="table-wrapper"><table><thead><tr><th>订单号</th><th>会员</th><th>项目</th><th>服务员工</th><th>金额</th><th>支付方式</th><th>时间</th><th>操作</th></tr></thead><tbody><tr><td>O2026052101</td><td>李小姐</td><td>深层清洁+补水精华</td><td>小明、小红</td><td>¥361</td><td>会员卡</td><td>2026-05-21 11:00</td><td><button class="view">详情</button><button class="btn btn-sm btn-secondary">🖨️ 打印</button></td></tr><tr><td>O2026052102</td><td>散客</td><td>日式美睫</td><td>小红</td><td>¥128</td><td>微信</td><td>2026-05-21 10:30</td><td><button class="view">详情</button><button class="btn btn-sm btn-secondary">🖨️ 打印</button></td></tr><tr><td>O2026052103</td><td>王女士</td><td>全身经络疏通</td><td>小明</td><td>¥398</td><td>会员卡+微信</td><td>2026-05-21 09:45</td><td><button class="view">详情</button><button class="btn btn-sm btn-secondary">🖨️ 打印</button></td></tr></tbody></table></div>`,storedValueConsume:()=>`<div class="form-row"><div class="form-group"><label>会员手机号</label><input type="text" value="138****8888"></div></div><div style="background:#f8f9fa;padding:20px;border-radius:12px;margin:20px 0"><h4 style="margin-bottom:15px">💳 储值卡消费</h4><p><strong>会员:</strong> 李小姐 | VIP会员</p><p><strong>储值余额:</strong> <span style="color:#43e97b;font-size:20px">¥8,860</span></p><p><strong>享受折扣:</strong> 7折</p></div><div style="background:#fff;border-radius:8px;padding:20px;margin:20px 0"><h4 style="margin-bottom:15px">🛒 已选项目 (7折优惠)</h4><div class="project-item"><div class="project-info"><h4>深层清洁面部护理</h4><span>原价 ¥398</span></div><div class="project-price">¥278</div></div><div class="project-item"><div class="project-info"><h4>补水精华导入</h4><span>原价 ¥298</span></div><div class="project-price">¥208</div></div><div style="display:flex;justify-content:space-between;padding:15px 0;border-top:2px solid #f5576c;margin-top:15px"><span style="font-size:18px;font-weight:600">合计</span><span style="font-size:24px;font-weight:700;color:#f5576c">¥486</span></div></div><div style="text-align:center"><button class="btn btn-primary" style="padding:15px 40px;font-size:16px">💳 确认从储值卡扣款 ¥486</button></div>`,timesCardConsume:()=>`<div class="form-row"><div class="form-group"><label>会员手机号</label><input type="text" value="139****6666"></div></div><div style="background:#f8f9fa;padding:20px;border-radius:12px;margin:20px 0"><h4 style="margin-bottom:15px">🎫 次卡信息</h4><p><strong>会员:</strong> 王女士</p><p><strong>次卡名称:</strong> 面部护理10次卡</p><p><strong>剩余次数:</strong> <span style="color:#43e97b;font-size:24px;font-weight:700">6次</span></p><p><strong>有效期:</strong> 2026.08.15 到期</p></div><div class="form-row"><div class="form-group"><label>选择项目</label><select><option>深层清洁面部护理</option><option>补水精华导入</option></select></div></div><div style="background:#fff;border-radius:8px;padding:20px;text-align:center"><p style="font-size:16px">本次扣减次数: <span style="color:#f5576c;font-size:24px;font-weight:700">1次</span></p><p style="color:#999;font-size:14px;margin-top:10px">扣次后剩余: <strong>5次</strong></p></div><div style="text-align:center;margin-top:20px"><button class="btn btn-primary" style="padding:15px 40px;font-size:16px">✅ 确认扣次</button></div>`,periodCardConsume:()=>`<div class="form-row"><div class="form-group"><label>会员手机号</label><input type="text" value="137****5555"></div></div><div style="background:#f8f9fa;padding:20px;border-radius:12px;margin:20px 0"><h4 style="margin-bottom:15px">📅 期限卡信息</h4><p><strong>会员:</strong> 刘小姐</p><p><strong>期限卡名称:</strong> 季度畅享卡</p><p><strong>卡类型:</strong> 限次卡 (每月限8次)</p><p><strong>本月剩余:</strong> <span style="color:#43e97b;font-size:20px;font-weight:700">5次</span></p><p><strong>有效期:</strong> 2026.03.01 - 2026.08.31</p><p style="margin-top:10px"><span style="background:#43e97b;color:#fff;padding:3px 10px;border-radius:10px;font-size:12px">✅ 有效期内</span></p></div><div style="text-align:center"><button class="btn btn-primary" style="padding:15px 40px;font-size:16px">✅ 确认使用本月次数</button></div>`,consumeRecord:()=>`<div class="search-bar"><input type="text" placeholder="会员手机号..." value="138****8888"><input type="date" value="2026-04-01"> - <input type="date" value="2026-05-21"><button class="btn btn-primary">🔍 查询</button></div><div class="table-wrapper"><table><thead><tr><th>消费时间</th><th>项目</th><th>门店</th><th>金额/次数</th><th>服务员工</th><th>支付方式</th><th>余额/剩余</th></tr></thead><tbody><tr><td>2026-05-21 11:00</td><td>深层清洁+补水精华</td><td>旗舰店</td><td>¥361</td><td>小明、小红</td><td>会员卡</td><td>¥8,499</td></tr><tr><td>2026-05-18 14:30</td><td>全身经络疏通</td><td>旗舰店</td><td>¥398</td><td>小明</td><td>会员卡</td><td>¥8,860</td></tr><tr><td>2026-05-10 10:00</td><td>补水精华导入</td><td>旗舰店</td><td>¥218</td><td>小红</td><td>会员卡</td><td>¥9,258</td></tr></tbody></table></div>`,consumeNotice:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary">⚙️ 通知设置</button></div><div class="card-grid"><div class="info-card" style="border-left:4px solid #43e97b"><h4>📱 消费通知</h4><p><strong>发送时机:</strong> 消费完成后自动发送</p><p><strong>通知方式:</strong> 微信模板消息</p><p><strong>通知内容:</strong> 项目、金额、余额</p><p style="margin-top:10px"><span class="badge badge-active">已开启</span></p></div><div class="info-card" style="border-left:4px solid #4facfe"><h4>📝 通知模板预览</h4><div style="background:#f8f9fa;padding:10px;border-radius:8px;font-size:12px"><p>【美业管理系统】</p><p>李小姐您好！</p><p>您已完成消费：</p><p>深层清洁面部护理 ¥278</p><p>补水精华导入 ¥208</p><p>合计：¥361</p><p>储值卡余额：¥8,499</p></div></div></div>`,walkinOrder:()=>`<div class="form-row"><div class="form-group"><label>手机号（选填）</label><input type="text" placeholder="输入手机号便于后续查询"></div></div><div class="project-item"><div class="project-info"><h4>深层清洁面部护理</h4><span>散客价 | 60分钟</span></div><div class="project-price">¥398</div><button class="btn btn-sm btn-secondary" style="margin-left:10px">添加</button></div><div class="project-item"><div class="project-info"><h4>补水精华导入</h4><span>散客价 | 45分钟</span></div><div class="project-price">¥298</div><button class="btn btn-sm btn-secondary" style="margin-left:10px">添加</button></div><div class="project-item"><div class="project-info"><h4>日式美睫</h4><span>散客价 | 45分钟</span></div><div class="project-price">¥168</div><button class="btn btn-sm btn-secondary" style="margin-left:10px">添加</button></div>`,walkinCheckout:()=>`<div style="background:#f8f9fa;padding:20px;border-radius:12px;margin:20px 0"><h4 style="margin-bottom:15px">🛒 已选项目</h4><div class="project-item"><div class="project-info"><h4>日式美睫</h4><span>散客价</span></div><div class="project-price">¥168</div></div><div style="display:flex;justify-content:space-between;padding:15px 0;border-top:2px solid #f5576c;margin-top:15px"><span style="font-size:18px;font-weight:600">合计</span><span style="font-size:24px;font-weight:700;color:#f5576c">¥168</span></div></div><div style="margin:20px 0"><h4 style="margin-bottom:15px">💰 支付方式</h4><div class="pay-methods"><div class="pay-method"><div class="icon">💵</div><div>现金</div></div><div class="pay-method active"><div class="icon">💚</div><div>微信</div></div><div class="pay-method"><div class="icon">💙</div><div>支付宝</div></div><div class="pay-method"><div class="icon">🏦</div><div>银行卡</div></div></div></div><div style="text-align:center"><button class="btn btn-primary" style="padding:15px 40px;font-size:16px">🎉 确认收款 ¥168</button></div><p style="text-align:center;color:#999;font-size:12px;margin-top:15px">💡 散客不支持会员折扣和会员卡支付</p>`,walkinToMember:()=>`<div style="background:#fff5f5;padding:20px;border-radius:12px;margin:20px 0;text-align:center"><div style="font-size:48px;margin-bottom:15px">🎁</div><h4 style="color:#f5576c;margin-bottom:10px">散客转会员</h4><p style="color:#666;margin-bottom:15px">消费完成后，可一键将散客转为会员</p><p style="font-size:14px">📱 手机号: 138****1234</p><p style="font-size:14px">💰 本次消费: ¥168</p></div><div style="background:#fff;border-radius:12px;padding:20px"><h4 style="margin-bottom:15px">📝 会员注册信息</h4><div class="form-row"><div class="form-group"><label>姓名</label><input type="text" placeholder="输入姓名"></div><div class="form-group"><label>性别</label><select><option>女</option><option>男</option></select></div></div><div class="form-group"><label>生日</label><input type="date"></div></div><div style="text-align:center;margin-top:20px"><button class="btn btn-primary" style="padding:15px 40px;font-size:16px">✅ 确认注册并收款</button></div>`,walkinRecord:()=>`<div class="search-bar"><input type="text" placeholder="输入手机号..."><button class="btn btn-primary">🔍 查询</button></div><div style="background:#f8f9fa;padding:20px;border-radius:12px;margin:20px 0"><h4 style="margin-bottom:15px">📊 散客统计</h4><p><strong>手机号:</strong> 138****1234</p><p><strong>历史消费:</strong> 3次</p><p><strong>累计金额:</strong> ¥456</p><p><strong>最近消费:</strong> 2026-05-21</p></div><div class="table-wrapper"><table><thead><tr><th>消费时间</th><th>项目</th><th>金额</th><th>支付方式</th><th>门店</th></tr></thead><tbody><tr><td>2026-05-21</td><td>日式美睫</td><td>¥168</td><td>微信</td><td>旗舰店</td></tr><tr><td>2026-05-10</td><td>补水精华导入</td><td>¥298</td><td>微信</td><td>旗舰店</td></tr><tr><td>2026-04-25</td><td>日式美睫</td><td>¥168</td><td>现金</td><td>旗舰店</td></tr></tbody></table></div>`,dashboard:()=>`<div class="search-bar" style="background:#fff"><select><option>全部门店</option><option>旗舰店</option></select><span style="color:#666">数据更新: 2026-05-21 11:30</span></div><div class="dashboard-grid"><div class="dashboard-card"><div class="icon" style="background:#fff0f0;color:#f5576c">💰</div><div class="value">¥18,560</div><div class="label">今日营业额</div><div class="trend up">📈 较昨日 +15%</div></div><div class="dashboard-card"><div class="icon" style="background:#e3f2fd;color:#1976d2">👥</div><div class="value">32</div><div class="label">今日到店</div><div class="trend up">📈 较昨日 +8%</div></div><div class="dashboard-card"><div class="icon" style="background:#e8f5e9;color:#2e7d32">⭐</div><div class="value">5</div><div class="label">新增会员</div><div class="trend down">📉 较昨日 -2%</div></div><div class="dashboard-card"><div class="icon" style="background:#fff3e0;color:#ef6c00">💳</div><div class="value">¥8,600</div><div class="label">今日充值</div><div class="trend up">📈 较昨日 +22%</div></div></div><div class="chart-area"><div class="chart-card"><h4>📊 本周营业额趋势</h4><div class="chart-placeholder">📈 折线图展示区域</div></div><div class="chart-card"><h4>🔥 项目热度排行</h4><div class="chart-placeholder">📊 柱状图展示区域</div></div></div>`,businessReport:()=>`<div class="search-bar"><select><option>本月</option><option>上周</option><option>本年</option></select><select><option>全部门店</option><option>旗舰店</option></select><button class="btn btn-primary">🔍 查询</button><button class="btn btn-secondary">📥 导出报表</button></div><div class="stats-grid"><div class="stat-card"><h4>本月营业额</h4><div class="value">¥286,560</div><div class="sub">较上月 +12%</div></div><div class="stat-card success"><h4>月到店量</h4><div class="value">856</div><div class="sub">日均 29人</div></div><div class="stat-card warning"><h4>客单价</h4><div class="value">¥335</div><div class="sub">较上月 +5%</div></div><div class="stat-card danger"><h4>会员消费占比</h4><div class="value">78%</div><div class="sub">散客 22%</div></div></div><div class="chart-area"><div class="chart-card"><h4>📅 日报表趋势</h4><div class="chart-placeholder">📈 趋势图</div></div><div class="chart-card"><h4>🥧 消费类型占比</h4><div class="chart-placeholder">🥧 饼图</div></div></div>`,memberAnalysis:()=>`<div class="chart-area"><div class="chart-card"><h4>📈 会员增长趋势</h4><div class="chart-placeholder">📈 趋势图</div></div><div class="chart-card"><h4>👥 会员等级分布</h4><div class="chart-placeholder">🥧 饼图</div></div></div><div style="margin-top:20px"><h4 style="margin-bottom:15px">⚠️ 沉睡会员预警 (30天未到店)</h4><div class="table-wrapper"><table><thead><tr><th>会员</th><th>等级</th><th>最近到店</th><th>剩余余额</th><th>操作</th></tr></thead><tbody><tr><td>张帅哥</td><td>普通</td><td>2026-04-15</td><td>¥500</td><td><button class="btn btn-sm btn-primary">发送提醒</button></td></tr><tr><td>赵小姐</td><td>金卡</td><td>2026-04-10</td><td>¥2,000</td><td><button class="btn btn-sm btn-primary">发送提醒</button></td></tr></tbody></table></div></div>`,staffReport:()=>`<div class="search-bar"><select><option>本月</option><option>上周</option></select><select><option>全部门店</option></select><select><option>全部角色</option><option>美容师</option><option>顾问</option></select><button class="btn btn-primary">🔍 查询</button></div><div class="table-wrapper"><table><thead><tr><th>员工</th><th>角色</th><th>服务次数</th><th>服务时长</th><th>业绩</th><th>提成</th><th>出勤天数</th></tr></thead><tbody><tr><td>小明</td><td>美容师</td><td>86</td><td>86小时</td><td>¥25,680</td><td>¥5,136</td><td>18天</td></tr><tr><td>小红</td><td>高级美容师</td><td>72</td><td>72小时</td><td>¥21,600</td><td>¥4,320</td><td>17天</td></tr><tr><td>小华</td><td>顾问</td><td>45</td><td>36小时</td><td>¥18,900</td><td>¥945</td><td>16天</td></tr></tbody></table></div>`,storeSettings:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('门店设置')">⚙️ 编辑门店信息</button></div><div class="card-grid"><div class="info-card" style="border-left:4px solid #43e97b"><h4>🏪 旗舰店 <span class="badge badge-active" style="margin-left:10px">营业中</span></h4><p><strong>地址:</strong> 北京市朝阳区XX路123号</p><p><strong>电话:</strong> 010-88888888</p><p><strong>营业时间:</strong> 09:00-22:00</p></div><div class="info-card" style="border-left:4px solid #43e97b"><h4>🏪 二店 <span class="badge badge-active" style="margin-left:10px">营业中</span></h4><p><strong>地址:</strong> 北京市海淀区XX街456号</p><p><strong>电话:</strong> 010-66666666</p><p><strong>营业时间:</strong> 10:00-21:00</p></div></div>`,permission:()=>`<div class="demo-actions" style="margin-bottom:20px"><button class="btn btn-primary" onclick="openModal('新增角色')">➕ 新增角色</button></div><div class="card-grid"><div class="info-card" style="border-left:4px solid #f5576c"><h4>👑 店长</h4><p>全功能权限，可管理员工、查看报表、设置价格</p><p style="margin-top:10px"><strong>权限:</strong> 全部</p><div style="margin-top:10px;display:flex;gap:8px"><button class="btn btn-sm btn-secondary">编辑</button><button class="btn btn-sm btn-danger">删除</button></div></div><div class="info-card" style="border-left:4px solid #4facfe"><h4>💼 顾问</h4><p>负责客户接待、咨询服务、推荐产品</p><p style="margin-top:10px"><strong>权限:</strong> 客户管理、结账收银</p><div style="margin-top:10px;display:flex;gap:8px"><button class="btn btn-sm btn-secondary">编辑</button></div></div><div class="info-card" style="border-left:4px solid #43e97b"><h4>💆 技师</h4><p>负责提供服务、录入跟进记录</p><p style="margin-top:10px"><strong>权限:</strong> 项目管理、会员跟进</p><div style="margin-top:10px;display:flex;gap:8px"><button class="btn btn-sm btn-secondary">编辑</button></div></div><div class="info-card" style="border-left:4px solid #ffa726"><h4>🖥️ 前台</h4><p>负责收银、接待、基础查询</p><p style="margin-top:10px"><strong>权限:</strong> 结账收银、散客消费</p><div style="margin-top:10px;display:flex;gap:8px"><button class="btn btn-sm btn-secondary">编辑</button></div></div></div>`,operationLog:()=>`<div class="search-bar"><select><option>全部操作</option><option>充值</option><option>退款</option><option>价格修改</option><option>权限变更</option></select><input type="date" value="2026-05-21"> - <input type="date" value="2026-05-21"><button class="btn btn-primary">🔍 查询</button></div><div class="log-list"><div class="log-item"><div class="log-time">11:30:25</div><div class="log-content"><span class="log-action">会员充值</span> 李小姐 充值 ¥1,000 <span class="log-user">by 前台小王</span></div></div><div class="log-item"><div class="log-time">10:45:12</div><div class="log-content"><span class="log-action">价格调整</span> 深层清洁面部护理 ¥398→¥358 <span class="log-user">by 管理员</span></div></div><div class="log-item"><div class="log-time">09:30:00</div><div class="log-content"><span class="log-action">权限变更</span> 小明 权限调整 <span class="log-user">by 店长</span></div></div><div class="log-item"><div class="log-time">09:15:33</div><div class="log-content"><span class="log-action">退款处理</span> 王女士 退款 ¥298 <span class="log-user">by 前台小红</span></div></div></div>`}; function renderMenu(){const menuList=document.getElementById('menuList');menuList.innerHTML=modules.map(m=>`<div class="menu-item ${activeModule===m.id?'active':''}"><div class="menu-item-btn" onclick="toggleModule(${m.id})"><span class="icon">${m.icon}</span><span class="text">${m.name}</span><span class="arrow">▼</span></div><div class="submenu ${activeModule===m.id?'open':''}">${m.features.map(f=>`<div class="submenu-item ${activeFeature===f.id?'active':''}" onclick="showFeature(${f.id},event)" data-feature-id="${f.id}"><span class="sub-num">${f.id}.</span>${f.name}</div>`).join('')}</div></div>`).join('')} function toggleModule(id){if(activeModule===id){activeModule=null;activeFeature=null}else{activeModule=id;activeFeature=null}renderMenu();if(activeModule)showModule(id);else showWelcome()} function showModule(id){const module=modules.find(m=>m.id===id);document.getElementById('headerTitle').textContent=module.name;document.getElementById('headerDesc').textContent=`${module.features.length}个子功能`;const contentArea=document.getElementById('contentArea');contentArea.innerHTML=`<div class="demo-card"><div class="demo-header"><div class="demo-title"><div class="demo-icon">${module.icon}</div><div><h3>${module.name}</h3><span class="tag">${module.features.length}个子功能</span></div></div></div><div class="card-grid">${module.features.map(f=>`<div class="info-card" onclick="showFeature(${f.id},event)" style="cursor:pointer"><h4><span style="background:#f5576c;color:#fff;padding:2px 8px;border-radius:8px;font-size:12px;margin-right:8px">${f.id}</span>${f.name}</h4><p>${f.desc.substring(0,60)}...</p></div>`).join('')}</div></div>`} function showFeature(id,event){if(event)event.stopPropagation();const feature=findFeature(id);if(!feature)return;const module=modules.find(m=>m.features.some(f=>f.id===id));activeModule=module.id;activeFeature=id;renderMenu();document.getElementById('headerTitle').textContent=feature.name;document.getElementById('headerDesc').textContent=feature.desc.substring(0,50)+'...';const contentArea=document.getElementById('contentArea');const demoFn=demoData[feature.demo];contentArea.innerHTML=`<div class="demo-card"><div class="demo-header"><div class="demo-title"><div class="demo-icon">${module.icon}</div><div><h3>${feature.name}</h3><span class="tag">${module.name}</span></div></div></div>${demoFn?demoFn():'<p style="padding:40px;text-align:center;color:#999">该功能模块演示正在开发中...</p>'}</div>`} function findFeature(id){for(const m of modules){const f=m.features.find(f=>f.id===id);if(f)return f}return null} function showWelcome(){activeModule=null;activeFeature=null;renderMenu();document.getElementById('headerTitle').textContent='功能模块总览';document.getElementById('headerDesc').textContent='点击左侧菜单查看各功能详情';const contentArea=document.getElementById('contentArea');contentArea.innerHTML=`<div class="demo-card"><div class="welcome"><div class="welcome-icon">🏥</div><h3>欢迎使用美业管理系统</h3><p>从左侧菜单选择一个功能模块，查看详细功能说明</p><div class="stats"><div class="stat-item"><div class="stat-num">9</div><div class="stat-label">功能模块</div></div><div class="stat-item"><div class="stat-num">49</div><div class="stat-label">功能点</div></div><div class="stat-item"><div class="stat-num">49</div><div class="stat-label">功能描述</div></div><div class="stat-item"><div class="stat-num">100%</div><div class="stat-label">覆盖度</div></div></div></div></div>`} function openModal(title){const formContent=`<div class="form-group"><label>名称</label><input type="text" placeholder="请输入..."></div><div class="form-group"><label>描述</label><textarea placeholder="请输入...">
`;document.getElementById('modalContent').innerHTML=`
${title}
×
${formContent}`;document.getElementById('commonModal').classList.add('show')} function closeModal(){document.getElementById('commonModal').classList.remove('show')} renderMenu();