diff --git a/netcore/src/Modularity/Extend/NCC.Extend/LqCooperationCostService.cs b/netcore/src/Modularity/Extend/NCC.Extend/LqCooperationCostService.cs
index 74e9817..32c17d9 100644
--- a/netcore/src/Modularity/Extend/NCC.Extend/LqCooperationCostService.cs
+++ b/netcore/src/Modularity/Extend/NCC.Extend/LqCooperationCostService.cs
@@ -25,6 +25,7 @@ using NCC.ClayObject;
 using NCC.Common.Const;
 using NCC.Extend.Entitys.Enum;
 using Microsoft.AspNetCore.Http;
+using System.Globalization;
 using System.IO;
 using System.Data;
 
@@ -288,22 +289,17 @@ namespace NCC.Extend.LqCooperationCost
         /// <summary>
         /// 导出合作成本表
         /// </summary>
+        /// <remarks>
+        /// 未传入任何筛选参数时，默认导出全部数据；传入 storeId、storeName、year、month 时按条件筛选导出。
+        /// </remarks>
         /// <param name="input">请求参数</param>
         /// <returns></returns>
         [HttpGet("Actions/Export")]
         public async Task<dynamic> Export([FromQuery] LqCooperationCostListQueryInput input)
         {
             var userInfo = await _userManager.GetUserInfo();
-            var exportData = new List<LqCooperationCostListOutput>();
-            if (input.dataType == 0)
-            {
-                var data = Clay.Object(await this.GetList(input));
-                exportData = data.Solidify<PageResult<LqCooperationCostListOutput>>().list;
-            }
-            else
-            {
-                exportData = await this.GetNoPagingList(input);
-            }
+            // 导出时统一使用无分页列表：未传参数则导出全部，有参数则按条件筛选
+            var exportData = await this.GetNoPagingList(input);
             List<ParamsModel> paramList = "[{\"value\":\"门店名称\",\"field\":\"storeName\"},{\"value\":\"年份\",\"field\":\"year\"},{\"value\":\"月份\",\"field\":\"month\"},{\"value\":\"合计金额\",\"field\":\"totalAmount\"},{\"value\":\"成本类型\",\"field\":\"costType\"},{\"value\":\"备注说明\",\"field\":\"remarks\"},{\"value\":\"创建人\",\"field\":\"createUser\"},{\"value\":\"创建时间\",\"field\":\"createTime\"},]".ToList<ParamsModel>();
             ExcelConfig excelconfig = new ExcelConfig();
             excelconfig.FileName = "合作成本表.xls";
@@ -402,6 +398,9 @@ namespace NCC.Extend.LqCooperationCost
         /// 第一行为标题行：门店名称、年份、月份、合计金额、成本类型、备注说明
         /// 从第二行开始为数据行
         /// 
+        /// 合计金额支持正数和负数，负数可用于冲减、退款等场景；
+        /// 支持格式：-100、-100.50、会计格式(100)等
+        /// 
         /// 注意：导入时通过门店名称查找门店ID，不需要填写门店ID
         /// 
         /// 示例请求：
@@ -511,10 +510,17 @@ namespace NCC.Extend.LqCooperationCost
                                 continue;
                             }
 
-                            // 验证合计金额
-                            if (string.IsNullOrEmpty(totalAmountText) || !decimal.TryParse(totalAmountText, out decimal totalAmount))
+                            // 验证合计金额（支持正数和负数，如冲减、退款等场景）
+                            if (string.IsNullOrEmpty(totalAmountText))
+                            {
+                                failMessages.Add($"第{i + 1}行：合计金额不能为空");
+                                failCount++;
+                                continue;
+                            }
+
+                            if (!TryParseDecimalAllowNegative(totalAmountText, out decimal totalAmount))
                             {
-                                failMessages.Add($"第{i + 1}行：合计金额格式错误（应为数字）");
+                                failMessages.Add($"第{i + 1}行：合计金额格式错误（应为数字，支持负数如-100或会计格式(100)）");
                                 failCount++;
                                 continue;
                             }
@@ -616,6 +622,41 @@ namespace NCC.Extend.LqCooperationCost
                 throw NCCException.Oh($"导入失败：{ex.Message}");
             }
         }
+
+        /// <summary>
+        /// 解析合计金额字符串，支持正数和负数
+        /// </summary>
+        /// <param name="text">待解析的字符串</param>
+        /// <param name="result">解析结果</param>
+        /// <returns>是否解析成功</returns>
+        /// <remarks>
+        /// 支持格式：-100、-100.50、会计格式(100)或（100）、千分位1,234.56等
+        /// </remarks>
+        private static bool TryParseDecimalAllowNegative(string text, out decimal result)
+        {
+            result = 0;
+            if (string.IsNullOrWhiteSpace(text)) return false;
+
+            var cleaned = text.Trim()
+                .Replace(",", "")
+                .Replace("，", "")
+                .Replace("￥", "")
+                .Replace("$", "")
+                .Replace("元", "")
+                .Replace(" ", "");
+
+            // 会计格式：(100) 或 （100）表示负数
+            if (cleaned.StartsWith("(") && cleaned.EndsWith(")"))
+            {
+                cleaned = "-" + cleaned.Substring(1, cleaned.Length - 2).Trim();
+            }
+            else if (cleaned.StartsWith("（") && cleaned.EndsWith("）"))
+            {
+                cleaned = "-" + cleaned.Substring(1, cleaned.Length - 2).Trim();
+            }
+
+            return decimal.TryParse(cleaned, NumberStyles.Number, CultureInfo.InvariantCulture, out result);
+        }
     }
 }
 
diff --git a/netcore/src/Modularity/Message/NCC.Message.Entitys/NCC.Message.Entitys.csproj b/netcore/src/Modularity/Message/NCC.Message.Entitys/NCC.Message.Entitys.csproj
index c94d0e7..c9bee1e 100644
--- a/netcore/src/Modularity/Message/NCC.Message.Entitys/NCC.Message.Entitys.csproj
+++ b/netcore/src/Modularity/Message/NCC.Message.Entitys/NCC.Message.Entitys.csproj
@@ -1,11 +1,14 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFramework>net6.0</TargetFramework>
   </PropertyGroup>
 
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
+    <DocumentationFile>bin\Debug\$(AssemblyName).xml</DocumentationFile>
+  </PropertyGroup>
   <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
-    <DocumentationFile>D:\wesley\project\git\antis-food-alliance\netcore\src\Modularity\Message\NCC.Message.Entitys\NCC.Message.Entitys.xml</DocumentationFile>
+    <DocumentationFile>bin\Release\$(AssemblyName).xml</DocumentationFile>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/store-pc/src/components/ConsumeDialog.vue b/store-pc/src/components/ConsumeDialog.vue
index bc7a731..9bc9364 100644
--- a/store-pc/src/components/ConsumeDialog.vue
+++ b/store-pc/src/components/ConsumeDialog.vue
@@ -372,7 +372,37 @@ export default {
         this.form.memberName = this.prefill.name || ''
         this.loadMemberItems(this.prefill.memberId)
       }
+      if (this.prefill && this.prefill.consumeDate) {
+        const d = this.prefill.consumeDate instanceof Date ? this.prefill.consumeDate : new Date(this.prefill.consumeDate)
+        if (!Number.isNaN(d.getTime())) this.form.consumeDate = d
+      }
+      if (this.prefill && this.prefill.remark) {
+        this.form.remark = this.prefill.remark
+      }
       this.$nextTick(() => {
+        // 预填品项（用于“预约消耗单 -> 转消耗”闭环，mock 预填即可）
+        const preItems = (this.prefill && Array.isArray(this.prefill.items)) ? this.prefill.items : null
+        if (preItems && preItems.length) {
+          this.form.items = preItems.map(pi => {
+            const it = this.createEmptyItem()
+            it.projectId = pi.projectId || ''
+            it.count = pi.count || 1
+            return it
+          })
+          // 触发品项信息填充与业绩分配
+          this.form.items.forEach((_, idx) => {
+            if (this.form.items[idx].projectId) this.onProjectChange(idx)
+          })
+        }
+
+        // 预填健康师（把 therapistIds 映射到每个品项的 workers）
+        const tids = (this.prefill && Array.isArray(this.prefill.therapistIds)) ? this.prefill.therapistIds : null
+        if (tids && tids.length) {
+          this.form.items.forEach((item, idx) => {
+            item.workers = tids.map(tid => ({ workerId: tid, performance: '', laborCost: '', count: '' }))
+            this.redistributeWorkers(idx)
+          })
+        }
         this.$refs.form && this.$refs.form.clearValidate()
       })
     },
diff --git a/store-pc/src/components/EmployeeScheduleDialog.vue b/store-pc/src/components/EmployeeScheduleDialog.vue
index d15e482..9064abb 100644
--- a/store-pc/src/components/EmployeeScheduleDialog.vue
+++ b/store-pc/src/components/EmployeeScheduleDialog.vue
@@ -103,7 +103,7 @@
       </div>
     </div>
 
-    <!-- 预约详情弹窗：风格与主弹窗统一 -->
+    <!-- 预约详情弹窗：风格与主弹窗统一（旧预约 mock） -->
     <el-dialog
       :visible.sync="detailDialogVisible"
       width="440px"
@@ -137,15 +137,35 @@
       :prefill="addBookingPrefill"
       :health-worker-options="healthWorkerOptionsFromEmployees"
     />
+
+    <!-- 预约消耗单详情（新：支持取消/开始服务/转消耗） -->
+    <booking-consume-detail-dialog
+      :visible.sync="preConsumeDetailVisible"
+      :booking="selectedPreConsumeBooking"
+      @cancel="handlePreConsumeCancel"
+      @start="handlePreConsumeStart"
+      @convert="handlePreConsumeConvert"
+    />
+
+    <!-- 转消耗：复用现有 ConsumeDialog（仅 mock 预填） -->
+    <consume-dialog
+      :visible.sync="consumeDialogVisible"
+      :prefill="consumePrefill"
+      @submitted="handleConsumeSubmitted"
+    />
   </el-dialog>
 </template>
 
 <script>
 import BookingDialog from '@/components/BookingDialog.vue'
+import BookingConsumeDetailDialog from '@/components/booking-consume-detail-dialog.vue'
+import ConsumeDialog from '@/components/ConsumeDialog.vue'
+
+const PRE_CONSUME_STORAGE_KEY = 'store_pc_pre_consume_bookings'
 
 export default {
   name: 'EmployeeScheduleDialog',
-  components: { BookingDialog },
+  components: { BookingDialog, BookingConsumeDetailDialog, ConsumeDialog },
   props: {
     visible: { type: Boolean, default: false },
     openMode: { type: String, default: 'view' }
@@ -159,6 +179,12 @@ export default {
       selectedBooking: null,
       addBookingPrefill: {},
       dragState: null,
+      preConsumeBookings: [],
+      activePreConsumeId: '',
+      preConsumeDetailVisible: false,
+      selectedPreConsumeBooking: null,
+      consumeDialogVisible: false,
+      consumePrefill: {},
       employeeList: [
         { id: 'E001', name: '董顺秀', role: '健康师' },
         { id: 'E002', name: '张丽', role: '健康师' },
@@ -260,24 +286,82 @@ export default {
         const timeEnd = `${String(Math.floor(b.slotEnd / 2)).padStart(2, '0')}:${(b.slotEnd % 2) ? '30' : '00'}`
         return { ...b, date: `${y}-${m}-${day}`, timeRange: `${timeStart}-${timeEnd}` }
       })
+    },
+    preConsumeBookingsWithDate() {
+      if (!this.weekStart) return []
+      const toSlot = (timeStr) => {
+        if (!timeStr) return null
+        const [h, m] = timeStr.split(':').map(Number)
+        if (Number.isNaN(h) || Number.isNaN(m)) return null
+        return h * 2 + (m >= 30 ? 1 : 0)
+      }
+      return (this.preConsumeBookings || []).map(b => {
+        const slotStart = toSlot(b.startTime)
+        const slotEnd = toSlot(b.endTime)
+        return {
+          ...b,
+          slotStart: slotStart == null ? 0 : slotStart,
+          slotEnd: slotEnd == null ? 0 : slotEnd
+        }
+      })
     }
   },
   watch: {
     visible(v) {
       if (v && !this.weekStart) this.initWeek()
+      if (v) this.loadPreConsumeBookings()
       if (v && this.openMode === 'set') {
         this.$nextTick(() => {
           this.gotoNextWeek()
           this.$store.commit('SET_SCHEDULE_DIALOG_MODE', 'view')
         })
       }
-      if (!v) this.selectedDay = null
+      if (!v) {
+        this.selectedDay = null
+        this.activePreConsumeId = ''
+        this.preConsumeDetailVisible = false
+      }
     }
   },
   mounted() {
     this.initWeek()
+    this.loadPreConsumeBookings()
   },
   methods: {
+    readPreConsumeStorage() {
+      try {
+        const raw = localStorage.getItem(PRE_CONSUME_STORAGE_KEY)
+        if (!raw) return []
+        const arr = JSON.parse(raw)
+        return Array.isArray(arr) ? arr : []
+      } catch (e) {
+        return []
+      }
+    },
+    writePreConsumeStorage(list) {
+      localStorage.setItem(PRE_CONSUME_STORAGE_KEY, JSON.stringify(list || []))
+    },
+    loadPreConsumeBookings() {
+      const list = this.readPreConsumeStorage()
+      this.preConsumeBookings = list
+    },
+    findPreConsumeForSlot(empId, date, slotIndex) {
+      const list = this.preConsumeBookingsWithDate
+      return list.find(x =>
+        Array.isArray(x.therapistIds) &&
+        x.therapistIds.includes(empId) &&
+        x.date === date &&
+        slotIndex >= x.slotStart &&
+        slotIndex < x.slotEnd
+      )
+    },
+    preConsumeStatusClass(status) {
+      const s = status || 'booked'
+      if (s === 'serving') return 'slot--preconsume-serving'
+      if (s === 'converted') return 'slot--preconsume-converted'
+      if (s === 'cancelled') return 'slot--preconsume-cancelled'
+      return 'slot--preconsume-booked'
+    },
     initWeek() {
       const now = new Date()
       const dow = now.getDay()
@@ -354,6 +438,17 @@ export default {
       return slotIndex >= lo && slotIndex <= hi
     },
     slotClass(empId, date, slotIndex) {
+      const pcb = this.findPreConsumeForSlot(empId, date, slotIndex)
+      if (pcb) {
+        let c = `slot--preconsume ${this.preConsumeStatusClass(pcb.status)} slot--preconsume-color-${pcb.colorKey || 'blue'}`
+        if (slotIndex === pcb.slotStart) c += ' slot--resize-start'
+        if (slotIndex === pcb.slotEnd - 1) c += ' slot--resize-end'
+        if (this.activePreConsumeId) {
+          if (pcb.id === this.activePreConsumeId) c += ' slot--same-active'
+          else c += ' slot--dimmed'
+        }
+        return c
+      }
       const b = this.bookingsWithDate.find(x =>
         x.employeeId === empId &&
         x.date === date &&
@@ -370,6 +465,13 @@ export default {
       return ''
     },
     getSlotTooltip(empId, date, slotIndex) {
+      const pcb = this.findPreConsumeForSlot(empId, date, slotIndex)
+      if (pcb) {
+        const items = Array.isArray(pcb.itemLabels) && pcb.itemLabels.length ? pcb.itemLabels.join('、') : ''
+        const statusMap = { booked: '已预约', serving: '服务中', converted: '已转消耗', cancelled: '已取消' }
+        const st = statusMap[pcb.status] || '已预约'
+        return `${pcb.startTime}-${pcb.endTime} ${pcb.memberName || '无'}（${st}）${items ? ' · ' + items : ''}`
+      }
       const b = this.bookingsWithDate.find(x =>
         x.employeeId === empId &&
         x.date === date &&
@@ -405,6 +507,13 @@ export default {
       this.addBookingDialogVisible = true
     },
     handleSlotMouseDown(e, emp, date, slotIndex) {
+      const pcb = this.findPreConsumeForSlot(emp.id, date, slotIndex)
+      if (pcb) {
+        this.activePreConsumeId = pcb.id
+        this.selectedPreConsumeBooking = pcb
+        this.preConsumeDetailVisible = true
+        return
+      }
       const b = this.bookingsWithDate.find(x =>
         x.employeeId === emp.id &&
         x.date === date &&
@@ -558,6 +667,59 @@ export default {
       if (!d || this.dragState.dayOffset !== d.dayOffset) return
       this.dragState.endSlot = slotIndex
     },
+    updatePreConsumeStatus(id, status) {
+      const list = this.readPreConsumeStorage()
+      const idx = list.findIndex(x => x && x.id === id)
+      if (idx < 0) return null
+      const updated = { ...list[idx], status }
+      list.splice(idx, 1, updated)
+      this.writePreConsumeStorage(list)
+      this.preConsumeBookings = list
+      return updated
+    },
+    handlePreConsumeCancel(b) {
+      if (!b) return
+      this.$confirm(`确定取消「${b.memberName || '该会员'}」在 ${b.date} ${b.startTime}-${b.endTime} 的预约吗？`, '取消预约确认', {
+        confirmButtonText: '确定',
+        cancelButtonText: '再想想',
+        type: 'warning'
+      }).then(() => {
+        const updated = this.updatePreConsumeStatus(b.id, 'cancelled')
+        if (updated) this.selectedPreConsumeBooking = updated
+        this.$message.success('已取消预约')
+      }).catch(() => {})
+    },
+    handlePreConsumeStart(b) {
+      if (!b) return
+      const updated = this.updatePreConsumeStatus(b.id, 'serving')
+      if (updated) this.selectedPreConsumeBooking = updated
+      this.$message.success('已开始服务')
+    },
+    handlePreConsumeConvert(b) {
+      if (!b) return
+      const updated = this.updatePreConsumeStatus(b.id, 'converted') || b
+      this.selectedPreConsumeBooking = updated
+      this.preConsumeDetailVisible = false
+
+      this.consumePrefill = {
+        memberId: updated.memberId,
+        name: updated.memberName,
+        consumeDate: updated.date,
+        remark: `转自预约消耗单：${updated.id}${updated.remark ? ' · ' + updated.remark : ''}`,
+        therapistIds: updated.therapistIds,
+        items: (updated.items || []).map(x => ({
+          projectId: x.projectId,
+          label: x.label,
+          count: (x.count != null ? x.count : x.qty) || 1
+        }))
+      }
+      this.consumeDialogVisible = true
+    },
+    handleConsumeSubmitted() {
+      // mock：提交后保持 converted 状态即可
+      this.consumeDialogVisible = false
+      this.$message.success('已完成转消耗（示例）')
+    }
   }
 }
 </script>
@@ -935,6 +1097,40 @@ export default {
 .slot--resize-start { cursor: w-resize; }
 .slot--resize-end { cursor: e-resize; }
 
+/* 预约消耗单块：不同状态 + 同单高亮 */
+.slot--preconsume {
+  position: relative;
+  background: rgba(37, 99, 235, 0.42);
+  &:hover { background: rgba(37, 99, 235, 0.6); }
+}
+.slot--preconsume-booked { }
+.slot--preconsume-serving {
+  background: rgba(249, 115, 22, 0.55);
+  &:hover { background: rgba(249, 115, 22, 0.7); }
+}
+.slot--preconsume-converted {
+  background: rgba(34, 197, 94, 0.5);
+  &:hover { background: rgba(34, 197, 94, 0.7); }
+}
+.slot--preconsume-cancelled {
+  background: rgba(239, 68, 68, 0.45);
+  &:hover { background: rgba(239, 68, 68, 0.6); }
+}
+
+.slot--preconsume-color-blue { box-shadow: inset 0 -2px 0 rgba(37, 99, 235, 0.65); }
+.slot--preconsume-color-green { box-shadow: inset 0 -2px 0 rgba(34, 197, 94, 0.7); }
+.slot--preconsume-color-orange { box-shadow: inset 0 -2px 0 rgba(249, 115, 22, 0.75); }
+.slot--preconsume-color-purple { box-shadow: inset 0 -2px 0 rgba(139, 92, 246, 0.75); }
+.slot--preconsume-color-gray { box-shadow: inset 0 -2px 0 rgba(148, 163, 184, 0.8); }
+
+.slot--same-active {
+  outline: 2px solid rgba(17, 24, 39, 0.25);
+  z-index: 1;
+}
+.slot--dimmed {
+  opacity: 0.35;
+}
+
 /* 预约详情弹窗 - 与主弹窗风格统一 */
 ::v-deep .schedule-detail-dialog {
   border-radius: 20px;
diff --git a/store-pc/src/components/booking-consume-detail-dialog.vue b/store-pc/src/components/booking-consume-detail-dialog.vue
new file mode 100644
index 0000000..97a1b1f
--- /dev/null
+++ b/store-pc/src/components/booking-consume-detail-dialog.vue
@@ -0,0 +1,236 @@
+<template>
+  <el-dialog
+    :visible.sync="visibleProxy"
+    :show-close="false"
+    width="520px"
+    :close-on-click-modal="false"
+    custom-class="booking-consume-detail-dialog"
+    append-to-body
+  >
+    <div v-if="booking" class="inner">
+      <div class="header">
+        <div class="title">预约消耗单详情</div>
+        <span class="close" @click="visibleProxy = false"><i class="el-icon-close"></i></span>
+      </div>
+
+      <div class="body">
+        <div class="row"><span class="label">会员</span><span class="value">{{ booking.memberName || '无' }}</span></div>
+        <div class="row"><span class="label">预约时间</span><span class="value">{{ booking.date }} {{ booking.startTime }}-{{ booking.endTime }}</span></div>
+        <div class="row"><span class="label">房间</span><span class="value">{{ booking.roomName || '无' }}</span></div>
+        <div class="row">
+          <span class="label">健康师</span>
+          <span class="value">
+            <span v-if="therapistNames.length">{{ therapistNames.join('、') }}</span>
+            <span v-else>无</span>
+          </span>
+        </div>
+        <div class="row">
+          <span class="label">项目/品项</span>
+          <span class="value">
+            <span v-if="itemLabels.length">{{ itemLabels.join('、') }}</span>
+            <span v-else>无</span>
+          </span>
+        </div>
+        <div class="row">
+          <span class="label">状态</span>
+          <span :class="['value', 'status', 'status--' + (booking.status || 'booked')]">{{ statusText }}</span>
+        </div>
+        <div class="row" v-if="booking.remark">
+          <span class="label">备注</span><span class="value">{{ booking.remark }}</span>
+        </div>
+      </div>
+
+      <div class="footer">
+        <el-button size="small" @click="visibleProxy = false">关 闭</el-button>
+        <el-button
+          v-if="booking.status !== 'cancelled' && booking.status !== 'converted'"
+          size="small"
+          class="danger-btn"
+          @click="$emit('cancel', booking)"
+        >
+          取消预约
+        </el-button>
+        <el-button
+          v-if="booking.status === 'booked'"
+          type="primary"
+          size="small"
+          @click="$emit('start', booking)"
+        >
+          开始服务
+        </el-button>
+        <el-button
+          v-if="booking.status !== 'converted'"
+          type="primary"
+          plain
+          size="small"
+          @click="$emit('convert', booking)"
+        >
+          转消耗
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'BookingConsumeDetailDialog',
+  props: {
+    visible: { type: Boolean, default: false },
+    booking: { type: Object, default: null }
+  },
+  computed: {
+    visibleProxy: {
+      get() { return this.visible },
+      set(v) { this.$emit('update:visible', v) }
+    },
+    therapistNames() {
+      const b = this.booking || {}
+      if (Array.isArray(b.therapistNames) && b.therapistNames.length) return b.therapistNames
+      return []
+    },
+    itemLabels() {
+      const b = this.booking || {}
+      if (Array.isArray(b.itemLabels) && b.itemLabels.length) return b.itemLabels
+      if (Array.isArray(b.items) && b.items.length) {
+        return b.items.map(x => {
+          const base = x.label || ''
+          const cnt = (x.count != null ? x.count : x.qty)
+          const suffix = cnt != null ? `×${cnt}` : ''
+          return `${base}${suffix}`.trim()
+        }).filter(Boolean)
+      }
+      return []
+    },
+    statusText() {
+      const s = (this.booking && this.booking.status) || 'booked'
+      const map = {
+        booked: '已预约',
+        serving: '服务中',
+        converted: '已转消耗',
+        cancelled: '已取消'
+      }
+      return map[s] || '已预约'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.inner {
+  padding: 18px 22px 14px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 12px;
+  padding: 10px 14px;
+  border-radius: 14px;
+  background: rgba(219, 234, 254, 0.96);
+}
+
+.title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.close {
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  color: #64748b;
+  transition: all 0.15s;
+  &:hover { background: rgba(0, 0, 0, 0.06); color: #0f172a; }
+}
+
+.body {
+  padding: 4px 0 16px;
+}
+
+.row {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #f1f5f9;
+  font-size: 14px;
+}
+
+.label {
+  width: 96px;
+  color: #64748b;
+  flex-shrink: 0;
+}
+
+.value {
+  flex: 1;
+  min-width: 0;
+  color: #111827;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.status {
+  font-weight: 600;
+}
+.status--booked { color: #2563eb; }
+.status--serving { color: #f97316; }
+.status--converted { color: #16a34a; }
+.status--cancelled { color: #ef4444; }
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 12px;
+  border-top: 1px solid #f1f5f9;
+}
+
+.danger-btn {
+  border-radius: 999px !important;
+  background: rgba(254, 226, 226, 0.8) !important;
+  color: #b91c1c !important;
+  border-color: rgba(239, 68, 68, 0.25) !important;
+}
+
+::v-deep .booking-consume-detail-dialog {
+  max-width: 520px;
+  margin-top: 10vh !important;
+  border-radius: 20px;
+  padding: 0;
+  background: radial-gradient(circle at 0 0, rgba(255,255,255,0.96) 0, rgba(248,250,252,0.98) 40%, rgba(241,245,249,0.98) 100%);
+  box-shadow: 0 24px 48px rgba(15,23,42,0.18), 0 0 0 1px rgba(255,255,255,0.9);
+  backdrop-filter: blur(22px);
+  -webkit-backdrop-filter: blur(22px);
+}
+::v-deep .booking-consume-detail-dialog .el-dialog__header { display: none; }
+::v-deep .booking-consume-detail-dialog .el-dialog__body { padding: 0; }
+::v-deep .booking-consume-detail-dialog .el-button--primary {
+  border-radius: 999px;
+  padding: 0 18px;
+  height: 30px;
+  line-height: 30px;
+  background: #2563eb;
+  border-color: #2563eb;
+  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
+  font-size: 12px;
+}
+::v-deep .booking-consume-detail-dialog .el-button--default {
+  border-radius: 999px;
+  padding: 0 18px;
+  height: 30px;
+  line-height: 30px;
+  background: rgba(239, 246, 255, 0.9);
+  color: #2563eb;
+  border-color: rgba(37, 99, 235, 0.18);
+  font-size: 12px;
+}
+</style>
+
diff --git a/store-pc/src/components/booking-consume-dialog.vue b/store-pc/src/components/booking-consume-dialog.vue
new file mode 100644
index 0000000..c840b78
--- /dev/null
+++ b/store-pc/src/components/booking-consume-dialog.vue
@@ -0,0 +1,922 @@
+<template>
+  <el-dialog
+    :visible.sync="visibleProxy"
+    :show-close="false"
+    width="1200px"
+    :close-on-click-modal="false"
+    custom-class="booking-consume-dialog"
+    append-to-body
+  >
+    <div class="consume-dialog-inner">
+      <div class="consume-header">
+        <div class="consume-title-wrap">
+          <div class="consume-title">预约消耗单</div>
+          <div class="consume-subtitle" v-if="form.memberName">{{ form.memberName }}</div>
+        </div>
+        <div class="consume-header-actions">
+          <el-button size="mini" class="ghost-btn" @click="roomUsageVisible = true">
+            <i class="el-icon-office-building"></i> 查看房态
+          </el-button>
+          <span class="consume-close" @click="handleCancel">
+            <i class="el-icon-close"></i>
+          </span>
+        </div>
+      </div>
+
+      <div class="consume-content">
+        <el-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          label-width="96px"
+          size="small"
+          class="consume-form"
+        >
+          <div class="consume-left">
+            <div class="section-title"><i class="el-icon-document"></i> 基础信息</div>
+
+            <el-form-item label="会员" prop="memberId">
+              <el-select v-model="form.memberId" placeholder="搜索会员" filterable clearable @change="onMemberChange">
+                <el-option v-for="m in memberOptions" :key="m.value" :label="`${m.label}（${m.phone}）`" :value="m.value" />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="预约日期" prop="date">
+              <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width:100%" />
+            </el-form-item>
+
+            <el-form-item label="开始时间" prop="startTime">
+              <el-time-select v-model="form.startTime" :picker-options="timeOptions" placeholder="开始时间" style="width:100%" />
+            </el-form-item>
+            <el-form-item label="结束时间" prop="endTime">
+              <el-time-select v-model="form.endTime" :picker-options="timeOptionsEnd" placeholder="结束时间" style="width:100%" />
+            </el-form-item>
+
+            <el-form-item label="房间" prop="roomId">
+              <el-select v-model="form.roomId" placeholder="选择房间" filterable clearable @change="onRoomChange">
+                <el-option v-for="r in roomOptions" :key="r.id" :label="r.name" :value="r.id" />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="服务健康师">
+              <div class="readonly-workers">
+                <span v-if="selectedTherapistNames.length" class="readonly-workers-text">{{ selectedTherapistNames.join('、') }}</span>
+                <span v-else class="readonly-workers-empty">请在右侧品项中选择服务健康师</span>
+              </div>
+            </el-form-item>
+
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注信息" />
+            </el-form-item>
+          </div>
+
+          <div class="consume-right">
+            <div class="section-title"><i class="el-icon-goods"></i> 品项明细</div>
+
+            <div v-for="(item, idx) in form.items" :key="'item-' + idx" class="item-card">
+              <div class="item-card-head">
+                <span class="item-card-no">品项 {{ idx + 1 }}</span>
+                <el-button
+                  v-if="form.items.length > 1"
+                  type="text"
+                  class="item-remove-btn"
+                  @click="removeItem(idx)"
+                >
+                  <i class="el-icon-delete"></i> 删除
+                </el-button>
+              </div>
+
+              <el-form-item
+                label="品项"
+                :prop="'items.' + idx + '.projectId'"
+                :rules="[{ required: true, message: '请选择品项', trigger: 'change' }]"
+                label-width="56px"
+              >
+                <el-select
+                  v-model="item.projectId"
+                  placeholder="搜索品项"
+                  filterable
+                  clearable
+                  @change="onProjectChange(idx)"
+                >
+                  <el-option v-for="p in availableItems" :key="p.value" :label="p.label" :value="p.value" />
+                </el-select>
+              </el-form-item>
+
+              <div v-if="item.projectId" class="px-info-panel">
+                <el-row :gutter="8">
+                  <el-col :span="8"><span class="px-tag">单价</span> <b>¥{{ item.price }}</b></el-col>
+                  <el-col :span="8"><span class="px-tag">总购买</span> <b>{{ item.totalPurchased }}</b></el-col>
+                  <el-col :span="8"><span class="px-tag">已消费</span> <b>{{ item.consumed }}</b></el-col>
+                </el-row>
+                <el-row :gutter="8" style="margin-top:4px">
+                  <el-col :span="8"><span class="px-tag">剩余</span> <b class="remaining">{{ item.remaining }}</b></el-col>
+                  <el-col :span="8"><span class="px-tag">来源</span> <b>{{ item.sourceType || '无' }}</b></el-col>
+                  <el-col :span="8"><span class="px-tag">健康师手工费</span> <b>{{ item.healthCoachLaborCost }}</b></el-col>
+                </el-row>
+                <el-row :gutter="8" style="margin-top:4px" v-if="item.qt2 === '科美'">
+                  <el-col :span="8"><span class="px-tag">科美手工费</span> <b>{{ item.techBeautyLaborCost }}</b></el-col>
+                </el-row>
+              </div>
+
+              <el-row :gutter="12" style="margin-top:8px">
+                <el-col :span="16">
+                  <el-form-item label="次数" label-width="56px">
+                    <el-input-number
+                      v-model="item.count"
+                      :min="1"
+                      :max="item.remaining || 999"
+                      controls-position="right"
+                      style="width:100%"
+                      @change="onCountChange(idx)"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <div class="worker-section">
+                <div class="worker-label">
+                  <span>服务健康师</span>
+                  <el-button type="text" size="mini" @click="addWorker(idx)">
+                    <i class="el-icon-plus"></i> 添加健康师
+                  </el-button>
+                </div>
+                <div v-for="(w, wi) in item.workers" :key="'w-' + wi" class="worker-row">
+                  <el-select v-model="w.workerId" placeholder="选择健康师" filterable size="mini" class="worker-select">
+                    <el-option v-for="h in healthWorkerOptions" :key="h.value" :label="h.label" :value="h.value" />
+                  </el-select>
+                  <el-button
+                    v-if="item.workers.length > 1"
+                    type="text"
+                    size="mini"
+                    class="worker-remove"
+                    @click="removeWorker(idx, wi)"
+                  >
+                    <i class="el-icon-close"></i>
+                  </el-button>
+                </div>
+              </div>
+
+              <div class="worker-section" v-if="item.qt2 === '科美'">
+                <div class="worker-label">
+                  <span>科技部老师</span>
+                  <el-button type="text" size="mini" @click="addTechTeacher(idx)">
+                    <i class="el-icon-plus"></i> 添加科技部老师
+                  </el-button>
+                </div>
+                <div v-for="(t, ti) in item.techTeachers" :key="'t-' + ti" class="worker-row">
+                  <el-select v-model="t.teacherId" placeholder="选择老师" filterable size="mini" class="worker-select">
+                    <el-option v-for="tt in techTeacherOptions" :key="tt.value" :label="tt.label" :value="tt.value" />
+                  </el-select>
+                  <el-input :value="t.performance" readonly placeholder="业绩" size="mini" class="worker-field">
+                    <template slot="prepend">¥</template>
+                  </el-input>
+                  <el-input :value="t.laborCost" readonly placeholder="手工费" size="mini" class="worker-field" />
+                  <el-input :value="t.count" readonly placeholder="次数" size="mini" class="worker-field-sm" />
+                  <el-button
+                    type="text"
+                    size="mini"
+                    class="worker-remove"
+                    @click="removeTechTeacher(idx, ti)"
+                  >
+                    <i class="el-icon-close"></i>
+                  </el-button>
+                </div>
+              </div>
+
+              <div class="worker-section" v-if="item.isAllowAccompanied == 1">
+                <div class="worker-label">
+                  <span>陪同健康师</span>
+                  <el-button type="text" size="mini" @click="addAccompanied(idx)">
+                    <i class="el-icon-plus"></i> 添加陪同健康师
+                  </el-button>
+                </div>
+                <div v-for="(a, ai) in item.accompanied" :key="'a-' + ai" class="worker-row">
+                  <el-select v-model="a.workerId" placeholder="选择健康师" filterable size="mini" class="worker-select">
+                    <el-option v-for="h in healthWorkerOptions" :key="h.value" :label="h.label" :value="h.value" />
+                  </el-select>
+                  <el-input-number v-model="a.count" :min="1" controls-position="right" size="mini" style="width:100px" />
+                  <el-button
+                    type="text"
+                    size="mini"
+                    class="worker-remove"
+                    @click="removeAccompanied(idx, ai)"
+                  >
+                    <i class="el-icon-close"></i>
+                  </el-button>
+                </div>
+              </div>
+            </div>
+
+            <div class="add-btn-row">
+              <el-button type="text" @click="addItem">
+                <i class="el-icon-circle-plus-outline"></i> 添加品项
+              </el-button>
+            </div>
+          </div>
+        </el-form>
+      </div>
+
+      <div class="consume-footer">
+        <div class="footer-summary">
+          <span class="footer-tip">提示：服务健康师来自右侧品项选择（用于排班占用展示）</span>
+        </div>
+        <div class="footer-actions">
+          <el-button size="small" @click="handleCancel">取 消</el-button>
+          <el-button type="primary" size="small" :loading="submitting" @click="handleSubmit">
+            {{ submitting ? '提交中...' : '保 存' }}
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <room-usage-dialog
+      :visible.sync="roomUsageVisible"
+      :date="roomUsageDate"
+      :rooms="roomOptions"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import RoomUsageDialog from '@/components/room-usage-dialog.vue'
+
+const STORAGE_KEY = 'store_pc_pre_consume_bookings'
+
+export default {
+  name: 'BookingConsumeDialog',
+  components: { RoomUsageDialog },
+  props: {
+    visible: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      submitting: false,
+      roomUsageVisible: false,
+      form: this.createEmptyForm(),
+      memberOptions: [
+        { value: 'cust001', label: '林小纤', phone: '13800138000' },
+        { value: 'cust002', label: '王丽', phone: '13800138001' },
+        { value: 'cust003', label: '张敏', phone: '13800138002' }
+      ],
+      memberItemsMap: {
+        'cust001': [
+          { value: 'item001', label: '面部深层护理（次卡）', price: 380, remaining: 6, totalPurchased: 10, consumed: 4, sourceType: '购买', qt2: '', healthCoachLaborCost: 50, techBeautyLaborCost: 0, isAllowAccompanied: 0 },
+          { value: 'item002', label: '肩颈调理（疗程）', price: 268, remaining: 3, totalPurchased: 5, consumed: 2, sourceType: '购买', qt2: '科美', healthCoachLaborCost: 30, techBeautyLaborCost: 40, isAllowAccompanied: 0 },
+          { value: 'item003', label: '眼周护理套餐', price: 198, remaining: 3, totalPurchased: 4, consumed: 1, sourceType: '赠送', qt2: '', healthCoachLaborCost: 25, techBeautyLaborCost: 0, isAllowAccompanied: 1 }
+        ],
+        'cust002': [
+          { value: 'item004', label: '面部深层护理（次卡）', price: 380, remaining: 4, totalPurchased: 8, consumed: 4, sourceType: '购买', qt2: '', healthCoachLaborCost: 50, techBeautyLaborCost: 0, isAllowAccompanied: 0 }
+        ],
+        'cust003': [
+          { value: 'item005', label: '肩颈调理（疗程）', price: 268, remaining: 5, totalPurchased: 5, consumed: 0, sourceType: '购买', qt2: '科美', healthCoachLaborCost: 30, techBeautyLaborCost: 40, isAllowAccompanied: 1 }
+        ]
+      },
+      healthWorkerOptions: [
+        { value: 'E001', label: '董顺秀' },
+        { value: 'E002', label: '张丽' },
+        { value: 'E003', label: '贾琳' },
+        { value: 'E004', label: '刘恬恬' }
+      ],
+      techTeacherOptions: [
+        { value: 'kjb001', label: '赵科技老师' },
+        { value: 'kjb002', label: '钱科技老师' }
+      ],
+      roomOptions: [
+        { id: 'R001', name: '1号房' },
+        { id: 'R002', name: '2号房' },
+        { id: 'R003', name: '3号房' },
+        { id: 'R004', name: 'VIP房' }
+      ],
+      availableItems: [],
+      timeOptions: { start: '09:00', step: '00:30', end: '21:00' },
+      rules: {
+        memberId: [{ required: true, message: '请选择会员', trigger: 'change' }],
+        date: [{ required: true, message: '请选择预约日期', trigger: 'change' }],
+        startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+        endTime: [
+          { required: true, message: '请选择结束时间', trigger: 'change' },
+          { validator: (rule, value, cb) => {
+            if (!value || !this.form.startTime) { cb(); return }
+            const [sh, sm] = this.form.startTime.split(':').map(Number)
+            const [eh, em] = value.split(':').map(Number)
+            if (eh < sh || (eh === sh && em <= sm)) cb(new Error('结束时间须晚于开始时间'))
+            else cb()
+          }, trigger: 'change' }
+        ],
+        roomId: [{ required: true, message: '请选择房间', trigger: 'change' }],
+        items: [{ validator: (rule, value, cb) => {
+          const list = this.form.items || []
+          if (!Array.isArray(list) || list.length < 1) cb(new Error('请至少添加 1 个品项'))
+          else if (list.some(x => !x || !x.projectId)) cb(new Error('请完善品项选择'))
+          else if (list.some(x => !x.workers || x.workers.length < 1 || x.workers.some(w => !w.workerId))) cb(new Error('请为每个品项选择服务健康师'))
+          else cb()
+        }, trigger: 'change' }]
+      }
+    }
+  },
+  computed: {
+    visibleProxy: {
+      get() { return this.visible },
+      set(v) { this.$emit('update:visible', v) }
+    },
+    selectedTherapistIds() {
+      const set = new Set()
+      ;(this.form.items || []).forEach(it => {
+        ;(it.workers || []).forEach(w => {
+          if (w && w.workerId) set.add(w.workerId)
+        })
+      })
+      return Array.from(set)
+    },
+    selectedTherapistNames() {
+      const map = new Map((this.healthWorkerOptions || []).map(x => [x.value, x.label]))
+      return this.selectedTherapistIds.map(id => map.get(id) || id).filter(Boolean)
+    },
+    timeOptionsEnd() {
+      const base = { ...this.timeOptions }
+      if (this.form.startTime) {
+        const [h, m] = this.form.startTime.split(':').map(Number)
+        const next = (h * 60 + m + 30) % (24 * 60)
+        base.start = `${String(Math.floor(next / 60)).padStart(2, '0')}:${String(next % 60).padStart(2, '0')}`
+        const [eh, em] = (base.end || '21:00').split(':').map(Number)
+        if (next >= eh * 60 + em) base.end = '22:00'
+      }
+      return base
+    },
+    roomUsageDate() {
+      return this.form.date instanceof Date ? this.formatDate(this.form.date) : this.formatDate(new Date())
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val) this.resetFormForOpen()
+    }
+  },
+  methods: {
+    createEmptyForm() {
+      return {
+        memberId: '',
+        memberName: '',
+        date: new Date(),
+        startTime: '',
+        endTime: '',
+        roomId: '',
+        roomName: '',
+        therapistIds: [],
+        items: [this.createEmptyItem()],
+        remark: ''
+      }
+    },
+    createEmptyItem() {
+      return {
+        projectId: '',
+        label: '',
+        price: 0,
+        remaining: 0,
+        totalPurchased: 0,
+        consumed: 0,
+        sourceType: '',
+        qt2: '',
+        beautyType: '',
+        healthCoachLaborCost: 0,
+        techBeautyLaborCost: 0,
+        isAllowAccompanied: 0,
+        count: 1,
+        workers: [{ workerId: '' }],
+        techTeachers: [],
+        accompanied: []
+      }
+    },
+    resetFormForOpen() {
+      this.form = this.createEmptyForm()
+      this.roomUsageVisible = false
+      this.submitting = false
+      this.availableItems = []
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate()
+      })
+    },
+    onMemberChange(val) {
+      const m = this.memberOptions.find(x => x.value === val)
+      this.form.memberName = m ? m.label : ''
+      this.form.items = [this.createEmptyItem()]
+      this.loadMemberItems(val)
+    },
+    loadMemberItems(memberId) {
+      const items = this.memberItemsMap[memberId] || []
+      this.availableItems = items.map(it => ({
+        ...it,
+        label: `${it.label}（剩余${it.remaining}次）`
+      }))
+    },
+    onRoomChange(val) {
+      const r = this.roomOptions.find(x => x.id === val)
+      this.form.roomName = r ? r.name : ''
+    },
+    handleCancel() {
+      this.visibleProxy = false
+    },
+    formatDate(d) {
+      const dt = d instanceof Date ? d : new Date(d)
+      const y = dt.getFullYear()
+      const m = String(dt.getMonth() + 1).padStart(2, '0')
+      const day = String(dt.getDate()).padStart(2, '0')
+      return `${y}-${m}-${day}`
+    },
+    readStorage() {
+      try {
+        const raw = localStorage.getItem(STORAGE_KEY)
+        if (!raw) return []
+        const arr = JSON.parse(raw)
+        return Array.isArray(arr) ? arr : []
+      } catch (e) {
+        return []
+      }
+    },
+    writeStorage(list) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(list || []))
+    },
+    buildColorKey(id) {
+      const palette = ['blue', 'green', 'orange', 'purple', 'gray']
+      let sum = 0
+      for (let i = 0; i < id.length; i++) sum += id.charCodeAt(i)
+      return palette[sum % palette.length]
+    },
+    handleSubmit() {
+      this.$refs.form.validate(valid => {
+        if (!valid) return
+        this.submitting = true
+        setTimeout(() => {
+          const id = `PCB_${Date.now()}_${Math.floor(Math.random() * 1000)}`
+          const dateStr = this.formatDate(this.form.date)
+          const therapistIds = this.selectedTherapistIds
+          const therapistNames = this.selectedTherapistNames
+          const itemLabels = (this.form.items || []).map(x => {
+            const base = x.label || this.getProjectLabel(x.projectId)
+            const cnt = x.count != null ? `×${x.count}` : ''
+            return `${base}${cnt}`.trim()
+          }).filter(Boolean)
+          const record = {
+            id,
+            memberId: this.form.memberId,
+            memberName: this.form.memberName || '',
+            date: dateStr,
+            startTime: this.form.startTime,
+            endTime: this.form.endTime,
+            roomId: this.form.roomId,
+            roomName: this.form.roomName || '',
+            therapistIds,
+            therapistNames,
+            items: (this.form.items || []).map(x => ({
+              projectId: x.projectId,
+              label: x.label || this.getProjectLabel(x.projectId),
+              count: x.count || 1,
+              workers: Array.isArray(x.workers) ? x.workers.map(w => ({ workerId: w.workerId || '' })) : [],
+              techTeachers: Array.isArray(x.techTeachers) ? x.techTeachers.map(t => ({ teacherId: t.teacherId || '' })) : [],
+              accompanied: Array.isArray(x.accompanied) ? x.accompanied.map(a => ({ workerId: a.workerId || '', count: a.count || 1 })) : []
+            })),
+            itemLabels,
+            remark: this.form.remark || '',
+            status: 'booked',
+            colorKey: this.buildColorKey(id),
+            createdAt: new Date().toISOString()
+          }
+          const list = this.readStorage()
+          list.unshift(record)
+          this.writeStorage(list)
+          this.submitting = false
+          this.$emit('saved', record)
+        }, 500)
+      })
+    }
+    ,
+    addItem() {
+      this.form.items.push(this.createEmptyItem())
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate('items')
+      })
+    },
+    removeItem(idx) {
+      this.form.items.splice(idx, 1)
+      if (!this.form.items.length) this.form.items.push(this.createEmptyItem())
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate('items')
+      })
+    },
+    getProjectLabel(pid) {
+      const hit = this.availableItems.find(x => x.value === pid)
+      if (!hit || !hit.label) return ''
+      return (hit.label || '').split('（剩余')[0] || ''
+    },
+    onProjectChange(idx) {
+      const item = this.form.items[idx]
+      if (!item) return
+      const p = this.availableItems.find(o => o.value === item.projectId)
+      if (p) {
+        item.label = (p.label || '').split('（剩余')[0] || p.label || ''
+        item.price = p.price
+        item.remaining = p.remaining
+        item.totalPurchased = p.totalPurchased
+        item.consumed = p.consumed
+        item.sourceType = p.sourceType
+        item.qt2 = p.qt2
+        item.healthCoachLaborCost = p.healthCoachLaborCost
+        item.techBeautyLaborCost = p.techBeautyLaborCost
+        item.isAllowAccompanied = p.isAllowAccompanied
+        item.count = 1
+        item.workers = [{ workerId: '', performance: '', laborCost: '', count: '' }]
+        item.techTeachers = []
+        item.accompanied = []
+      }
+      this.redistributeWorkers(idx)
+    },
+    onCountChange(idx) {
+      this.redistributeWorkers(idx)
+      this.redistributeTechTeachers(idx)
+    },
+    redistributeWorkers(idx) {
+      const item = this.form.items[idx]
+      if (!item.workers || item.workers.length === 0) return
+      const totalCount = item.count || 0
+      const totalPerf = item.price * totalCount
+      const isKemei = item.qt2 === '科美' && item.beautyType !== 'cell'
+      const isCell = item.qt2 === '科美' && item.beautyType === 'cell'
+      const hasTech = item.techTeachers && item.techTeachers.length > 0
+      const n = item.workers.length
+      if (isKemei || (isCell && hasTech)) {
+        item.workers.forEach(w => {
+          w.performance = (totalPerf / n).toFixed(2)
+          w.laborCost = '0.00'
+          w.count = '0'
+        })
+      } else {
+        const totalLabor = (item.healthCoachLaborCost || 0) * totalCount
+        item.workers.forEach(w => {
+          w.performance = (totalPerf / n).toFixed(2)
+          w.laborCost = (totalLabor / n).toFixed(2)
+          w.count = (totalCount / n).toFixed(2)
+        })
+      }
+    },
+    redistributeTechTeachers(idx) {
+      const item = this.form.items[idx]
+      if (!item.techTeachers || item.techTeachers.length === 0) return
+      const totalCount = item.count || 0
+      const totalPerf = item.price * totalCount
+      const totalLabor = (item.techBeautyLaborCost || 0) * totalCount
+      const n = item.techTeachers.length
+      item.techTeachers.forEach(t => {
+        t.performance = (totalPerf / n).toFixed(2)
+        t.laborCost = (totalLabor / n).toFixed(2)
+        t.count = (totalCount / n).toFixed(2)
+      })
+      this.redistributeWorkers(idx)
+    },
+    addWorker(idx) {
+      this.form.items[idx].workers.push({ workerId: '', performance: '', laborCost: '', count: '' })
+      this.redistributeWorkers(idx)
+    },
+    removeWorker(idx, wi) {
+      this.form.items[idx].workers.splice(wi, 1)
+      this.redistributeWorkers(idx)
+    },
+    addTechTeacher(idx) {
+      this.form.items[idx].techTeachers.push({ teacherId: '', performance: '', laborCost: '', count: '' })
+      this.redistributeTechTeachers(idx)
+    },
+    removeTechTeacher(idx, ti) {
+      this.form.items[idx].techTeachers.splice(ti, 1)
+      this.redistributeTechTeachers(idx)
+    },
+    addAccompanied(idx) {
+      this.form.items[idx].accompanied.push({ workerId: '', count: 1 })
+    },
+    removeAccompanied(idx, ai) {
+      this.form.items[idx].accompanied.splice(ai, 1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ghost-btn {
+  border-radius: 999px !important;
+  background: rgba(239, 246, 255, 0.9) !important;
+  color: #2563eb !important;
+  border-color: rgba(37, 99, 235, 0.18) !important;
+}
+
+/* ====== 内部结构（对齐 ConsumeDialog） ====== */
+.consume-dialog-inner {
+  display: flex;
+  flex-direction: column;
+  max-height: 85vh;
+}
+
+.consume-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 18px 22px 0;
+  padding: 10px 14px;
+  border-radius: 14px;
+  background: rgba(219, 234, 254, 0.96);
+}
+
+.consume-title-wrap {
+  flex: 1;
+}
+
+.consume-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.consume-subtitle {
+  font-size: 12px;
+  color: #475569;
+  margin-top: 2px;
+}
+
+.consume-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.consume-close {
+  flex-shrink: 0;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  color: #64748b;
+  transition: all 0.15s;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.06);
+    color: #0f172a;
+  }
+}
+
+.consume-content {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+}
+
+.consume-form {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.consume-left {
+  flex: 0 0 440px;
+  overflow-y: auto;
+  padding: 10px 16px 10px 22px;
+  border-right: 1px solid rgba(229, 231, 235, 0.6);
+  min-height: 0;
+}
+
+.consume-right {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 22px 10px 16px;
+  min-height: 0;
+}
+
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+  margin: 14px 0 8px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: rgba(241, 245, 249, 0.7);
+
+  i {
+    margin-right: 4px;
+    color: #2563eb;
+  }
+
+  &:first-child {
+    margin-top: 4px;
+  }
+}
+
+.item-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 10px 12px 4px;
+  margin-bottom: 10px;
+  background: rgba(255, 255, 255, 0.6);
+  transition: border-color 0.15s;
+
+  &:hover {
+    border-color: #93c5fd;
+  }
+}
+
+.item-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.item-card-no {
+  font-size: 12px;
+  font-weight: 600;
+  color: #2563eb;
+}
+
+.item-remove-btn {
+  color: #ef4444 !important;
+  font-size: 12px;
+  padding: 0;
+}
+
+.px-info-panel {
+  margin: 4px 0 6px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(241, 245, 249, 0.5);
+  font-size: 12px;
+  color: #475569;
+  line-height: 1.8;
+
+  .px-tag {
+    color: #94a3b8;
+    margin-right: 2px;
+  }
+
+  b {
+    color: #0f172a;
+    font-weight: 600;
+  }
+
+  .remaining {
+    color: #2563eb;
+  }
+}
+
+.worker-section {
+  margin: 2px 0 6px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(241, 245, 249, 0.5);
+}
+
+.worker-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: #475569;
+  font-weight: 500;
+}
+
+.worker-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.worker-select {
+  flex: 1;
+}
+
+.worker-field {
+  width: 120px;
+  flex-shrink: 0;
+}
+
+.worker-field-sm {
+  width: 70px;
+  flex-shrink: 0;
+}
+
+.worker-remove {
+  color: #ef4444 !important;
+  padding: 0;
+}
+
+.add-btn-row {
+  text-align: center;
+  margin-bottom: 6px;
+}
+
+.consume-footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 22px 14px;
+  border-top: 1px solid rgba(229, 231, 235, 0.6);
+}
+
+.footer-summary {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: #64748b;
+
+  b {
+    color: #0f172a;
+  }
+
+  .highlight {
+    color: #2563eb;
+    font-size: 14px;
+  }
+}
+
+.footer-actions {
+  display: flex;
+  gap: 10px;
+}
+
+::v-deep .booking-consume-dialog {
+  max-width: 1200px;
+  margin-top: 8vh !important;
+  border-radius: 20px;
+  padding: 0;
+  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.96) 0, rgba(248, 250, 252, 0.98) 40%, rgba(241, 245, 249, 0.98) 100%);
+  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(22px);
+  -webkit-backdrop-filter: blur(22px);
+}
+
+::v-deep .booking-consume-dialog .el-dialog__header { display: none; }
+::v-deep .booking-consume-dialog .el-dialog__body { padding: 0; }
+
+::v-deep .booking-consume-dialog .el-form-item__label { white-space: nowrap; }
+::v-deep .booking-consume-dialog .el-input__inner {
+  border-radius: 999px;
+  height: 32px;
+  line-height: 32px;
+  border-color: #e5e7eb;
+  background-color: #f9fafb;
+}
+::v-deep .booking-consume-dialog .el-input__inner:focus {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
+}
+::v-deep .booking-consume-dialog .el-textarea__inner {
+  border-radius: 12px;
+  border-color: #e5e7eb;
+  background-color: #f9fafb;
+}
+::v-deep .booking-consume-dialog .el-input-group__prepend {
+  border-radius: 999px 0 0 999px;
+  background: #f1f5f9;
+  border-color: #e5e7eb;
+  padding: 0 10px;
+  color: #64748b;
+}
+::v-deep .booking-consume-dialog .el-input-group .el-input__inner {
+  border-radius: 0 999px 999px 0;
+}
+::v-deep .booking-consume-dialog .el-input-number {
+  .el-input__inner {
+    border-radius: 999px;
+  }
+}
+::v-deep .booking-consume-dialog .el-button--primary {
+  border-radius: 999px;
+  padding: 0 20px;
+  height: 30px;
+  line-height: 30px;
+  background: #2563eb;
+  border-color: #2563eb;
+  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
+  font-size: 12px;
+}
+::v-deep .booking-consume-dialog .el-button--default {
+  border-radius: 999px;
+  padding: 0 18px;
+  height: 30px;
+  line-height: 30px;
+  background: rgba(239, 246, 255, 0.9);
+  color: #2563eb;
+  border-color: rgba(37, 99, 235, 0.18);
+  font-size: 12px;
+}
+::v-deep .booking-consume-dialog .el-form-item {
+  margin-bottom: 12px;
+}
+::v-deep .booking-consume-dialog .el-select {
+  width: 100%;
+}
+</style>
+
diff --git a/store-pc/src/components/room-usage-dialog.vue b/store-pc/src/components/room-usage-dialog.vue
new file mode 100644
index 0000000..b57bb82
--- /dev/null
+++ b/store-pc/src/components/room-usage-dialog.vue
@@ -0,0 +1,268 @@
+<template>
+  <el-dialog
+    :visible.sync="visibleProxy"
+    :show-close="false"
+    width="860px"
+    :close-on-click-modal="false"
+    custom-class="room-usage-dialog"
+    append-to-body
+  >
+    <div class="inner">
+      <div class="header">
+        <div class="title">房态 · {{ date || '—' }}</div>
+        <span class="close" @click="visibleProxy = false"><i class="el-icon-close"></i></span>
+      </div>
+
+      <div class="body">
+        <div class="legend">
+          <span class="legend-item"><i class="dot dot--free"></i>空闲</span>
+          <span class="legend-item"><i class="dot dot--busy"></i>占用</span>
+          <span class="legend-item"><i class="dot dot--slot"></i>30分钟/格</span>
+          <span class="legend-tip">当前为 mock 房态，用于前端闭环演示</span>
+        </div>
+
+        <div class="table">
+          <div class="thead">
+            <div class="cell cell--room">房间</div>
+            <div class="cell cell--grid">
+              <div class="grid">
+                <div v-for="i in 48" :key="i" class="t">
+                  {{ (i - 1) % 2 === 0 ? formatSlotTime(i - 1) : '' }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-for="r in normalizedRooms" :key="r.id" class="row">
+            <div class="cell cell--room">
+              <div class="room-name">{{ r.name }}</div>
+              <div class="room-sub">今日占用 {{ countBusySlots(r.id) }} 格</div>
+            </div>
+            <div class="cell cell--grid">
+              <div class="grid">
+                <div
+                  v-for="i in 48"
+                  :key="i"
+                  :class="['slot', isBusy(r.id, i - 1) ? 'slot--busy' : 'slot--free']"
+                  :title="slotTitle(r.id, i - 1)"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="footer">
+        <el-button size="small" @click="visibleProxy = false">关 闭</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'RoomUsageDialog',
+  props: {
+    visible: { type: Boolean, default: false },
+    date: { type: String, default: '' },
+    rooms: { type: Array, default: () => [] }
+  },
+  data() {
+    return {
+      // mock：key = roomId, value = [{ startSlot, endSlot, label }]
+      mockBusy: {
+        R001: [{ startSlot: 18, endSlot: 22, label: '预约占用' }, { startSlot: 30, endSlot: 34, label: '清洁消杀' }],
+        R002: [{ startSlot: 20, endSlot: 24, label: '预约占用' }],
+        R003: [{ startSlot: 26, endSlot: 28, label: '设备维护' }],
+        R004: [{ startSlot: 32, endSlot: 40, label: 'VIP预约' }]
+      }
+    }
+  },
+  computed: {
+    visibleProxy: {
+      get() { return this.visible },
+      set(v) { this.$emit('update:visible', v) }
+    },
+    normalizedRooms() {
+      if (this.rooms && this.rooms.length) return this.rooms
+      return [
+        { id: 'R001', name: '1号房' },
+        { id: 'R002', name: '2号房' },
+        { id: 'R003', name: '3号房' },
+        { id: 'R004', name: 'VIP房' }
+      ]
+    }
+  },
+  methods: {
+    formatSlotTime(slotIndex) {
+      const h = Math.floor(slotIndex / 2)
+      const m = (slotIndex % 2) * 30
+      return `${String(h).padStart(2, '0')}:${m === 0 ? '00' : '30'}`
+    },
+    isBusy(roomId, slotIndex) {
+      const list = this.mockBusy[roomId] || []
+      return list.some(x => slotIndex >= x.startSlot && slotIndex < x.endSlot)
+    },
+    slotTitle(roomId, slotIndex) {
+      const time = this.formatSlotTime(slotIndex)
+      const list = this.mockBusy[roomId] || []
+      const hit = list.find(x => slotIndex >= x.startSlot && slotIndex < x.endSlot)
+      if (!hit) return `${time} 空闲`
+      return `${time} ${hit.label}`
+    },
+    countBusySlots(roomId) {
+      const list = this.mockBusy[roomId] || []
+      return list.reduce((sum, x) => sum + Math.max((x.endSlot - x.startSlot), 0), 0)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.inner {
+  padding: 18px 22px 14px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 12px;
+  padding: 10px 14px;
+  border-radius: 14px;
+  background: rgba(219, 234, 254, 0.96);
+}
+
+.title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.close {
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  color: #64748b;
+  transition: all 0.15s;
+  &:hover { background: rgba(0, 0, 0, 0.06); color: #0f172a; }
+}
+
+.legend {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: #64748b;
+  margin-bottom: 10px;
+}
+
+.legend-item { display: inline-flex; align-items: center; gap: 6px; }
+.legend-tip { margin-left: auto; color: #94a3b8; }
+
+.dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
+.dot--free { background: rgba(148, 163, 184, 0.35); }
+.dot--busy { background: rgba(239, 68, 68, 0.55); }
+.dot--slot { background: #e2e8f0; }
+
+.table {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.thead, .row {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+}
+
+.cell {
+  padding: 10px 10px;
+  border-right: 1px solid #f1f5f9;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.cell--room {
+  background: #f8fafc;
+}
+
+.room-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.room-sub {
+  font-size: 11px;
+  color: #94a3b8;
+  margin-top: 2px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(48, 1fr);
+  gap: 0;
+  min-height: 24px;
+}
+
+.t {
+  font-size: 9px;
+  color: #94a3b8;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.slot {
+  min-height: 18px;
+  background: #f8fafc;
+}
+
+.slot--free {
+  background: rgba(148, 163, 184, 0.18);
+}
+
+.slot--busy {
+  background: rgba(239, 68, 68, 0.5);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
+  padding-top: 12px;
+  border-top: 1px solid #f1f5f9;
+}
+
+::v-deep .room-usage-dialog {
+  max-width: 860px;
+  margin-top: 7vh !important;
+  border-radius: 20px;
+  padding: 0;
+  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.96) 0, rgba(248, 250, 252, 0.98) 40%, rgba(241, 245, 249, 0.98) 100%);
+  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(22px);
+  -webkit-backdrop-filter: blur(22px);
+}
+::v-deep .room-usage-dialog .el-dialog__header { display: none; }
+::v-deep .room-usage-dialog .el-dialog__body { padding: 0; }
+::v-deep .room-usage-dialog .el-button--default {
+  border-radius: 999px;
+  padding: 0 18px;
+  height: 30px;
+  line-height: 30px;
+  background: rgba(239, 246, 255, 0.9);
+  color: #2563eb;
+  border-color: rgba(37, 99, 235, 0.18);
+  font-size: 12px;
+}
+</style>
+
diff --git a/store-pc/src/views/dashboard/index.vue b/store-pc/src/views/dashboard/index.vue
index 695fdc0..0d954f6 100644
--- a/store-pc/src/views/dashboard/index.vue
+++ b/store-pc/src/views/dashboard/index.vue
@@ -371,6 +371,10 @@
       @action="handleMemberAction"
     />
     <tuoke-lead-dialog :visible.sync="tuokeDialogVisible" />
+    <booking-consume-dialog
+      :visible.sync="bookingConsumeDialogVisible"
+      @saved="handlePreConsumeBookingSaved"
+    />
     <booking-dialog :visible.sync="bookingDialogVisible" :prefill="bookingPrefill" />
     <billing-dialog :visible.sync="billingDialogVisible" :prefill="billingPrefill" />
     <consume-dialog :visible.sync="consumeDialogVisible" />
@@ -433,6 +437,7 @@ import TuokeLeadDialog from '@/components/TuokeLeadDialog.vue'
 import InviteAddDialog from '@/components/InviteAddDialog.vue'
 import CompanyCalendarDialog from '@/components/CompanyCalendarDialog.vue'
 import BookingDialog from '@/components/BookingDialog.vue'
+import BookingConsumeDialog from '@/components/booking-consume-dialog.vue'
 import BillingDialog from '@/components/BillingDialog.vue'
 import ConsumeDialog from '@/components/ConsumeDialog.vue'
 import RefundDialog from '@/components/RefundDialog.vue'
@@ -452,6 +457,7 @@ export default {
     InviteAddDialog,
     CompanyCalendarDialog,
     BookingDialog,
+    BookingConsumeDialog,
     BillingDialog,
     ConsumeDialog,
     RefundDialog,
@@ -797,6 +803,7 @@ export default {
         name: '',
         phone: ''
       },
+      bookingConsumeDialogVisible: false,
       billingDialogVisible: false,
       billingPrefill: {},
       consumeDialogVisible: false,
@@ -1025,8 +1032,7 @@ export default {
         return
       }
       if (module.key === 'booking') {
-        this.bookingPrefill = { name: '', phone: '' }
-        this.bookingDialogVisible = true
+        this.bookingConsumeDialogVisible = true
         return
       }
       if (module.key === 'order') {
@@ -1252,6 +1258,15 @@ export default {
       }
       this.bookingDialogVisible = true
     },
+    handlePreConsumeBookingSaved(payload) {
+      // mock：新建预约消耗单后，直接打开排班便于查看时间块
+      this.$message.success('预约消耗单已保存')
+      this.bookingConsumeDialogVisible = false
+      this.$store.commit('SET_SCHEDULE_DIALOG', true)
+      this.$store.commit('SET_SCHEDULE_DIALOG_MODE', 'view')
+      // payload 可按需用于后续联动（例如定位到某天/某单）
+      void payload
+    },
     handleQuickBilling(item) {
       this.billingPrefill = {
         name: item.name,