TakeoutSaaS.Prototypes/pages/reviews.html

<!-- 评价管理 — reviews.html -->
<style>
  /* ---- page-private: rv- prefix ---- */
  .rv-toolbar {
    background: #fff; border-radius: var(--g-radius); padding: 16px 20px;
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-border);
  }
  .rv-toolbar .g-select,
  .rv-toolbar .g-input { height: 32px; font-size: 13px; }
  .rv-search-wrap {
    position: relative; width: 200px;
  }
  .rv-search-wrap .g-input { padding-left: 30px; width: 100%; }
  .rv-search-wrap i {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    color: var(--g-text-muted); pointer-events: none;
  }
  .rv-toolbar-right { margin-left: auto; }
  .rv-date-sep { color: var(--g-text-muted); font-size: 13px; line-height: 32px; }

  /* stats row */
  .rv-stats { display: flex; gap: 16px; margin-top: 12px; }
  .rv-stat-card {
    flex: 1; background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
    padding: 18px 20px; box-shadow: var(--g-shadow-sm);
    transition: box-shadow var(--g-transition);
  }
  .rv-stat-card:hover { box-shadow: var(--g-shadow-md); }
  .rv-stat-value { font-size: 28px; font-weight: 700; color: var(--g-text); line-height: 1.2; }
  .rv-stat-value.green { color: var(--g-success); }
  .rv-stat-value.orange { color: var(--g-warning); }
  .rv-stat-value.primary { color: var(--primary); }
  .rv-stat-label { font-size: 12px; color: var(--g-text-muted); margin-top: 6px; }
  .rv-stat-title { font-size: 13px; color: var(--g-text-secondary); margin-bottom: 8px; font-weight: 500; }
  .rv-stars-inline { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 6px; }
  .rv-stars-inline i { width: 16px; height: 16px; }

  /* distribution card */
  .rv-dist {
    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
    padding: 20px 24px; margin-top: 12px; box-shadow: var(--g-shadow-sm);
  }
  .rv-dist-title {
    font-size: 15px; font-weight: 600; color: var(--g-text);
    padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 16px;
  }
  .rv-dist-row {
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 13px;
  }
  .rv-dist-row:last-child { margin-bottom: 0; }
  .rv-dist-label { width: 32px; color: var(--g-text-secondary); flex-shrink: 0; text-align: right; }
  .rv-dist-bar {
    flex: 1; height: 18px; background: #f5f5f5; border-radius: 9px; overflow: hidden;
  }
  .rv-dist-fill {
    height: 100%; border-radius: 9px; transition: width var(--g-transition);
  }
  .rv-dist-fill.green { background: var(--g-success); }
  .rv-dist-fill.yellow { background: var(--g-warning); }
  .rv-dist-fill.red { background: var(--g-danger); }
  .rv-dist-count { width: 36px; color: var(--g-text); font-weight: 500; text-align: right; flex-shrink: 0; }
  .rv-dist-pct { width: 48px; color: var(--g-text-muted); text-align: right; flex-shrink: 0; }

  /* review list */
  .rv-list {
    margin-top: 12px;
    background: #fff; border-radius: var(--g-radius); border: 1px solid var(--g-border);
    box-shadow: var(--g-shadow-sm); overflow: hidden;
  }
  .rv-list-hd {
    font-size: 15px; font-weight: 600; color: var(--g-text);
    padding: 18px 24px 0; margin-bottom: 4px;
    display: flex; align-items: center;
    padding-left: 34px;
  }
  .rv-list-hd::before {
    content: ''; display: inline-block; width: 3px; height: 16px;
    background: var(--primary); border-radius: 2px; margin-right: 10px; margin-left: -10px;
  }
  .rv-card {
    padding: 18px 24px; border-bottom: 1px solid #f5f5f5;
    transition: background var(--g-transition);
  }
  .rv-card:last-child { border-bottom: none; }
  .rv-card:hover { background: color-mix(in srgb, var(--primary) 2%, #fff); }
  .rv-card-hd {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
  }
  .rv-stars { display: inline-flex; gap: 2px; }
  .rv-star { width: 14px; height: 14px; }
  .rv-star.filled { color: #faad14; }
  .rv-star.empty { color: #e5e7eb; }
  .rv-star.half { color: #faad14; }
  .rv-customer { font-size: 13px; font-weight: 500; color: var(--g-text); }
  .rv-time { font-size: 12px; color: var(--g-text-muted); }
  .rv-order-link {
    font-size: 12px; color: var(--primary); cursor: pointer; font-family: monospace;
    text-decoration: none;
  }
  .rv-order-link:hover { text-decoration: underline; }
  .rv-content { font-size: 13px; color: var(--g-text); line-height: 1.6; margin-bottom: 10px; }
  .rv-images { display: flex; gap: 8px; margin-bottom: 10px; }
  .rv-img-placeholder {
    width: 60px; height: 60px; background: #f5f5f5; border-radius: var(--g-radius-sm);
    border: 1px solid var(--g-border); display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--g-text-muted);
  }
  .rv-products { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
  .rv-product-tag {
    display: inline-block; padding: 2px 10px; border-radius: 12px;
    background: #f5f5f5; font-size: 12px; color: var(--g-text-secondary); border: 1px solid var(--g-border);
  }
  .rv-reply-box {
    background: var(--g-bg-subtle); border-radius: var(--g-radius-sm);
    padding: 10px 14px; font-size: 13px; color: var(--g-text-secondary);
    border: 1px solid var(--g-border); margin-top: 4px;
  }
  .rv-reply-prefix { font-weight: 600; color: var(--g-text); margin-right: 4px; }
  .rv-reply-time { font-size: 11px; color: var(--g-text-muted); margin-top: 4px; }

  /* drawer */
  .rv-drawer { width: 480px; }
  .rv-section { margin-bottom: 20px; }
  .rv-section-hd {
    font-size: 14px; font-weight: 600; color: var(--g-text);
    padding-left: 10px; border-left: 3px solid var(--primary); margin-bottom: 14px;
  }
  .rv-info-row {
    display: flex; gap: 10px; font-size: 13px; margin-bottom: 8px; align-items: center;
  }
  .rv-info-label { color: var(--g-text-muted); width: 70px; flex-shrink: 0; }
  .rv-info-val { color: var(--g-text); }
  .rv-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .rv-quick-reply {
    display: inline-block; padding: 5px 12px; border-radius: 14px;
    border: 1px solid #d9d9d9; font-size: 12px; cursor: pointer;
    background: #fff; color: var(--g-text-secondary);
    transition: all var(--g-transition); user-select: none;
  }
  .rv-quick-reply:hover {
    border-color: var(--primary); color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, #fff);
  }
</style>

<!-- 顶部筛选栏 -->
<div class="rv-toolbar">
  <select class="g-select" style="width:200px;">
    <option>全部门店</option>
    <option>老三家外卖（朝阳店）</option>
    <option>老三家外卖（海淀店）</option>
    <option>老三家外卖（望京店）</option>
    <option>老三家外卖（通州店）</option>
    <option>老三家外卖（丰台店）</option>
  </select>
  <select class="g-select" style="width:120px;" onchange="filterRvStars()">
    <option>全部评分</option>
    <option>5星</option>
    <option>4星</option>
    <option>3星</option>
    <option>2星</option>
    <option>1星</option>
  </select>
  <select class="g-select" style="width:120px;">
    <option>全部状态</option>
    <option>待回复</option>
    <option>已回复</option>
  </select>
  <input type="date" class="g-input" style="width:145px;" value="2025-01-01">
  <span class="rv-date-sep">~</span>
  <input type="date" class="g-input" style="width:145px;" value="2025-02-12">
  <div class="rv-search-wrap">
    <i data-lucide="search" style="width:14px;height:14px;"></i>
    <input class="g-input" placeholder="搜索评价内容/订单号">
  </div>
  <div class="rv-toolbar-right">
    <button class="g-btn">
      <i data-lucide="download" style="width:14px;height:14px;"></i> 导出
    </button>
  </div>
</div>

<!-- 统计卡片 -->
<div class="rv-stats">
  <div class="rv-stat-card">
    <div class="rv-stat-title">综合评分</div>
    <div class="rv-stat-value">
      4.8
      <span class="rv-stars-inline">
        <i data-lucide="star" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star-half" style="fill:#faad14;color:#faad14;"></i>
      </span>
    </div>
    <div class="rv-stat-label">共 856 条评价</div>
  </div>
  <div class="rv-stat-card">
    <div class="rv-stat-title">好评率</div>
    <div class="rv-stat-value green">96.2%</div>
    <div class="rv-stat-label">5星+4星占比</div>
  </div>
  <div class="rv-stat-card">
    <div class="rv-stat-title">待回复</div>
    <div class="rv-stat-value orange">12</div>
    <div class="rv-stat-label">建议24小时内回复</div>
  </div>
  <div class="rv-stat-card">
    <div class="rv-stat-title">本月评价</div>
    <div class="rv-stat-value primary">128</div>
    <div class="rv-stat-label">较上月 ↑15%</div>
  </div>
</div>

<!-- 评分分布 -->
<div class="rv-dist">
  <div class="rv-dist-title">评分分布</div>
  <div class="rv-dist-row">
    <span class="rv-dist-label">5星</span>
    <div class="rv-dist-bar"><div class="rv-dist-fill green" style="width:79.4%;"></div></div>
    <span class="rv-dist-count">680</span>
    <span class="rv-dist-pct">79.4%</span>
  </div>
  <div class="rv-dist-row">
    <span class="rv-dist-label">4星</span>
    <div class="rv-dist-bar"><div class="rv-dist-fill green" style="width:16.8%;"></div></div>
    <span class="rv-dist-count">144</span>
    <span class="rv-dist-pct">16.8%</span>
  </div>
  <div class="rv-dist-row">
    <span class="rv-dist-label">3星</span>
    <div class="rv-dist-bar"><div class="rv-dist-fill yellow" style="width:2.1%;"></div></div>
    <span class="rv-dist-count">18</span>
    <span class="rv-dist-pct">2.1%</span>
  </div>
  <div class="rv-dist-row">
    <span class="rv-dist-label">2星</span>
    <div class="rv-dist-bar"><div class="rv-dist-fill red" style="width:0.9%;"></div></div>
    <span class="rv-dist-count">8</span>
    <span class="rv-dist-pct">0.9%</span>
  </div>
  <div class="rv-dist-row">
    <span class="rv-dist-label">1星</span>
    <div class="rv-dist-bar"><div class="rv-dist-fill red" style="width:0.7%;"></div></div>
    <span class="rv-dist-count">6</span>
    <span class="rv-dist-pct">0.7%</span>
  </div>
</div>

<!-- 评价列表 -->
<div class="rv-list">
  <div class="rv-list-hd">评价列表</div>

  <!-- 评价 1: 5星, 已回复 -->
  <div class="rv-card">
    <div class="rv-card-hd">
      <div class="rv-stars">
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
      </div>
      <span class="rv-customer">张**</span>
      <span class="rv-time">2025-02-12 12:30</span>
      <span class="g-tag g-tag-blue">外卖</span>
      <a class="rv-order-link">#20250212001</a>
    </div>
    <div class="rv-content">味道很好，配送也快，下次还会点！</div>
    <div class="rv-products">
      <span class="rv-product-tag">宫保鸡丁</span>
      <span class="rv-product-tag">米饭</span>
      <span class="rv-product-tag">可乐</span>
    </div>
    <div class="rv-reply-box">
      <span class="rv-reply-prefix">商家回复:</span>感谢您的好评，您的满意是我们最大的动力！期待下次为您服务~
      <div class="rv-reply-time">2025-02-12 14:00</div>
    </div>
  </div>

  <!-- 评价 2: 5星, 已回复 -->
  <div class="rv-card">
    <div class="rv-card-hd">
      <div class="rv-stars">
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
      </div>
      <span class="rv-customer">李**</span>
      <span class="rv-time">2025-02-12 11:45</span>
      <span class="g-tag g-tag-green">自提</span>
      <a class="rv-order-link">#20250212002</a>
    </div>
    <div class="rv-content">套餐很划算，分量足，味道也不错，性价比很高。</div>
    <div class="rv-products">
      <span class="rv-product-tag">双人超值套餐</span>
      <span class="rv-product-tag">酸梅汤</span>
    </div>
    <div class="rv-reply-box">
      <span class="rv-reply-prefix">商家回复:</span>感谢您的支持！我们会继续保持品质，欢迎再次光临！
      <div class="rv-reply-time">2025-02-12 13:20</div>
    </div>
  </div>

  <!-- 评价 3: 4星, 待回复 -->
  <div class="rv-card">
    <div class="rv-card-hd">
      <div class="rv-stars">
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;"></i>
      </div>
      <span class="rv-customer">王**</span>
      <span class="rv-time">2025-02-11 18:20</span>
      <span class="g-tag g-tag-orange">堂食</span>
      <a class="rv-order-link">#20250211008</a>
      <span class="g-tag g-tag-orange">待回复</span>
    </div>
    <div class="rv-content">菜品不错，就是等了比较久，高峰期可以理解，希望能优化一下出餐速度。</div>
    <div class="rv-products">
      <span class="rv-product-tag">红烧肉套餐</span>
      <span class="rv-product-tag">紫菜蛋花汤</span>
    </div>
    <div style="margin-top:8px;">
      <button class="g-btn g-btn-sm" onclick="openRvDrawer('rv3')">
        <i data-lucide="message-square" style="width:12px;height:12px;"></i> 回复
      </button>
    </div>
  </div>

  <!-- 评价 4: 3星, 待回复, 有图片 -->
  <div class="rv-card">
    <div class="rv-card-hd">
      <div class="rv-stars">
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;"></i>
        <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;"></i>
      </div>
      <span class="rv-customer">赵**</span>
      <span class="rv-time">2025-02-11 12:50</span>
      <span class="g-tag g-tag-blue">外卖</span>
      <a class="rv-order-link">#20250211005</a>
      <span class="g-tag g-tag-orange">待回复</span>
    </div>
    <div class="rv-content">包装有点漏了，汤洒了一些出来，味道还行但体验打了折扣。</div>
    <div class="rv-images">
      <div class="rv-img-placeholder"><i data-lucide="image" style="width:16px;height:16px;"></i></div>
      <div class="rv-img-placeholder"><i data-lucide="image" style="width:16px;height:16px;"></i></div>
      <div class="rv-img-placeholder"><i data-lucide="image" style="width:16px;height:16px;"></i></div>
    </div>
    <div class="rv-products">
      <span class="rv-product-tag">番茄牛腩面</span>
      <span class="rv-product-tag">卤蛋</span>
    </div>
    <div style="margin-top:8px;">
      <button class="g-btn g-btn-sm" onclick="openRvDrawer('rv4')">
        <i data-lucide="message-square" style="width:12px;height:12px;"></i> 回复
      </button>
    </div>
  </div>

  <!-- 评价 5: 2星, 待回复 -->
  <div class="rv-card">
    <div class="rv-card-hd">
      <div class="rv-stars">
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;"></i>
        <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;"></i>
        <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;"></i>
      </div>
      <span class="rv-customer">孙**</span>
      <span class="rv-time">2025-02-10 19:30</span>
      <span class="g-tag g-tag-blue">外卖</span>
      <a class="rv-order-link">#20250210012</a>
      <span class="g-tag g-tag-orange">待回复</span>
    </div>
    <div class="rv-content">配送太慢了，等了将近一个小时，饭都凉了，体验很差。</div>
    <div class="rv-products">
      <span class="rv-product-tag">鱼香肉丝盖饭</span>
      <span class="rv-product-tag">米饭</span>
    </div>
    <div style="margin-top:8px;">
      <button class="g-btn g-btn-sm" onclick="openRvDrawer('rv5')">
        <i data-lucide="message-square" style="width:12px;height:12px;"></i> 回复
      </button>
    </div>
  </div>

  <!-- 评价 6: 5星, 已回复 -->
  <div class="rv-card">
    <div class="rv-card-hd">
      <div class="rv-stars">
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
        <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;"></i>
      </div>
      <span class="rv-customer">周**</span>
      <span class="rv-time">2025-02-10 12:15</span>
      <span class="g-tag g-tag-green">自提</span>
      <a class="rv-order-link">#20250210003</a>
    </div>
    <div class="rv-content">每次来都很满意，老顾客了，菜品质量一直很稳定，值得推荐！</div>
    <div class="rv-products">
      <span class="rv-product-tag">招牌红烧肉</span>
      <span class="rv-product-tag">清炒时蔬</span>
      <span class="rv-product-tag">米饭</span>
    </div>
    <div class="rv-reply-box">
      <span class="rv-reply-prefix">商家回复:</span>感谢老顾客的一直支持！我们会继续努力，期待每次为您服务！
      <div class="rv-reply-time">2025-02-10 15:30</div>
    </div>
  </div>
</div>

<!-- 分页 -->
<div class="g-pagination">
  <span>共 856 条</span>
  <button class="g-page-btn" disabled>&lt;</button>
  <button class="g-page-btn active">1</button>
  <button class="g-page-btn">2</button>
  <button class="g-page-btn">3</button>
  <button class="g-page-btn">...</button>
  <button class="g-page-btn">86</button>
  <button class="g-page-btn">&gt;</button>
</div>

<!-- 回复抽屉 -->
<div class="g-drawer-mask" id="rvDrawerMask" onclick="closeRvDrawer()"></div>
<div class="g-drawer rv-drawer" id="rvDrawer">
  <div class="g-drawer-hd">
    <span class="g-drawer-title">回复评价</span>
    <button class="g-drawer-close" onclick="closeRvDrawer()">&times;</button>
  </div>
  <div class="g-drawer-bd">
    <!-- 评价信息 -->
    <div class="rv-section">
      <div class="rv-section-hd">评价信息</div>
      <div class="rv-info-row">
        <span class="rv-info-label">评分</span>
        <span class="rv-info-val">
          <span class="rv-stars">
            <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;width:14px;height:14px;"></i>
            <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;width:14px;height:14px;"></i>
            <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;width:14px;height:14px;"></i>
            <i data-lucide="star" class="rv-star filled" style="fill:#faad14;color:#faad14;width:14px;height:14px;"></i>
            <i data-lucide="star" class="rv-star empty" style="color:#e5e7eb;width:14px;height:14px;"></i>
          </span>
        </span>
      </div>
      <div class="rv-info-row">
        <span class="rv-info-label">顾客</span>
        <span class="rv-info-val">王**</span>
      </div>
      <div class="rv-info-row">
        <span class="rv-info-label">时间</span>
        <span class="rv-info-val">2025-02-11 18:20</span>
      </div>
      <div class="rv-info-row" style="align-items:flex-start;">
        <span class="rv-info-label">内容</span>
        <span class="rv-info-val">菜品不错，就是等了比较久，高峰期可以理解，希望能优化一下出餐速度。</span>
      </div>
    </div>

    <!-- 关联订单 -->
    <div class="rv-section">
      <div class="rv-section-hd">关联订单</div>
      <div class="rv-info-row">
        <span class="rv-info-label">订单号</span>
        <span class="rv-info-val"><a class="rv-order-link">#20250211008</a></span>
      </div>
      <div class="rv-info-row">
        <span class="rv-info-label">渠道</span>
        <span class="rv-info-val"><span class="g-tag g-tag-orange">堂食</span></span>
      </div>
      <div class="rv-info-row">
        <span class="rv-info-label">金额</span>
        <span class="rv-info-val" style="font-weight:600;">&yen;68.00</span>
      </div>
    </div>

    <!-- 商品 -->
    <div class="rv-section">
      <div class="rv-section-hd">商品</div>
      <div class="rv-products">
        <span class="rv-product-tag">红烧肉套餐</span>
        <span class="rv-product-tag">紫菜蛋花汤</span>
      </div>
    </div>

    <!-- 回复内容 -->
    <div class="rv-section">
      <div class="rv-section-hd">回复内容</div>
      <div class="g-form-group">
        <textarea class="g-textarea" id="rvReplyText" rows="4" placeholder="请输入回复内容，建议真诚友好地回应顾客反馈"></textarea>
      </div>
      <div class="g-hint" style="margin-bottom:10px;">快捷回复</div>
      <div class="rv-quick-replies">
        <span class="rv-quick-reply" onclick="fillQuickReply('感谢您的好评，期待下次光临！')">感谢您的好评，期待下次光临！</span>
        <span class="rv-quick-reply" onclick="fillQuickReply('非常抱歉给您带来不好的体验，我们会改进！')">非常抱歉给您带来不好的体验，我们会改进！</span>
        <span class="rv-quick-reply" onclick="fillQuickReply('感谢反馈，已记录并会尽快优化！')">感谢反馈，已记录并会尽快优化！</span>
        <span class="rv-quick-reply" onclick="fillQuickReply('谢谢支持，欢迎再次光临！')">谢谢支持，欢迎再次光临！</span>
      </div>
    </div>
  </div>
  <div class="g-drawer-ft">
    <button class="g-btn" onclick="closeRvDrawer()">取消</button>
    <button class="g-btn g-btn-primary" onclick="closeRvDrawer()">发送回复</button>
  </div>
</div>

<script>
  /* 抽屉开关 */
  function openRvDrawer(reviewId) {
    document.getElementById('rvDrawerMask').classList.add('open');
    document.getElementById('rvDrawer').classList.add('open');
  }
  function closeRvDrawer() {
    document.getElementById('rvDrawerMask').classList.remove('open');
    document.getElementById('rvDrawer').classList.remove('open');
    document.getElementById('rvReplyText').value = '';
  }

  /* 快捷回复 */
  function fillQuickReply(text) {
    document.getElementById('rvReplyText').value = text;
    document.getElementById('rvReplyText').focus();
  }

  /* 评分筛选（占位） */
  function filterRvStars() {
    // 原型占位，无真实逻辑
  }

  /* 初始化 Lucide 图标 */
  document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') { lucide.createIcons(); }
  });
</script>