完成了基本的门店PC页面的设计

“wangming”
1 parent cb9a18fe
Showing 6 changed files with 1429 additions and 228 deletions
store-pc/src/components/BookingCalendarDialog.vue
store-pc/src/components/CompanyCalendarDialog.vue
store-pc/src/components/EmployeeScheduleDialog.vue
store-pc/src/components/booking-consume-detail-dialog.vue
store-pc/src/components/booking-consume-dialog.vue
store-pc/src/views/dashboard/index.vue
@@ -16,10 +16,11 @@
       <div class="dialog-search">
         <el-form @submit.native.prevent :inline="true" size="small">
           <el-form-item label="预约状态">
-            <el-select v-model="query.F_Status" placeholder="预约状态" clearable style="width:140px">
-              <el-option label="已确认" value="已确认" />
-              <el-option label="已取消" value="已取消" />
-              <el-option label="已预约" value="已预约" />
+            <el-select v-model="query.status" placeholder="预约状态" clearable style="width:160px">
+              <el-option label="已预约" value="booked" />
+              <el-option label="服务中" value="serving" />
+              <el-option label="已完成" value="converted" />
+              <el-option label="已取消" value="cancelled" />
             </el-select>
           </el-form-item>
           <el-form-item>
@@ -44,10 +45,27 @@
           :eventLimit="true"
           allDayText="全天"
           :editable="false"
+          :dayRender="onDayRender"
           @datesRender="datesRender"
+          @dateClick="handleDateClick"
+          @eventClick="handleEventClick"
         />
       </div>
     </div>
+
+    <booking-consume-dialog
+      :visible.sync="consumeVisible"
+      :prefill="consumePrefill"
+      @saved="handleConsumeSaved"
+    />
+    <booking-consume-detail-dialog
+      :visible.sync="detailVisible"
+      :booking="selectedBooking"
+      @cancel="handleDetailCancel"
+      @edit="handleDetailEdit"
+      @start="handleDetailStart"
+      @convert="handleDetailConvert"
+    />
   </el-dialog>
 </template>
@@ -56,36 +74,32 @@ import FullCalendar from &#39;@fullcalendar/vue&#39;
 import dayGridPlugin from '@fullcalendar/daygrid'
 import timeGridPlugin from '@fullcalendar/timegrid'
 import interactionPlugin from '@fullcalendar/interaction'
+import BookingConsumeDialog from '@/components/booking-consume-dialog.vue'
+import BookingConsumeDetailDialog from '@/components/booking-consume-detail-dialog.vue'
-const MOCK_BOOKING = [
-  { id: '1', storeName: '保利', yyrName: '贾琳', gkxm: '范佳佳', yysj: '2026-02-11T11:00:00', yyjs: '2026-02-11T11:30:00', F_Status: '已预约', yyjksName: '贾琳' },
-  { id: '2', storeName: '保利', yyrName: '贾琳', gkxm: '黄仕碧', yysj: '2026-02-11T15:00:00', yyjs: '2026-02-11T15:30:00', F_Status: '已预约', yyjksName: '贾琳' },
-  { id: '3', storeName: '保利', yyrName: '贾琳', gkxm: '赵丽', yysj: '2026-02-11T17:00:00', yyjs: '2026-02-11T17:30:00', F_Status: '已确认', yyjksName: '贾琳' },
-  { id: '4', storeName: '468', yyrName: '刘恬恬', gkxm: '王英', yysj: '2026-02-11T14:00:00', yyjs: '2026-02-11T14:30:00', F_Status: '已预约', yyjksName: '刘恬恬' },
-  { id: '5', storeName: '保利', yyrName: '贾琳', gkxm: '罗建琼', yysj: '2026-02-11T10:30:00', yyjs: '2026-02-11T11:00:00', F_Status: '已确认', yyjksName: '贾琳' },
-  { id: '6', storeName: '保利', yyrName: '贾琳', gkxm: '沈丽', yysj: '2026-02-10T17:00:00', yyjs: '2026-02-10T17:30:00', F_Status: '已预约', yyjksName: '贾琳' },
-  { id: '7', storeName: '静居寺', yyrName: '董顺秀', gkxm: '陈晴', yysj: '2026-02-11T09:30:00', yyjs: '2026-02-11T10:00:00', F_Status: '已取消', yyjksName: '董顺秀' },
-  { id: '8', storeName: '静居寺', yyrName: '董顺秀', gkxm: '胡蝶', yysj: '2026-02-10T17:00:00', yyjs: '2026-02-10T17:30:00', F_Status: '已预约', yyjksName: '董顺秀' },
-  { id: '9', storeName: '静居寺', yyrName: '董顺秀', gkxm: '魏海燕', yysj: '2026-02-10T14:00:00', yyjs: '2026-02-10T14:30:00', F_Status: '已确认', yyjksName: '董顺秀' },
-  { id: '10', storeName: '静居寺', yyrName: '董顺秀', gkxm: '肖丛娇', yysj: '2026-02-10T11:00:00', yyjs: '2026-02-10T11:30:00', F_Status: '已预约', yyjksName: '董顺秀' }
-]
+const STORAGE_KEY = 'store_pc_pre_consume_bookings'
 export default {
   name: 'BookingCalendarDialog',
-  components: { FullCalendar },
+  components: { FullCalendar, BookingConsumeDialog, BookingConsumeDetailDialog },
   props: { visible: { type: Boolean, default: false } },
   data() {
     return {
       loading: false,
-      mockData: MOCK_BOOKING,
-      query: { F_Status: undefined },
+      query: { status: undefined },
       calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
       calendarEvents: [],
       calendarHeader: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' },
       buttonText: { today: '今日', month: '月', week: '周', day: '日' },
       startTime: null,
       endTime: null,
-      calendarHeight: 600
+      calendarHeight: 600,
+      consumeVisible: false,
+      consumePrefill: {},
+      detailVisible: false,
+      selectedBooking: null,
+      bookingList: [],
+      bookingByDate: {}
     }
   },
   computed: {
@@ -97,7 +111,27 @@ export default {
   watch: {
     visible(v) {
       if (v) {
-        this.$nextTick(() => { this.calcHeight(); this.initData() })
+        this.setCurrentMonthRange()
+        this.refreshBookingDataSync()
+        this._installBookingItemClickGuard()
+        this.$nextTick(() => {
+          this.calcHeight()
+          this.initData()
+        })
+        this._clearFirstOpenTimers()
+        const delays = [150, 300, 500, 800]
+        delays.forEach((ms, i) => {
+          const t = setTimeout(() => {
+            if (!this.visibleProxy) return
+            this.refreshBookingDataSync()
+            this.patchAllCells()
+          }, ms)
+          if (!this._firstOpenPatchTimers) this._firstOpenPatchTimers = []
+          this._firstOpenPatchTimers.push(t)
+        })
+      } else {
+        this._clearFirstOpenTimers()
+        this._removeBookingItemClickGuard()
       }
     }
   },
@@ -106,8 +140,128 @@ export default {
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.calcHeight)
+    this._clearFirstOpenTimers()
+    this._removeBookingItemClickGuard()
   },
   methods: {
+    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) {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(list || []))
+      } catch (e) {}
+    },
+    buildDemoDataForCalendar(visibleMonthDate) {
+      // 必须按“当前日历可见月份”生成示例，不能用 activeStart（月视图可能是上月末尾）
+      // 优先用传入的可见月基准日，否则 api.getDate()，再否则 startTime/endTime 中点
+      let base = visibleMonthDate instanceof Date ? visibleMonthDate : null
+      if (!base) {
+        const api = this.$refs.fullCalendar && this.$refs.fullCalendar.getApi && this.$refs.fullCalendar.getApi()
+        base = api && api.getDate ? api.getDate() : null
+      }
+      if (!base) {
+        const s = this.startTime instanceof Date ? this.startTime.getTime() : null
+        const e = this.endTime instanceof Date ? this.endTime.getTime() : null
+        base = (s && e) ? new Date((s + e) / 2) : new Date()
+      }
+      const y = base.getFullYear()
+      const m = base.getMonth() + 1
+      const mm = String(m).padStart(2, '0')
+      const d8 = `${y}-${mm}-08`
+      const d9 = `${y}-${mm}-09`
+      const mk = (id, date, startTime, endTime, memberName, roomName, status, therapistIds, items) => ({
+        id,
+        memberId: 'cust_demo',
+        memberName,
+        date,
+        startTime,
+        endTime,
+        roomId: 'R001',
+        roomName,
+        therapistIds,
+        therapistNames: [],
+        status,
+        colorKey: 'blue',
+        remark: '',
+        items: items || [],
+        itemLabels: (items || []).map(x => `${x.label}×${x.count || 1}`)
+      })
+      return [
+        mk(
+          `PCB_DEMO_${d8}_01`,
+          d8,
+          '09:00',
+          '10:30',
+          '林小纤',
+          '1号房',
+          'booked',
+          ['E001', 'E002'],
+          [
+            { projectId: 'item001', label: '面部深层护理（次卡）', count: 1, workers: [{ workerId: 'E001' }] },
+            { projectId: 'item003', label: '眼周护理套餐', count: 1, workers: [{ workerId: 'E002' }] }
+          ]
+        ),
+        mk(
+          `PCB_DEMO_${d8}_02`,
+          d8,
+          '14:00',
+          '15:30',
+          '王丽',
+          'VIP房',
+          'serving',
+          ['E001'],
+          [{ projectId: 'item002', label: '肩颈调理（疗程）', count: 2, workers: [{ workerId: 'E001' }] }]
+        ),
+        mk(
+          `PCB_DEMO_${d9}_01`,
+          d9,
+          '11:00',
+          '12:00',
+          '张敏',
+          '2号房',
+          'converted',
+          ['E004'],
+          [{ projectId: 'item001', label: '面部深层护理（次卡）', count: 1, workers: [{ workerId: 'E004' }] }]
+        )
+      ]
+    },
+    esc(s) {
+      return String(s == null ? '' : s)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+    },
+    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}`
+    },
+    statusText(status) {
+      if (status === 'booked') return '已预约'
+      if (status === 'serving') return '服务中'
+      if (status === 'converted') return '已完成'
+      if (status === 'cancelled') return '已取消'
+      return '无'
+    },
+    statusColor(status) {
+      if (status === 'booked') return '#409EFF'
+      if (status === 'serving') return '#67C23A'
+      if (status === 'converted') return '#909399'
+      if (status === 'cancelled') return '#F56C6C'
+      return '#909399'
+    },
     calcHeight() {
       this.$nextTick(() => {
         const el = this.$el && this.$el.querySelector('.dialog-content')
@@ -116,44 +270,297 @@ export default {
         }
       })
     },
+    onDayRender(info) {
+      const dateStr = this.formatDate(info.date)
+      const frame = info.el && (info.el.querySelector('.fc-daygrid-day-frame') || info.el.querySelector('.fc-daygrid-day-events') || info.el)
+      if (!frame) return
+      let mount = frame.querySelector('.pc-booking-mount')
+      if (!mount) {
+        mount = document.createElement('div')
+        mount.className = 'pc-booking-mount'
+        frame.appendChild(mount)
+      }
+      mount.innerHTML = this.renderDayCell(dateStr)
+    },
     datesRender(info) {
       const view = info.view
       this.startTime = view.activeStart
       this.endTime = view.activeEnd
+      this.refreshBookingDataSync()
       this.initData()
     },
-    initData() {
-      this.loading = true
-      setTimeout(() => {
-        let filtered = [...this.mockData]
-        if (this.query.F_Status) filtered = filtered.filter(r => r.F_Status === this.query.F_Status)
-        if (this.startTime && this.endTime) {
-          filtered = filtered.filter(r => {
-            const t = new Date(r.yysj).getTime()
-            return t >= this.startTime.getTime() && t < this.endTime.getTime()
+    getCalendarRoot() {
+      // append-to-body 时日历在 document.body，优先从 document 查找
+      const fromDoc = document.querySelector('.booking-calendar-dialog .store-calendar')
+      return fromDoc || (this.$el && this.$el.querySelector('.store-calendar')) || null
+    },
+    getVisibleMonthDate() {
+      if (this.startTime && this.endTime) {
+        const mid = (this.startTime.getTime() + this.endTime.getTime()) / 2
+        return new Date(mid)
+      }
+      return new Date()
+    },
+    refreshBookingDataSync() {
+      const visibleMonth = this.getVisibleMonthDate()
+      let list = this.readStorage()
+      if (!list || list.length === 0) {
+        list = this.buildDemoDataForCalendar(visibleMonth)
+        this.writeStorage(list)
+      }
+      if (this.query.status) list = list.filter(r => r && r.status === this.query.status)
+      if (this.startTime && this.endTime) {
+        const start = this.startTime.getTime()
+        const end = this.endTime.getTime()
+        list = list.filter(r => {
+          const d = r && r.date ? new Date(r.date) : null
+          if (!d || Number.isNaN(d.getTime())) return false
+          const t = d.getTime()
+          return t >= start && t < end
+        })
+        if (list.length === 0) {
+          const existing = this.readStorage()
+          const demo = this.buildDemoDataForCalendar(visibleMonth)
+          const y = visibleMonth.getFullYear()
+          const m = visibleMonth.getMonth()
+          const monthStart = new Date(y, m, 1).getTime()
+          const monthEnd = new Date(y, m + 1, 0, 23, 59, 59, 999).getTime()
+          const outside = (existing || []).filter(r => {
+            const t = r && r.date ? new Date(r.date).getTime() : NaN
+            return Number.isNaN(t) || t < monthStart || t > monthEnd
           })
+          this.writeStorage([...outside, ...demo])
+          list = demo
+          if (this.query.status) list = list.filter(r => r && r.status === this.query.status)
         }
-        this.calendarEvents = filtered.map(item => {
-          let color = '#409EFF'
-          if (item.F_Status === '已确认') color = '#67C23A'
-          else if (item.F_Status === '已取消') color = '#F56C6C'
-          let title = `${item.gkxm || '无'} - ${item.yyrName || '无'}`
-          if (item.yyjksName) title += ` (${item.yyjksName})`
-          return {
-            id: item.id,
-            title,
-            start: item.yysj ? new Date(item.yysj).toISOString() : new Date().toISOString(),
-            end: item.yyjs ? new Date(item.yyjs).toISOString() : new Date().toISOString(),
-            color,
-            editable: false,
-            allDay: false
-          }
+      }
+      this.bookingList = list
+      const map = {}
+      list.forEach(r => {
+        const key = r && r.date ? r.date : ''
+        if (!key) return
+        if (!map[key]) map[key] = []
+        map[key].push(r)
+      })
+      Object.keys(map).forEach(k => {
+        map[k] = map[k].slice().sort((a, b) => {
+          const at = (a && a.startTime) || ''
+          const bt = (b && b.startTime) || ''
+          return String(at).localeCompare(String(bt))
         })
+      })
+      this.bookingByDate = map
+      this.calendarEvents = list.map(item => {
+        const dateStr = item.date || this.formatDate(new Date())
+        const start = item.startTime ? `${dateStr}T${item.startTime}:00` : `${dateStr}T00:00:00`
+        const end = item.endTime ? `${dateStr}T${item.endTime}:00` : start
+        return {
+          id: item.id,
+          title: '',
+          start,
+          end,
+          color: 'transparent',
+          textColor: 'transparent',
+          classNames: ['pc-booking-hidden-event'],
+          editable: false,
+          allDay: false
+        }
+      })
+    },
+    _clearFirstOpenTimers() {
+      if (this._firstOpenPatchTimers && this._firstOpenPatchTimers.length) {
+        this._firstOpenPatchTimers.forEach(t => clearTimeout(t))
+        this._firstOpenPatchTimers = []
+      }
+    },
+    setCurrentMonthRange() {
+      const now = new Date()
+      const y = now.getFullYear()
+      const m = now.getMonth()
+      this.startTime = new Date(y, m, 1, 0, 0, 0, 0)
+      this.endTime = new Date(y, m + 1, 0, 23, 59, 59, 999)
+    },
+    initData() {
+      this.loading = true
+      const run = () => {
+        this.refreshBookingDataSync()
         this.loading = false
-      }, 300)
+        this.$nextTick(() => {
+          this.installDayCellRenderer()
+          this.patchAllCells()
+          const api = this.$refs.fullCalendar && this.$refs.fullCalendar.getApi && this.$refs.fullCalendar.getApi()
+          api && api.rerenderDates && api.rerenderDates()
+          this.$nextTick(() => { this.patchAllCells() })
+          setTimeout(() => { this.patchAllCells() }, 150)
+        })
+      }
+      // append-to-body 时 FullCalendar DOM 稍晚就绪，用 250ms 保证 getCalendarRoot/patchAllCells 能拿到日格
+      const delay = this.startTime && this.endTime ? 250 : 400
+      setTimeout(run, delay)
+    },
+    _installBookingItemClickGuard() {
+      this._removeBookingItemClickGuard()
+      if (this._pcBookingGuardInstalled) return
+      const handler = (e) => {
+        if (!this.visibleProxy) return
+        const target = e.target
+        if (!target || typeof target.closest !== 'function') return
+        const itemEl = target.closest('.pc-booking-item')
+        if (!itemEl) return
+        const dialog = target.closest('.booking-calendar-dialog')
+        if (!dialog) return
+        e.preventDefault()
+        e.stopPropagation()
+        const id = itemEl.getAttribute('data-id')
+        const rec = (this.bookingList || []).find(x => x && x.id === id)
+        if (rec) {
+          this.selectedBooking = { ...rec }
+          this.detailVisible = true
+        }
+      }
+      document.addEventListener('click', handler, true)
+      this._pcBookingGuardHandler = handler
+      this._pcBookingGuardTarget = document
+      this._pcBookingGuardInstalled = true
+    },
+    _removeBookingItemClickGuard() {
+      if (this._pcBookingGuardTarget && this._pcBookingGuardHandler) {
+        this._pcBookingGuardTarget.removeEventListener('click', this._pcBookingGuardHandler, true)
+        this._pcBookingGuardTarget = null
+        this._pcBookingGuardHandler = null
+      }
+      this._pcBookingGuardInstalled = false
+    },
+    installDayCellRenderer() {
+      const root = this.getCalendarRoot()
+      if (!root) return
+      if (this._pcBookingDelegationInstalled) return
+      this._pcBookingDelegationInstalled = true
+
+      // 监听 FullCalendar 月视图切换导致的 DOM 变动，及时重绘日格摘要
+      this._pcBookingMutation && this._pcBookingMutation.disconnect && this._pcBookingMutation.disconnect()
+      this._pcBookingMutation = new MutationObserver(() => {
+        this.patchAllCells()
+      })
+      this._pcBookingMutation.observe(root, { childList: true, subtree: true })
+    },
+    renderDayCell(dateStr) {
+      const list = (this.bookingByDate && this.bookingByDate[dateStr]) ? this.bookingByDate[dateStr] : []
+      const total = list.length
+      if (!total) return ''
+
+      const maxShow = 2
+      const showList = list.slice(0, maxShow)
+      const rest = total - showList.length
+      const itemsHtml = showList.map(r => {
+        const time = `${this.esc(r.startTime || '')}-${this.esc(r.endTime || '')}`.replace(/^-|-$/g, '')
+        const member = this.esc(r.memberName || '无')
+        const room = this.esc(r.roomName || '无')
+        const stText = this.esc(this.statusText(r.status))
+        const stColor = this.statusColor(r.status)
+        const brief = [time, member, room, stText].filter(Boolean).join(' ')
+        return `<div class="pc-booking-item" data-id="${this.esc(r.id)}">
+          <span class="pc-booking-dot" style="background:${stColor}"></span>
+          <span class="pc-booking-brief" title="${brief}">${brief}</span>
+        </div>`
+      }).join('')
+
+      const moreHtml = rest > 0 ? `<div class="pc-booking-more">+${rest}</div>` : ''
+      return `<div class="pc-booking-wrap">
+        <div class="pc-booking-badge">${total}</div>
+        <div class="pc-booking-list">${itemsHtml}${moreHtml}</div>
+      </div>`
+    },
+    patchAllCells() {
+      const root = this.getCalendarRoot()
+      if (!root) return
+      const cells = root.querySelectorAll('.fc-daygrid-day')
+      cells.forEach(cell => {
+        const dateStr = cell.getAttribute('data-date')
+        if (!dateStr) return
+        let mount = cell.querySelector('.pc-booking-mount')
+        if (!mount) {
+          // 不能挂在 day-top（高度小/可能 overflow），挂到 day-frame/事件容器里更稳定
+          const top = cell.querySelector('.fc-daygrid-day-frame') ||
+            cell.querySelector('.fc-daygrid-day-events') ||
+            cell
+          mount = document.createElement('div')
+          mount.className = 'pc-booking-mount'
+          top.appendChild(mount)
+        }
+        mount.innerHTML = this.renderDayCell(dateStr)
+      })
+    },
+    handleDateClick(arg) {
+      // 若点击的是预约条目，不打开新建预约，由 capture 层只打开详情
+      if (arg && arg.jsEvent && arg.jsEvent.target && arg.jsEvent.target.closest && arg.jsEvent.target.closest('.pc-booking-item')) {
+        return
+      }
+      // 点击空白日期格：打开新建预约，预填点击的日期
+      const dateStr = arg && arg.date ? this.formatDate(arg.date) : this.formatDate(new Date())
+      this.consumePrefill = { date: dateStr }
+      this.consumeVisible = true
+    },
+    handleEventClick(arg) {
+      // 点击日历上已有预约事件（透明占位）：打开预约详情
+      const id = arg && arg.event ? arg.event.id : ''
+      if (!id) return
+      const rec = (this.bookingList || []).find(x => x && x.id === id)
+      if (!rec) return
+      this.selectedBooking = { ...rec }
+      this.detailVisible = true
+    },
+    handleConsumeSaved() {
+      this.consumeVisible = false
+      this.initData()
+    },
+    handleDetailCancel(b) {
+      if (!b) return
+      this.$confirm(`确定取消「${b.memberName || '该会员'}」在 ${b.date} ${b.startTime || ''}-${b.endTime || ''} 的预约吗？`, '取消预约确认', {
+        confirmButtonText: '确定',
+        cancelButtonText: '再想想',
+        type: 'warning'
+      }).then(() => {
+        this.updateBookingInStorage(b.id, { ...b, status: 'cancelled' })
+        this.detailVisible = false
+        this.selectedBooking = null
+        this.initData()
+        this.$message.success('已取消预约')
+      }).catch(() => {})
+    },
+    handleDetailEdit(b) {
+      if (!b) return
+      this.consumePrefill = { ...b }
+      this.detailVisible = false
+      this.$nextTick(() => {
+        this.consumeVisible = true
+      })
+    },
+    handleDetailStart(b) {
+      if (!b) return
+      this.updateBookingInStorage(b.id, { ...b, status: 'serving' })
+      this.selectedBooking = { ...this.selectedBooking, status: 'serving' }
+      this.initData()
+      this.$message.success('已开始服务')
+    },
+    handleDetailConvert(b) {
+      if (!b) return
+      this.updateBookingInStorage(b.id, { ...b, status: 'converted' })
+      this.detailVisible = false
+      this.selectedBooking = null
+      this.initData()
+      this.$message.success('已转消耗开单')
+    },
+    updateBookingInStorage(id, updated) {
+      const list = this.readStorage()
+      const idx = list.findIndex(x => x && x.id === id)
+      if (idx >= 0) {
+        list[idx] = { ...list[idx], ...updated }
+        this.writeStorage(list)
+      }
     },
     search() { this.initData() },
-    reset() { this.query.F_Status = undefined; this.initData() }
+    reset() { this.query.status = undefined; this.initData() }
   }
 }
 </script>
@@ -173,6 +580,63 @@ export default {
   .fc-day-header { font-size: 14px !important; color: #64748b !important; font-weight: 700 !important; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; border-bottom: 2px solid #e2e8f0 !important; padding: 12px 8px !important; }
   .fc-unthemed th, .fc-unthemed td { border-color: #f1f5f9; }
 }
+
+.booking-calendar-dialog .store-calendar {
+  .pc-booking-hidden-event { display: none !important; }
+  .pc-booking-mount {
+    position: relative;
+    margin: 4px 6px 0 4px;
+    pointer-events: auto;
+    z-index: 2;
+  }
+  .pc-booking-wrap { position: relative; }
+  .pc-booking-badge {
+    position: absolute;
+    top: -2px;
+    right: 6px;
+    min-width: 16px;
+    height: 16px;
+    line-height: 16px;
+    padding: 0 5px;
+    border-radius: 999px;
+    background: rgba(37, 99, 235, 0.12);
+    color: #2563eb;
+    font-size: 11px;
+    font-weight: 700;
+    text-align: center;
+  }
+  .pc-booking-list { margin-top: 18px; }
+  .pc-booking-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 2px 0;
+    padding: 2px 6px;
+    border-radius: 8px;
+    background: rgba(241, 245, 249, 0.55);
+    cursor: pointer;
+    user-select: none;
+    transition: background 0.15s;
+    &:hover { background: rgba(219, 234, 254, 0.8); }
+  }
+  .pc-booking-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
+  .pc-booking-brief {
+    font-size: 11px;
+    color: #334155;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 16px;
+    max-width: 140px;
+  }
+  .pc-booking-more {
+    font-size: 11px;
+    color: #64748b;
+    padding: 0 6px;
+    margin-top: 2px;
+    white-space: nowrap;
+  }
+}
 </style>
 <style lang="scss" scoped>
@@ -39,6 +39,73 @@
         />
       </div>
     </div>
+
+    <el-dialog
+      :visible.sync="detailVisible"
+      :show-close="false"
+      width="520px"
+      custom-class="company-calendar-detail-dialog"
+      append-to-body
+    >
+      <div v-if="selectedEvent" class="detail-inner">
+        <div class="header">
+          <div class="title">日程详情</div>
+          <span class="close" @click="detailVisible = false"><i class="el-icon-close"></i></span>
+        </div>
+
+        <div class="body">
+          <div class="row"><span class="label">主题</span><span class="value">{{ selectedEvent.title || '无' }}</span></div>
+          <div class="row">
+            <span class="label">类型</span>
+            <span class="value">
+              <span class="type-dot" :style="{ background: typeColorMap[selectedEvent.type] || '#3b82f6' }"></span>
+              {{ selectedEventTypeLabel }}
+            </span>
+          </div>
+          <div class="row"><span class="label">日期</span><span class="value">{{ selectedEventDateStr }}</span></div>
+          <div class="row"><span class="label">时间</span><span class="value">{{ selectedEventTimeRange }}</span></div>
+          <div class="row" v-if="selectedEvent.desc">
+            <span class="label">内容</span>
+            <span class="value value--multiline">{{ selectedEvent.desc }}</span>
+          </div>
+          <div class="row" v-if="selectedEvent.store">
+            <span class="label">门店/地点</span>
+            <span class="value">{{ selectedEvent.store || '无' }}</span>
+          </div>
+          <div class="row row--remark">
+            <span class="label">备注</span>
+            <span class="value value--multiline">{{ selectedEvent.remark || '无' }}</span>
+          </div>
+          <div class="row row--attachments">
+            <span class="label">附件</span>
+            <span class="value value--block">
+              <template v-if="selectedEventAttachments.length">
+                <div
+                  v-for="(att, idx) in selectedEventAttachments"
+                  :key="idx"
+                  class="attachment-item"
+                  :class="'attachment-item--' + getAttachmentFileType(att)"
+                >
+                  <span class="attachment-icon-wrap">
+                    <i :class="'el-icon-' + getAttachmentIcon(att)"></i>
+                  </span>
+                  <span class="attachment-name" :title="att.name || att.fileName">{{ att.name || att.fileName || '附件' }}</span>
+                  <a v-if="att.url" :href="att.url" target="_blank" rel="noopener" class="attachment-link">
+                    <i class="el-icon-download"></i> 下载
+                  </a>
+                  <span v-else class="attachment-link attachment-link--disabled">下载</span>
+                </div>
+              </template>
+              <span v-else class="attachment-empty">无</span>
+            </span>
+          </div>
+        </div>
+
+        <div class="footer">
+          <el-button size="small" @click="detailVisible = false">关 闭</el-button>
+        </div>
+      </div>
+    </el-dialog>
   </el-dialog>
 </template>
@@ -67,11 +134,11 @@ export default {
         // 当天 7 条示例（操作会 + 大会 + 活动），方便预览密集情况
         { id: 'E001', date: todayStr, start: `${todayStr}T09:00:00`, end: `${todayStr}T10:00:00`, type: 'ops', title: '操作会 - 紫荆店' },
         { id: 'E002', date: todayStr, start: `${todayStr}T10:30:00`, end: `${todayStr}T11:30:00`, type: 'ops', title: '操作会 - 西沙店' },
-        { id: 'E003', date: todayStr, start: `${todayStr}T13:00:00`, end: `${todayStr}T14:00:00`, type: 'training', title: '培训会 - 新员工入职营' },
+        { id: 'E003', date: todayStr, start: `${todayStr}T13:00:00`, end: `${todayStr}T14:00:00`, type: 'training', title: '培训会 - 新员工入职营', remark: '请提前准备入职材料', attachments: [{ name: '入职手册.pdf' }, { name: '培训PPT.pptx' }] },
         { id: 'E004', date: todayStr, start: `${todayStr}T14:30:00`, end: `${todayStr}T15:30:00`, type: 'training', title: '培训会 - 科美新品讲解' },
-        { id: 'E005', date: todayStr, start: `${todayStr}T16:00:00`, end: `${todayStr}T17:00:00`, type: 'activity', title: '门店活动 - 紫荆店会员沙龙' },
+        { id: 'E005', date: todayStr, start: `${todayStr}T16:00:00`, end: `${todayStr}T17:00:00`, type: 'activity', title: '门店活动 - 紫荆店会员沙龙', remark: '需准备茶点与签到礼' },
         { id: 'E006', date: todayStr, start: `${todayStr}T18:00:00`, end: `${todayStr}T19:00:00`, type: 'activity', title: '门店活动 - 西沙店体验日' },
-        { id: 'E007', date: todayStr, start: `${todayStr}T19:30:00`, end: `${todayStr}T21:00:00`, type: 'meeting', title: '全体大会 - 本月复盘' },
+        { id: 'E007', date: todayStr, start: `${todayStr}T19:30:00`, end: `${todayStr}T21:00:00`, type: 'meeting', title: '全体大会 - 本月复盘', remark: '各店长携带本月数据报表', attachments: [{ name: '本月经营数据.xlsx' }, { name: '会议议程.pdf' }] },
         // 其它日期：尽量覆盖当月大部分天
         { id: 'E008',  date: `${y}-${m}-01`, start: `${y}-${m}-01T10:00:00`, end: `${y}-${m}-01T12:00:00`, type: 'meeting',  title: '月初经营例会' },
         { id: 'E009',  date: `${y}-${m}-02`, start: `${y}-${m}-02T14:00:00`, end: `${y}-${m}-02T16:00:00`, type: 'ops',     title: '操作会 - 静居寺店' },
@@ -92,7 +159,7 @@ export default {
         { id: 'E024', date: `${y}-${m}-17`, start: `${y}-${m}-17T15:00:00`, end: `${y}-${m}-17T17:00:00`, type: 'activity', title: '门店活动 - 会员答谢宴' },
         { id: 'E025', date: `${y}-${m}-18`, start: `${y}-${m}-18T14:00:00`, end: `${y}-${m}-18T15:30:00`, type: 'training', title: '培训会 - 绩效与辅导' },
         { id: 'E026', date: `${y}-${m}-19`, start: `${y}-${m}-19T10:00:00`, end: `${y}-${m}-19T11:30:00`, type: 'ops',     title: '操作会 - 门店联动' },
-        { id: 'E027', date: `${y}-${m}-20`, start: `${y}-${m}-20T09:30:00`, end: `${y}-${m}-20T11:30:00`, type: 'meeting',  title: '季度全体大会' },
+        { id: 'E027', date: `${y}-${m}-20`, start: `${y}-${m}-20T09:30:00`, end: `${y}-${m}-20T11:30:00`, type: 'meeting',  title: '季度全体大会', remark: '全体参加，线上同步', attachments: [{ name: '季度总结报告.pdf' }, { name: '下季目标分解.xlsx' }] },
         { id: 'E028', date: `${y}-${m}-21`, start: `${y}-${m}-21T19:00:00`, end: `${y}-${m}-21T20:30:00`, type: 'activity', title: '门店活动 - 新品体验会' },
         { id: 'E029', date: `${y}-${m}-22`, start: `${y}-${m}-22T10:00:00`, end: `${y}-${m}-22T11:30:00`, type: 'training', title: '培训会 - 工具使用' },
         { id: 'E030', date: `${y}-${m}-23`, start: `${y}-${m}-23T14:00:00`, end: `${y}-${m}-23T15:30:00`, type: 'ops',     title: '操作会 - 区域复盘' },
@@ -110,6 +177,8 @@ export default {
       startTime: null,
       endTime: null,
       calendarHeight: 720,
+      detailVisible: false,
+      selectedEvent: null,
       typeColorMap: {
         ops: '#6366f1',
         training: '#22c55e',
@@ -134,6 +203,27 @@ export default {
         { type: 'meeting', label: '全体大会', color: this.typeColorMap.meeting },
         { type: 'activity', label: '门店活动', color: this.typeColorMap.activity }
       ]
+    },
+    selectedEventTypeLabel() {
+      if (!this.selectedEvent || !this.selectedEvent.type) return '—'
+      const item = this.legendList.find(x => x.type === this.selectedEvent.type)
+      return item ? item.label : this.selectedEvent.type
+    },
+    selectedEventDateStr() {
+      if (!this.selectedEvent || !this.selectedEvent.start) return '—'
+      return this.formatDate(new Date(this.selectedEvent.start))
+    },
+    selectedEventTimeRange() {
+      if (!this.selectedEvent || !this.selectedEvent.start) return '—'
+      const start = new Date(this.selectedEvent.start)
+      const end = this.selectedEvent.end ? new Date(this.selectedEvent.end) : start
+      const fmt = d => `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
+      return `${fmt(start)} - ${fmt(end)}`
+    },
+    selectedEventAttachments() {
+      if (!this.selectedEvent || !this.selectedEvent.attachments) return []
+      const list = Array.isArray(this.selectedEvent.attachments) ? this.selectedEvent.attachments : []
+      return list.filter(a => a && (a.name || a.fileName))
     }
   },
   watch: {
@@ -196,41 +286,43 @@ export default {
         this.loading = false
       }, 200)
     },
+    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}`
+    },
+    getAttachmentFileType(att) {
+      const name = (att.name || att.fileName || '').toLowerCase()
+      if (name.endsWith('.pdf')) return 'pdf'
+      if (name.endsWith('.xlsx') || name.endsWith('.xls')) return 'xlsx'
+      if (name.endsWith('.pptx') || name.endsWith('.ppt')) return 'pptx'
+      if (name.endsWith('.docx') || name.endsWith('.doc')) return 'doc'
+      if (name.endsWith('.png') || name.endsWith('.jpg') || name.endsWith('.jpeg')) return 'img'
+      return 'default'
+    },
+    getAttachmentIcon(att) {
+      const type = this.getAttachmentFileType(att)
+      if (type === 'img') return 'picture-outline'
+      return 'document'
+    },
     handleEventClick(info) {
       const evt = info && info.event
       if (!evt) return
       const raw = this.companyEvents.find(e => e.id === evt.id) || {}
-      const start = evt.start
-      const end = evt.end
-      const fmt = d => {
-        if (!d) return ''
-        const hh = String(d.getHours()).padStart(2, '0')
-        const mm = String(d.getMinutes()).padStart(2, '0')
-        return `${hh}:${mm}`
+      this.selectedEvent = {
+        id: raw.id,
+        title: raw.title || evt.title,
+        type: (evt.extendedProps && evt.extendedProps.type) || raw.type,
+        start: raw.start,
+        end: raw.end,
+        desc: raw.desc,
+        store: raw.store,
+        remark: raw.remark,
+        attachments: raw.attachments ? [...raw.attachments] : []
       }
-      const timeRange = start ? `${fmt(start)} - ${fmt(end || start)}` : ''
-      const type = (evt.extendedProps && evt.extendedProps.type) || ''
-      const typeText = this.legendList.find(x => x.type === type)?.label || '安排'
-      const dateStr = start ? this.formatDate(start) : ''
-      const subject = raw.title || evt.title || '—'
-      const content = raw.desc || '—'
-      const otherParts = []
-      if (raw.store) otherParts.push(`门店/地点：${raw.store}`)
-      otherParts.push(`类型：${typeText}`)
-      const otherText = otherParts.join('；')
-
-      const html = `
-        <div style="line-height:1.7;font-size:13px;color:#4b5563;">
-          <div><strong>主题：</strong>${subject}</div>
-          <div><strong>内容：</strong>${content}</div>
-          <div><strong>时间：</strong>${dateStr} ${timeRange}</div>
-          <div><strong>其他：</strong>${otherText}</div>
-        </div>
-      `
-      this.$alert(html, '日程详情', {
-        confirmButtonText: '知道了',
-        dangerouslyUseHTMLString: true
-      })
+      this.detailVisible = true
     }
   }
 }
@@ -395,4 +487,216 @@ export default {
 }
 </style>
+<style lang="scss" scoped>
+/* 日程详情弹窗：与 booking-consume-detail-dialog 统一的结构与样式 */
+.detail-inner {
+  padding: 18px 22px 14px;
+}
+
+.detail-inner .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);
+}
+
+.detail-inner .title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.detail-inner .close {
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  color: #64748b;
+  transition: all 0.15s;
+}
+.detail-inner .close:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: #0f172a;
+}
+
+.detail-inner .body {
+  padding: 4px 0 16px;
+}
+
+.detail-inner .row {
+  display: flex;
+  padding: 10px 0;
+  border-bottom: 1px solid #f1f5f9;
+  font-size: 14px;
+}
+
+.detail-inner .label {
+  width: 96px;
+  color: #64748b;
+  flex-shrink: 0;
+}
+
+.detail-inner .value {
+  flex: 1;
+  min-width: 0;
+  color: #111827;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.detail-inner .value--multiline {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.detail-inner .row--remark .value {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.detail-inner .row--attachments .value--block {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.detail-inner .attachment-empty {
+  color: #94a3b8;
+  font-size: 13px;
+}
+.detail-inner .attachment-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-left: 3px solid #94a3b8;
+  font-size: 13px;
+  transition: all 0.2s ease;
+  &:hover {
+    background: #f1f5f9;
+    border-color: #cbd5e1;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  }
+}
+.detail-inner .attachment-item--pdf  { border-left-color: #dc2626; }
+.detail-inner .attachment-item--xlsx { border-left-color: #16a34a; }
+.detail-inner .attachment-item--pptx { border-left-color: #ea580c; }
+.detail-inner .attachment-item--doc  { border-left-color: #2563eb; }
+.detail-inner .attachment-item--img  { border-left-color: #7c3aed; }
+.detail-inner .attachment-icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  flex-shrink: 0;
+  .el-icon-document,
+  .el-icon-picture-outline { font-size: 16px; color: #fff; }
+}
+.detail-inner .attachment-item--pdf .attachment-icon-wrap  { background: linear-gradient(135deg, #dc2626, #b91c1c); }
+.detail-inner .attachment-item--xlsx .attachment-icon-wrap { background: linear-gradient(135deg, #16a34a, #15803d); }
+.detail-inner .attachment-item--pptx .attachment-icon-wrap { background: linear-gradient(135deg, #ea580c, #c2410c); }
+.detail-inner .attachment-item--doc .attachment-icon-wrap  { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
+.detail-inner .attachment-item--img .attachment-icon-wrap  { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
+.detail-inner .attachment-item--default .attachment-icon-wrap { background: linear-gradient(135deg, #64748b, #475569); }
+.detail-inner .attachment-name {
+  flex: 1;
+  min-width: 0;
+  color: #334155;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.detail-inner .attachment-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 8px;
+  background: rgba(37, 99, 235, 0.1);
+  color: #2563eb;
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+  transition: background 0.2s;
+  .el-icon-download { font-size: 12px; }
+  &:hover {
+    background: rgba(37, 99, 235, 0.18);
+    color: #1d4ed8;
+  }
+  &.attachment-link--disabled {
+    cursor: default;
+    color: #94a3b8;
+    background: rgba(148, 163, 184, 0.15);
+    pointer-events: none;
+    &:hover { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
+  }
+}
+
+.detail-inner .type-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+.detail-inner .footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 12px;
+  border-top: 1px solid #f1f5f9;
+}
+</style>
+
+<style lang="scss" scoped>
+::v-deep .company-calendar-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 .company-calendar-detail-dialog .el-dialog__header { display: none; }
+::v-deep .company-calendar-detail-dialog .el-dialog__body { padding: 0; }
+::v-deep .company-calendar-detail-dialog .el-button--primary,
+::v-deep .company-calendar-detail-dialog .el-button--default {
+  border-radius: 999px;
+  padding: 0 18px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 12px;
+}
+::v-deep .company-calendar-detail-dialog .el-button--default {
+  background: rgba(239, 246, 255, 0.9);
+  color: #2563eb;
+  border-color: rgba(37, 99, 235, 0.18);
+}
+::v-deep .company-calendar-detail-dialog .el-button--primary {
+  background: #2563eb;
+  border-color: #2563eb;
+  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
+}
+</style>
+
@@ -31,11 +31,19 @@
           >{{ d.weekday }} {{ d.dateStr }}</span>
         </div>
         <div class="schedule-legend">
-          <span class="legend-item"><i class="legend-dot legend-dot--booked"></i>已预约</span>
-          <span class="legend-item"><i class="legend-dot legend-dot--confirmed"></i>已确认</span>
-          <span class="legend-item"><i class="legend-dot legend-dot--leave"></i>请假</span>
-          <span class="legend-item"><i class="legend-dot legend-dot--vacation"></i>休假</span>
-          <span class="legend-item"><i class="legend-dot legend-dot--rest"></i>休息</span>
+          <span class="legend-group">
+            <span class="legend-group__title">预约状态</span>
+            <span class="legend-item"><i class="legend-dot legend-dot--booked"></i>已预约</span>
+            <span class="legend-item"><i class="legend-dot legend-dot--serving"></i>服务中</span>
+            <span class="legend-item"><i class="legend-dot legend-dot--completed"></i>已完成</span>
+          </span>
+          <span class="legend-divider"></span>
+          <span class="legend-group">
+            <span class="legend-group__title">人事状态</span>
+            <span class="legend-item"><i class="legend-dot legend-dot--leave"></i>请假</span>
+            <span class="legend-item"><i class="legend-dot legend-dot--vacation"></i>休假</span>
+          </span>
+          <span class="legend-divider"></span>
           <span class="legend-item"><i class="legend-dot legend-dot--slot"></i>30分钟/格</span>
         </div>
       </div>
@@ -103,34 +111,6 @@
       </div>
     </div>
-    <!-- 预约详情弹窗：风格与主弹窗统一（旧预约 mock） -->
-    <el-dialog
-      :visible.sync="detailDialogVisible"
-      width="440px"
-      append-to-body
-      custom-class="schedule-detail-dialog"
-      :show-close="false"
-      :close-on-click-modal="false"
-    >
-      <div v-if="selectedBooking" class="booking-detail-inner">
-        <div class="booking-detail-header">
-          <div class="booking-detail-title">预约详情</div>
-          <span class="booking-detail-close" @click="detailDialogVisible = false"><i class="el-icon-close"></i></span>
-        </div>
-        <div class="booking-detail-body">
-          <div class="detail-row"><span class="label">会员姓名</span><span>{{ selectedBooking.customerName }}</span></div>
-          <div class="detail-row"><span class="label">预约时间</span><span>{{ selectedBooking.timeRange }}</span></div>
-          <div class="detail-row"><span class="label">预约项目</span><span>{{ selectedBooking.project || '—' }}</span></div>
-          <div class="detail-row"><span class="label">状态</span><span :class="'status-' + (selectedBooking.status === '已确认' ? 'confirmed' : 'booked')">{{ selectedBooking.status }}</span></div>
-          <div class="detail-row" v-if="selectedBooking.remark"><span class="label">备注</span><span>{{ selectedBooking.remark }}</span></div>
-        </div>
-        <div class="booking-detail-footer">
-          <el-button size="small" @click="detailDialogVisible = false">关 闭</el-button>
-          <el-button type="primary" size="small" @click="openEditBooking">编 辑</el-button>
-        </div>
-      </div>
-    </el-dialog>
-
     <!-- 添加预约：复用新建预约弹窗，仅默认健康师、日期、时间 -->
     <BookingDialog
       :visible.sync="addBookingDialogVisible"
@@ -143,15 +123,16 @@
       :visible.sync="preConsumeDetailVisible"
       :booking="selectedPreConsumeBooking"
       @cancel="handlePreConsumeCancel"
+      @edit="handlePreConsumeEdit"
       @start="handlePreConsumeStart"
       @convert="handlePreConsumeConvert"
     />
-    <!-- 转消耗：复用现有 ConsumeDialog（仅 mock 预填） -->
-    <consume-dialog
-      :visible.sync="consumeDialogVisible"
-      :prefill="consumePrefill"
-      @submitted="handleConsumeSubmitted"
+    <!-- 修改预约：复用预约消耗单弹窗，编辑同一条记录 -->
+    <booking-consume-dialog
+      :visible.sync="bookingConsumeDialogVisible"
+      :prefill="bookingConsumePrefill"
+      @saved="handlePreConsumeBookingUpdated"
     />
   </el-dialog>
 </template>
@@ -159,13 +140,14 @@
 <script>
 import BookingDialog from '@/components/BookingDialog.vue'
 import BookingConsumeDetailDialog from '@/components/booking-consume-detail-dialog.vue'
-import ConsumeDialog from '@/components/ConsumeDialog.vue'
+import BookingConsumeDialog from '@/components/booking-consume-dialog.vue'
 const PRE_CONSUME_STORAGE_KEY = 'store_pc_pre_consume_bookings'
+const CONSUME_PREFILL_ONCE_KEY = 'store_pc_consume_prefill_once'
 export default {
   name: 'EmployeeScheduleDialog',
-  components: { BookingDialog, BookingConsumeDetailDialog, ConsumeDialog },
+  components: { BookingDialog, BookingConsumeDetailDialog, BookingConsumeDialog },
   props: {
     visible: { type: Boolean, default: false },
     openMode: { type: String, default: 'view' }
@@ -174,17 +156,15 @@ export default {
     return {
       weekStart: null,
       selectedDay: null,
-      detailDialogVisible: false,
       addBookingDialogVisible: false,
-      selectedBooking: null,
       addBookingPrefill: {},
       dragState: null,
       preConsumeBookings: [],
       activePreConsumeId: '',
       preConsumeDetailVisible: false,
       selectedPreConsumeBooking: null,
-      consumeDialogVisible: false,
-      consumePrefill: {},
+      bookingConsumeDialogVisible: false,
+      bookingConsumePrefill: {},
       employeeList: [
         { id: 'E001', name: '董顺秀', role: '健康师' },
         { id: 'E002', name: '张丽', role: '健康师' },
@@ -202,26 +182,8 @@ export default {
       },
       // 员工当日状态：key = employeeId_dayOffset, value = { type: 'normal'|'leave'|'vacation'|'rest', text, slotStart?, slotEnd? }
       // slotStart/slotEnd 为可选，表示半天请假/休假的时段（slot 索引 0-47）
-      employeeDayStatus: {
-        'E003_0': { type: 'leave', text: '事假' },
-        'E002_1': { type: 'vacation', text: '年假' },
-        'E004_1': { type: 'leave', text: '事假(半天)', slotStart: 18, slotEnd: 24 }
-      },
-      bookings: [
-        { id: 'B1', employeeId: 'E001', dayOffset: 0, slotStart: 18, slotEnd: 20, customerName: '刘泽蓉', customerPhone: '159****8353', project: '美拉-面部', status: '已确认', remark: '' },
-        { id: 'B2', employeeId: 'E001', dayOffset: 0, slotStart: 26, slotEnd: 30, customerName: '林晓薇', customerPhone: '138****8801', project: '逆龄胶原-眼部', status: '已预约', remark: '' },
-        { id: 'B3', employeeId: 'E001', dayOffset: 0, slotStart: 34, slotEnd: 36, customerName: '陈美玲', customerPhone: '139****2233', project: '生命之波', status: '已确认', remark: '' },
-        { id: 'B4', employeeId: 'E001', dayOffset: 1, slotStart: 18, slotEnd: 20, customerName: '张芳芳', status: '已预约', project: '面部护理' },
-        { id: 'B5', employeeId: 'E001', dayOffset: 1, slotStart: 22, slotEnd: 24, customerName: '王晓燕', status: '已预约', project: '眼周护理' },
-        { id: 'B6', employeeId: 'E002', dayOffset: 0, slotStart: 20, slotEnd: 22, customerName: '李明珠', status: '已确认', project: '精雕' },
-        { id: 'B7', employeeId: 'E002', dayOffset: 0, slotStart: 28, slotEnd: 32, customerName: '周丽', status: '已预约', project: '微雕-面部' },
-        { id: 'B8', employeeId: 'E002', dayOffset: 2, slotStart: 18, slotEnd: 22, customerName: '赵美华', status: '已确认', project: '逆龄胶原' },
-        { id: 'B9', employeeId: 'E003', dayOffset: 0, slotStart: 18, slotEnd: 19, customerName: '罗建琼', status: '已确认', project: '美拉-面部' },
-        { id: 'B10', employeeId: 'E003', dayOffset: 0, slotStart: 30, slotEnd: 34, customerName: '范佳佳', status: '已预约', project: 'CELL神经' },
-        { id: 'B11', employeeId: 'E003', dayOffset: 0, slotStart: 34, slotEnd: 36, customerName: '黄仕碧', status: '已预约', project: '生命之波' },
-        { id: 'B12', employeeId: 'E004', dayOffset: 0, slotStart: 28, slotEnd: 30, customerName: '王英', status: '已预约', project: '面部护理' },
-        { id: 'B13', employeeId: 'E004', dayOffset: 3, slotStart: 20, slotEnd: 24, customerName: '沈丽', status: '已确认', project: '眼周护理' }
-      ]
+      employeeDayStatus: {},
+      bookings: []
     }
   },
   computed: {
@@ -326,8 +288,25 @@ export default {
   mounted() {
     this.initWeek()
     this.loadPreConsumeBookings()
+    this._preConsumeUpdatedHandler = () => {
+      // 同一页面内 localStorage 更新不会触发 storage 事件，用自定义事件做刷新
+      if (this.visibleProxy) this.loadPreConsumeBookings()
+    }
+    try {
+      window.addEventListener('store_pc_pre_consume_bookings_updated', this._preConsumeUpdatedHandler)
+    } catch (e) {}
+  },
+  beforeDestroy() {
+    try {
+      this._preConsumeUpdatedHandler && window.removeEventListener('store_pc_pre_consume_bookings_updated', this._preConsumeUpdatedHandler)
+    } catch (e) {}
   },
   methods: {
+    bookingStatusClass(status) {
+      if (status === '服务中') return 'serving'
+      if (status === '已完成') return 'completed'
+      return 'booked'
+    },
     readPreConsumeStorage() {
       try {
         const raw = localStorage.getItem(PRE_CONSUME_STORAGE_KEY)
@@ -343,7 +322,124 @@ export default {
     },
     loadPreConsumeBookings() {
       const list = this.readPreConsumeStorage()
+      if (!list || list.length === 0) {
+        const seeded = this.buildSamplePreConsumeBookings()
+        this.writePreConsumeStorage(seeded)
+        this.preConsumeBookings = seeded
+        this.seedEmployeeDayStatus()
+        return
+      }
       this.preConsumeBookings = list
+      this.seedEmployeeDayStatus()
+    },
+    seedEmployeeDayStatus() {
+      // 仅作为示例数据：区分“人事状态（请假/休假）”与“预约状态（已预约/服务中/已完成）”
+      // key = employeeId_dayOffset
+      this.employeeDayStatus = {
+        // 3/8（本周 dayOffset=0）示例：E003 请假（整天）
+        'E003_0': { type: 'leave', text: '请假' },
+        // 3/9（dayOffset=1）示例：E002 休假（整天）
+        'E002_1': { type: 'vacation', text: '休假' },
+        // 3/8（dayOffset=0）示例：E004 半天请假（09:00-12:00）
+        'E004_0': { type: 'leave', text: '请假(半天)', slotStart: 18, slotEnd: 24 }
+      }
+    },
+    buildSamplePreConsumeBookings() {
+      // 按当前周（weekStart）生成示例预约消耗单，确保 3/8（dayOffset=0）有数据
+      const fmtDate = (d) => {
+        const y = d.getFullYear()
+        const m = String(d.getMonth() + 1).padStart(2, '0')
+        const day = String(d.getDate()).padStart(2, '0')
+        return `${y}-${m}-${day}`
+      }
+      const day0 = new Date(this.weekStart)
+      const day1 = new Date(this.weekStart); day1.setDate(day1.getDate() + 1)
+      const day2 = new Date(this.weekStart); day2.setDate(day2.getDate() + 2)
+      const d0 = fmtDate(day0)
+      const d1 = fmtDate(day1)
+      const d2 = fmtDate(day2)
+
+      const mk = (id, date, startTime, endTime, memberName, roomName, therapistIds, status, colorKey, items) => ({
+        id,
+        memberId: 'cust_demo',
+        memberName,
+        date,
+        startTime,
+        endTime,
+        roomId: 'R001',
+        roomName,
+        therapistIds,
+        therapistNames: therapistIds.map(tid => this.employeeList.find(e => e.id === tid)?.name).filter(Boolean),
+        status,
+        colorKey,
+        remark: '',
+        itemLabels: (items || []).map(x => `${x.label}×${x.count}`),
+        items
+      })
+
+      return [
+        // 3/8：已预约（多健康师）
+        mk(
+          'PCB_DEMO_0308_01',
+          d0,
+          '09:00',
+          '10:30',
+          '林小纤',
+          '1号房',
+          ['E001', 'E002'],
+          'booked',
+          'blue',
+          [
+            { projectId: 'item001', label: '面部深层护理（次卡）', count: 1, workers: [{ workerId: 'E001' }] },
+            { projectId: 'item003', label: '眼周护理套餐', count: 1, workers: [{ workerId: 'E002' }] }
+          ]
+        ),
+        // 3/8：服务中
+        mk(
+          'PCB_DEMO_0308_02',
+          d0,
+          '14:00',
+          '15:30',
+          '王丽',
+          'VIP房',
+          ['E001'],
+          'serving',
+          'orange',
+          [
+            { projectId: 'item002', label: '肩颈调理（疗程）', count: 2, workers: [{ workerId: 'E001' }] }
+          ]
+        ),
+        // 3/9：已完成
+        mk(
+          'PCB_DEMO_0309_01',
+          d1,
+          '11:00',
+          '12:00',
+          '张敏',
+          '2号房',
+          ['E004'],
+          'converted',
+          'green',
+          [
+            { projectId: 'item001', label: '面部深层护理（次卡）', count: 1, workers: [{ workerId: 'E004' }] }
+          ]
+        ),
+        // 3/10：已预约
+        mk(
+          'PCB_DEMO_0310_01',
+          d2,
+          '16:00',
+          '17:00',
+          '赵美华',
+          '3号房',
+          ['E002', 'E004'],
+          'booked',
+          'purple',
+          [
+            { projectId: 'item003', label: '眼周护理套餐', count: 1, workers: [{ workerId: 'E002' }, { workerId: 'E004' }] }
+          ]
+        )
+      ]
     },
     findPreConsumeForSlot(empId, date, slotIndex) {
       const list = this.preConsumeBookingsWithDate
@@ -358,7 +454,7 @@ export default {
     preConsumeStatusClass(status) {
       const s = status || 'booked'
       if (s === 'serving') return 'slot--preconsume-serving'
-      if (s === 'converted') return 'slot--preconsume-converted'
+      if (s === 'converted') return 'slot--preconsume-converted' // 已完成（示例：转消耗后）
       if (s === 'cancelled') return 'slot--preconsume-cancelled'
       return 'slot--preconsume-booked'
     },
@@ -441,11 +537,16 @@ export default {
       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 (slotIndex === pcb.slotStart) c += ' slot--resize-start slot--preconsume-edge'
+        if (slotIndex === pcb.slotEnd - 1) c += ' slot--resize-end slot--preconsume-edge'
         if (this.activePreConsumeId) {
-          if (pcb.id === this.activePreConsumeId) c += ' slot--same-active'
-          else c += ' slot--dimmed'
+          // 仅对“其他单子”做淡化；当前选中的同单保持正常显示
+          if (pcb.id === this.activePreConsumeId) {
+            // 仅在块两端加高亮描边，避免整块出现密集分割线
+            if (slotIndex === pcb.slotStart || slotIndex === pcb.slotEnd - 1) c += ' slot--same-active'
+          } else {
+            c += ' slot--dimmed'
+          }
         }
         return c
       }
@@ -456,7 +557,9 @@ export default {
         slotIndex < x.slotEnd
       )
       if (b) {
-        let c = b.status === '已确认' ? 'slot--confirmed' : 'slot--booked'
+        let c = 'slot--booked'
+        if (b.status === '服务中') c = 'slot--serving'
+        else if (b.status === '已完成') c = 'slot--completed'
         if (slotIndex === b.slotStart) c += ' slot--resize-start'
         if (slotIndex === b.slotEnd - 1) c += ' slot--resize-end'
         return c
@@ -490,25 +593,61 @@ export default {
       if (list.length === 0) return '当日无预约 · 点击日期查看详情'
       return list.map(x => `${x.customerName} ${x.timeRange}`).join('\n') + '\n点击日期查看详情'
     },
-    openEditBooking() {
-      if (!this.selectedBooking) return
-      const b = this.selectedBooking
-      const [startStr] = (b.timeRange || '').split('-')
-      this.addBookingPrefill = {
-        yyjks: b.employeeId,
-        yyrq: new Date(b.date + 'T12:00:00'),
-        yysj: startStr ? startStr.trim() : '',
-        yysjEnd: (b.timeRange || '').split('-')[1]?.trim() || '',
-        editBookingId: b.id,
-        gkxm: b.customerName,
-        yytyxm: b.project
-      }
-      this.detailDialogVisible = false
-      this.addBookingDialogVisible = true
+    toSlotIndex(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)
     },
     handleSlotMouseDown(e, emp, date, slotIndex) {
       const pcb = this.findPreConsumeForSlot(emp.id, date, slotIndex)
       if (pcb) {
+        // 仅允许从两端拖动调整时长；中间点击仅查看详情
+        const cls = this.slotClass(emp.id, date, slotIndex)
+        const isResizeStart = cls.includes('slot--resize-start')
+        const isResizeEnd = cls.includes('slot--resize-end')
+        if (this.selectedDay && (isResizeStart || isResizeEnd)) {
+          const edge = isResizeStart ? 'start' : 'end'
+          this.dragState = { type: 'preconsume_resize', preId: pcb.id, edge, employeeId: emp.id, date }
+          const originalStart = pcb.startTime
+          const originalEnd = pcb.endTime
+          const onMove = (ev) => {
+            const slotEl = document.elementFromPoint(ev.clientX, ev.clientY)?.closest('.slot')
+            if (!slotEl) return
+            const row = slotEl.closest('.schedule-row')
+            const empName = row?.querySelector('.employee-name')?.textContent
+            const empObj = this.employeeList.find(e => e.name === empName)
+            if (!empObj || empObj.id !== this.dragState.employeeId) return
+            const idx = Array.from(slotEl.parentElement?.children || []).indexOf(slotEl)
+            if (idx < 0 || idx >= 48) return
+
+            const current = (this.preConsumeBookingsWithDate || []).find(x => x.id === this.dragState.preId)
+            if (!current) return
+            const startSlot = this.toSlotIndex(current.startTime) ?? current.slotStart
+            const endSlot = this.toSlotIndex(current.endTime) ?? current.slotEnd
+            if (this.dragState.edge === 'start') {
+              const newStart = Math.min(idx, (endSlot || 1) - 1)
+              const startTime = this.formatSlotTime(Math.max(newStart, 0))
+              this.updatePreConsumeRecord({ id: current.id, startTime })
+            } else {
+              const newEnd = Math.max(idx + 1, (startSlot || 0) + 1)
+              const endTime = this.formatSlotTime(Math.min(newEnd, 48))
+              this.updatePreConsumeRecord({ id: current.id, endTime })
+            }
+          }
+          const onUp = () => {
+            document.removeEventListener('mousemove', onMove)
+            document.removeEventListener('mouseup', onUp)
+            this.dragState = null
+            // 若未发生变化，保持不弹窗
+            const cur = (this.preConsumeBookings || []).find(x => x.id === pcb.id)
+            if (!cur || (cur.startTime === originalStart && cur.endTime === originalEnd)) return
+          }
+          document.addEventListener('mousemove', onMove)
+          document.addEventListener('mouseup', onUp)
+          return
+        }
+
         this.activePreConsumeId = pcb.id
         this.selectedPreConsumeBooking = pcb
         this.preConsumeDetailVisible = true
@@ -522,10 +661,6 @@ export default {
       )
       // 周视图下允许点击块直接查看详情，不支持拖动修改/新建
       if (!this.selectedDay) {
-        if (b) {
-          this.selectedBooking = b
-          this.detailDialogVisible = true
-        }
         return
       }
       if (b) {
@@ -677,6 +812,17 @@ export default {
       this.preConsumeBookings = list
       return updated
     },
+    updatePreConsumeRecord(record) {
+      if (!record || !record.id) return null
+      const list = this.readPreConsumeStorage()
+      const idx = list.findIndex(x => x && x.id === record.id)
+      if (idx < 0) return null
+      const updated = { ...list[idx], ...record }
+      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} 的预约吗？`, '取消预约确认', {
@@ -695,30 +841,41 @@ export default {
       if (updated) this.selectedPreConsumeBooking = updated
       this.$message.success('已开始服务')
     },
+    handlePreConsumeEdit(b) {
+      if (!b) return
+      this.bookingConsumePrefill = { ...b }
+      this.preConsumeDetailVisible = false
+      this.$nextTick(() => {
+        this.bookingConsumeDialogVisible = true
+      })
+    },
+    handlePreConsumeBookingUpdated(record) {
+      const updated = this.updatePreConsumeRecord(record) || record
+      this.selectedPreConsumeBooking = updated
+      this.bookingConsumeDialogVisible = false
+      this.$message.success('预约消耗单已更新')
+    },
     handlePreConsumeConvert(b) {
       if (!b) return
       const updated = this.updatePreConsumeStatus(b.id, 'converted') || b
       this.selectedPreConsumeBooking = updated
       this.preConsumeDetailVisible = false
-
-      this.consumePrefill = {
+      const prefillOnce = {
         memberId: updated.memberId,
         name: updated.memberName,
         consumeDate: updated.date,
         remark: `转自预约消耗单：${updated.id}${updated.remark ? ' · ' + updated.remark : ''}`,
-        therapistIds: updated.therapistIds,
+        therapistIds: Array.from(new Set([].concat(updated.therapistIds || []))).filter(Boolean),
         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('已完成转消耗（示例）')
+      try {
+        localStorage.setItem(CONSUME_PREFILL_ONCE_KEY, JSON.stringify(prefillOnce))
+      } catch (e) {}
+      this.$router.push({ path: '/dashboard', query: { openConsume: '1' } })
     }
   }
 }
@@ -862,9 +1019,33 @@ export default {
 .schedule-legend {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 14px;
   font-size: 12px;
   color: #64748b;
+  flex-wrap: wrap;
+}
+
+.legend-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 10px;
+  border-radius: 10px;
+  background: rgba(241, 245, 249, 0.75);
+}
+
+.legend-group__title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+  margin-right: 2px;
+  white-space: nowrap;
+}
+
+.legend-divider {
+  width: 1px;
+  height: 18px;
+  background: rgba(226, 232, 240, 0.9);
 }
 .legend-item {
@@ -881,10 +1062,10 @@ export default {
 }
 .legend-dot--booked { background: #3b82f6; }
-.legend-dot--confirmed { background: #22c55e; }
-.legend-dot--leave { background: #f97316; }
+.legend-dot--serving { background: #f97316; }
+.legend-dot--completed { background: #22c55e; }
+.legend-dot--leave { background: #94a3b8; }
 .legend-dot--vacation { background: #8b5cf6; }
-.legend-dot--rest { background: #94a3b8; }
 .legend-dot--slot { background: #e2e8f0; }
 .schedule-wrap {
@@ -1029,9 +1210,8 @@ export default {
   border-radius: 4px;
   display: inline-block;
   &--normal { background: #f1f5f9; color: #64748b; }
-  &--leave { background: rgba(249, 115, 22, 0.15); color: #ea580c; }
+  &--leave { background: rgba(148, 163, 184, 0.2); color: #64748b; }
   &--vacation { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
-  &--rest { background: rgba(148, 163, 184, 0.2); color: #64748b; }
 }
 .day-slots {
@@ -1044,7 +1224,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba(249, 115, 22, 0.08);
+    background: rgba(148, 163, 184, 0.16);
   }
   &--vacation {
     background: rgba(139, 92, 246, 0.08);
@@ -1054,13 +1234,15 @@ export default {
 .leave-cover {
   font-size: 12px;
-  color: #ea580c;
+  color: #475569;
   font-weight: 500;
 }
 .slot {
   min-height: 20px;
   background: #f8fafc;
+  /* 默认格子边线（预占用块会覆盖为透明以减少分割线） */
+  border: 1px solid rgba(241, 245, 249, 0.95);
   &--clickable {
     cursor: pointer;
@@ -1077,7 +1259,16 @@ export default {
   &:not(.slot--resize-start):not(.slot--resize-end) { border-radius: 0; }
 }
-.slot--confirmed {
+.slot--serving {
+  background: rgba(249, 115, 22, 0.5);
+  &:hover { background: rgba(249, 115, 22, 0.7); }
+  &.slot--resize-start.slot--resize-end { border-radius: 2px; }
+  &.slot--resize-start:not(.slot--resize-end) { border-radius: 2px 0 0 2px; }
+  &.slot--resize-end:not(.slot--resize-start) { border-radius: 0 2px 2px 0; }
+  &:not(.slot--resize-start):not(.slot--resize-end) { border-radius: 0; }
+}
+
+.slot--completed {
   background: rgba(34, 197, 94, 0.5);
   &:hover { background: rgba(34, 197, 94, 0.7); }
   &.slot--resize-start.slot--resize-end { border-radius: 2px; }
@@ -1087,7 +1278,7 @@ export default {
 }
 .slot--leave {
-  background: rgba(249, 115, 22, 0.35);
+  background: rgba(148, 163, 184, 0.35);
 }
 .slot--in-drag {
@@ -1102,6 +1293,10 @@ export default {
   position: relative;
   background: rgba(37, 99, 235, 0.42);
   &:hover { background: rgba(37, 99, 235, 0.6); }
+  /* 让块内部看起来是“整块”，压掉密集分割线 */
+  border-color: transparent !important;
+  border-width: 0 !important;
+  box-shadow: none;
 }
 .slot--preconsume-booked { }
 .slot--preconsume-serving {
@@ -1117,20 +1312,39 @@ export default {
   &: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--preconsume-color-blue { box-shadow: none; }
+.slot--preconsume-color-green { box-shadow: none; }
+.slot--preconsume-color-orange { box-shadow: none; }
+.slot--preconsume-color-purple { box-shadow: none; }
+.slot--preconsume-color-gray { box-shadow: none; }
+
+/* 仅在块两端做轻微色条提示 */
+.slot--preconsume-edge.slot--preconsume-color-blue { box-shadow: inset 0 -2px 0 rgba(37, 99, 235, 0.65); }
+.slot--preconsume-edge.slot--preconsume-color-green { box-shadow: inset 0 -2px 0 rgba(34, 197, 94, 0.7); }
+.slot--preconsume-edge.slot--preconsume-color-orange { box-shadow: inset 0 -2px 0 rgba(249, 115, 22, 0.75); }
+.slot--preconsume-edge.slot--preconsume-color-purple { box-shadow: inset 0 -2px 0 rgba(139, 92, 246, 0.75); }
+.slot--preconsume-edge.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);
+  /* 用内描边提示边缘，不改变格子视觉尺寸 */
+  box-shadow: inset 0 0 0 2px rgba(17, 24, 39, 0.22);
   z-index: 1;
 }
 .slot--dimmed {
   opacity: 0.35;
 }
+.slot--preconsume.slot--resize-start {
+  /* 用内阴影提示左边缘，避免“变大” */
+  border-left: 0 !important;
+  box-shadow: inset 2px 0 0 rgba(15, 23, 42, 0.14);
+}
+.slot--preconsume.slot--resize-end {
+  border-right: 0 !important;
+  box-shadow: inset -2px 0 0 rgba(15, 23, 42, 0.14);
+}
+
 /* 预约详情弹窗 - 与主弹窗风格统一 */
 ::v-deep .schedule-detail-dialog {
   border-radius: 20px;
@@ -1187,8 +1401,9 @@ export default {
   border-bottom: 1px solid #f1f5f9;
   font-size: 14px;
   .label { width: 90px; color: #64748b; flex-shrink: 0; }
-  .status-confirmed { color: #22c55e; font-weight: 600; }
   .status-booked { color: #3b82f6; font-weight: 600; }
+  .status-serving { color: #f97316; font-weight: 600; }
+  .status-completed { color: #22c55e; font-weight: 600; }
 }
 .booking-detail-footer {
@@ -2,7 +2,7 @@
   <el-dialog
     :visible.sync="visibleProxy"
     :show-close="false"
-    width="520px"
+    width="700px"
     :close-on-click-modal="false"
     custom-class="booking-consume-detail-dialog"
     append-to-body
@@ -15,7 +15,8 @@
       <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.date || '无' }}</span></div>
+        <div class="row"><span class="label">开始/结束</span><span class="value">{{ timeRangeText }}</span></div>
         <div class="row"><span class="label">房间</span><span class="value">{{ booking.roomName || '无' }}</span></div>
         <div class="row">
           <span class="label">健康师</span>
@@ -24,19 +25,31 @@
             <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 class="row row--items">
+          <span class="label">品项明细</span>
+          <div class="value value--block">
+            <div v-if="displayItems.length" class="items-list">
+              <div v-for="(it, idx) in displayItems" :key="idx" class="item-line">
+                <div class="item-main">
+                  <span class="item-name">{{ it.label || '无' }}</span>
+                  <span class="item-count">×{{ it.count }}</span>
+                </div>
+                <div class="item-sub">
+                  <span class="sub-label">服务健康师：</span>
+                  <span class="sub-value">{{ it.workerNamesText }}</span>
+                </div>
+              </div>
+            </div>
+            <div v-else class="empty-text">无</div>
+          </div>
         </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 class="row row--remark">
+          <span class="label">备注</span>
+          <span class="value value--multiline">{{ booking.remark || '无' }}</span>
         </div>
       </div>
@@ -51,6 +64,15 @@
           取消预约
         </el-button>
         <el-button
+          v-if="booking.status !== 'cancelled' && booking.status !== 'converted'"
+          type="primary"
+          plain
+          size="small"
+          @click="$emit('edit', booking)"
+        >
+          修改预约
+        </el-button>
+        <el-button
           v-if="booking.status === 'booked'"
           type="primary"
           size="small"
@@ -65,7 +87,7 @@
           size="small"
           @click="$emit('convert', booking)"
         >
-          转消耗
+          转消耗开单
         </el-button>
       </div>
     </div>
@@ -84,23 +106,44 @@ export default {
       get() { return this.visible },
       set(v) { this.$emit('update:visible', v) }
     },
+    timeRangeText() {
+      const b = this.booking || {}
+      const st = b.startTime || '无'
+      const et = b.endTime || '无'
+      if (st === '无' && et === '无') return '无'
+      return `${st}-${et}`
+    },
     therapistNames() {
       const b = this.booking || {}
       if (Array.isArray(b.therapistNames) && b.therapistNames.length) return b.therapistNames
       return []
     },
-    itemLabels() {
+    therapistNameMap() {
       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 []
+      const ids = Array.isArray(b.therapistIds) ? b.therapistIds : []
+      const names = Array.isArray(b.therapistNames) ? b.therapistNames : []
+      const map = new Map()
+      ids.forEach((id, idx) => {
+        if (!id) return
+        map.set(id, names[idx] || id)
+      })
+      return map
+    },
+    displayItems() {
+      const b = this.booking || {}
+      const list = Array.isArray(b.items) ? b.items : []
+      const map = this.therapistNameMap
+      return list.map(x => {
+        const count = (x && (x.count != null ? x.count : x.qty)) || 1
+        const workers = Array.isArray(x && x.workers) ? x.workers : []
+        const workerIds = workers.map(w => w && w.workerId).filter(Boolean)
+        const workerNames = workerIds.map(id => map.get(id) || id)
+        return {
+          label: (x && x.label) || '',
+          count,
+          workerNamesText: workerNames.length ? workerNames.join('、') : '无'
+        }
+      })
     },
     statusText() {
       const s = (this.booking && this.booking.status) || 'booked'
@@ -162,6 +205,10 @@ export default {
   font-size: 14px;
 }
+.row--items {
+  align-items: flex-start;
+}
+
 .label {
   width: 96px;
   color: #64748b;
@@ -172,9 +219,87 @@ export default {
   flex: 1;
   min-width: 0;
   color: #111827;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.value--block {
+  white-space: normal;
+  overflow: visible;
+}
+
+.value--multiline {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.items-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.item-line {
+  padding: 10px 12px;
+  border: 1px solid rgba(226, 232, 240, 0.9);
+  border-radius: 12px;
+  background: rgba(248, 250, 252, 0.75);
+}
+
+.item-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.item-name {
+  font-weight: 600;
+  color: #0f172a;
+  flex: 1;
+  min-width: 0;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  line-height: 1.4;
+  word-break: break-all;
+}
+
+.item-count {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: #2563eb;
+  font-weight: 700;
+}
+
+.item-sub {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #64748b;
+  display: flex;
+  gap: 6px;
+  line-height: 1.4;
+}
+
+.sub-label {
+  flex-shrink: 0;
+}
+
+.sub-value {
+  flex: 1;
+  min-width: 0;
+  word-break: break-all;
+}
+
+.empty-text {
+  color: #94a3b8;
+  font-size: 13px;
 }
 .status {
@@ -201,7 +326,7 @@ export default {
 }
 ::v-deep .booking-consume-detail-dialog {
-  max-width: 520px;
+  max-width: 700px;
   margin-top: 10vh !important;
   border-radius: 20px;
   padding: 0;
@@ -247,13 +247,16 @@ export default {
   name: 'BookingConsumeDialog',
   components: { RoomUsageDialog },
   props: {
-    visible: { type: Boolean, default: false }
+    visible: { type: Boolean, default: false },
+    prefill: { type: Object, default: () => ({}) }
   },
   data() {
     return {
       submitting: false,
       roomUsageVisible: false,
       form: this.createEmptyForm(),
+      editId: '',
+      editMeta: null,
       memberOptions: [
         { value: 'cust001', label: '林小纤', phone: '13800138000' },
         { value: 'cust002', label: '王丽', phone: '13800138001' },
@@ -351,6 +354,12 @@ export default {
   watch: {
     visible(val) {
       if (val) this.resetFormForOpen()
+    },
+    prefill: {
+      deep: true,
+      handler() {
+        if (this.visible) this.resetFormForOpen()
+      }
     }
   },
   methods: {
@@ -390,13 +399,67 @@ export default {
     },
     resetFormForOpen() {
       this.form = this.createEmptyForm()
+      this.editId = ''
+      this.editMeta = null
       this.roomUsageVisible = false
       this.submitting = false
       this.availableItems = []
+      this.applyPrefill()
       this.$nextTick(() => {
         this.$refs.form && this.$refs.form.clearValidate()
       })
     },
+    applyPrefill() {
+      const p = this.prefill || {}
+      if (!p || typeof p !== 'object') return
+
+      if (p.id) {
+        this.editId = p.id
+        this.editMeta = { colorKey: p.colorKey, createdAt: p.createdAt }
+      }
+
+      if (p.memberId) {
+        this.form.memberId = p.memberId
+        this.form.memberName = p.memberName || ''
+        this.loadMemberItems(p.memberId)
+      }
+      if (p.date) {
+        const d = p.date instanceof Date ? p.date : new Date(p.date)
+        if (!Number.isNaN(d.getTime())) this.form.date = d
+      }
+      if (p.startTime) this.form.startTime = p.startTime
+      if (p.endTime) this.form.endTime = p.endTime
+      if (p.roomId) {
+        this.form.roomId = p.roomId
+        const r = this.roomOptions.find(x => x.id === p.roomId)
+        this.form.roomName = (p.roomName || (r ? r.name : '')) || ''
+      } else if (p.roomName) {
+        this.form.roomName = p.roomName
+      }
+      if (p.remark != null) this.form.remark = p.remark || ''
+
+      // items
+      if (Array.isArray(p.items) && p.items.length) {
+        this.form.items = p.items.map(pi => {
+          const it = this.createEmptyItem()
+          it.projectId = pi.projectId || ''
+          it.label = pi.label || ''
+          it.count = (pi.count != null ? pi.count : 1) || 1
+          it.workers = Array.isArray(pi.workers) && pi.workers.length ? pi.workers.map(w => ({
+            workerId: (w && (w.workerId || w.id)) || '',
+            performance: '',
+            laborCost: '',
+            count: ''
+          })) : [{ workerId: '' }]
+          return it
+        })
+        this.$nextTick(() => {
+          this.form.items.forEach((_, idx) => {
+            if (this.form.items[idx].projectId) this.onProjectChange(idx)
+          })
+        })
+      }
+    },
     onMemberChange(val) {
       const m = this.memberOptions.find(x => x.value === val)
       this.form.memberName = m ? m.label : ''
@@ -448,7 +511,7 @@ export default {
         if (!valid) return
         this.submitting = true
         setTimeout(() => {
-          const id = `PCB_${Date.now()}_${Math.floor(Math.random() * 1000)}`
+          const id = this.editId || `PCB_${Date.now()}_${Math.floor(Math.random() * 1000)}`
           const dateStr = this.formatDate(this.form.date)
           const therapistIds = this.selectedTherapistIds
           const therapistNames = this.selectedTherapistNames
@@ -479,12 +542,17 @@ export default {
             itemLabels,
             remark: this.form.remark || '',
             status: 'booked',
-            colorKey: this.buildColorKey(id),
-            createdAt: new Date().toISOString()
+            colorKey: (this.editMeta && this.editMeta.colorKey) ? this.editMeta.colorKey : this.buildColorKey(id),
+            createdAt: (this.editMeta && this.editMeta.createdAt) ? this.editMeta.createdAt : new Date().toISOString()
           }
           const list = this.readStorage()
-          list.unshift(record)
+          const idx = list.findIndex(x => x && x.id === id)
+          if (idx >= 0) list.splice(idx, 1, record)
+          else list.unshift(record)
           this.writeStorage(list)
+          try {
+            window.dispatchEvent(new CustomEvent('store_pc_pre_consume_bookings_updated', { detail: { id: record.id } }))
+          } catch (e) {}
           this.submitting = false
           this.$emit('saved', record)
         }, 500)
@@ -377,7 +377,7 @@
     />
     <booking-dialog :visible.sync="bookingDialogVisible" :prefill="bookingPrefill" />
     <billing-dialog :visible.sync="billingDialogVisible" :prefill="billingPrefill" />
-    <consume-dialog :visible.sync="consumeDialogVisible" />
+    <consume-dialog :visible.sync="consumeDialogVisible" :prefill="consumePrefill" />
     <refund-dialog :visible.sync="refundDialogVisible" />
     <tuoke-list-dialog :visible.sync="tuokeListVisible" />
     <booking-calendar-dialog :visible.sync="bookingCalendarVisible" />
@@ -807,6 +807,7 @@ export default {
       billingDialogVisible: false,
       billingPrefill: {},
       consumeDialogVisible: false,
+      consumePrefill: {},
       refundDialogVisible: false,
       tuokeListVisible: false,
       bookingCalendarVisible: false,
@@ -942,6 +943,8 @@ export default {
     fmt()
     this.clockTimer = setInterval(fmt, 1000)
+    this.tryOpenConsumeFromPrefillOnce()
+
     // 提醒中心默认展开/收起与上次状态（可配置）
     const savedOpen = localStorage.getItem('store_reminder_open')
     const savedType = localStorage.getItem('store_reminder_type')
@@ -965,6 +968,28 @@ export default {
     clearInterval(this.clockTimer)
   },
   methods: {
+    tryOpenConsumeFromPrefillOnce() {
+      const key = 'store_pc_consume_prefill_once'
+      let raw = null
+      try {
+        raw = localStorage.getItem(key)
+      } catch (e) {
+        raw = null
+      }
+      if (!raw) return
+      try {
+        const obj = JSON.parse(raw)
+        if (!obj || typeof obj !== 'object') return
+        this.consumePrefill = obj
+        this.$nextTick(() => {
+          this.consumeDialogVisible = true
+        })
+      } catch (e) {
+        // ignore
+      } finally {
+        try { localStorage.removeItem(key) } catch (e) {}
+      }
+    },
     toggleFullscreen() {
       if (!document.fullscreenElement) {
         document.documentElement.requestFullscreen().catch(() => { })