From 19415acca8eeec4163b219f2813a5103537ac188 Mon Sep 17 00:00:00 2001
From: “wangming” <“wangming@antissoft.com”>
Date: Fri, 13 Mar 2026 18:01:09 +0800
Subject: [PATCH] Enhance Form.vue with location search functionality and improved user experience. Added address input for store location retrieval, integrated Tencent Maps API for geolocation, and updated form fields to include longitude, latitude, and fence polygons. Adjusted dialog and layout for better usability.

---
 antis-ncc-admin/src/views/lqMdxx/Form.vue                                       |  185 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 docs/数据库说明.md                                                         |    3 +++
 netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqMdxx/LqMdxxCrInput.cs    |   17 ++++++++++++++++-
 netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqMdxx/LqMdxxInfoOutput.cs |   17 ++++++++++++++++-
 netcore/src/Modularity/Extend/NCC.Extend.Entitys/Entity/lq_mdxx/LqMdxxEntity.cs |   20 +++++++++++++++++++-
 sql/添加门店经纬度与电子围栏字段.sql                              |    7 +++++++
 store-pc/src/components/CompanyCalendarDialog.vue                               |  398 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 store-pc/src/components/InviteAddDialog.vue                                     |   86 ++++++++++++++++++++++++++++++++++++--------------------------------------------------
 store-pc/src/components/MemberProfileDialog.vue                                 |    6 +++---
 store-pc/src/views/dashboard/index.vue                                          | 1215 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 10 files changed, 1533 insertions(+), 421 deletions(-)
 create mode 100644 sql/添加门店经纬度与电子围栏字段.sql
 create mode 100644 store-pc/src/components/CompanyCalendarDialog.vue

diff --git a/antis-ncc-admin/src/views/lqMdxx/Form.vue b/antis-ncc-admin/src/views/lqMdxx/Form.vue
index 6f82389..ce36fb9 100644
--- a/antis-ncc-admin/src/views/lqMdxx/Form.vue
+++ b/antis-ncc-admin/src/views/lqMdxx/Form.vue
@@ -107,11 +107,23 @@
 		<el-dialog title="门店地图定位" :visible.sync="locationVisible" width="800px" append-to-body class="map-dialog">
 			<div class="map-container-wrapper">
 				<div class="map-header-bar">
-					<span>在地图上点击以选择门店位置（仅支持单个标记）</span>
+					<span>在地图上点击以选择门店位置，或通过地址检索定位</span>
 					<div class="coordinate-info" v-if="tempMarker.lng">
 						当前选择：{{ tempMarker.lng.toFixed(6) }}, {{ tempMarker.lat.toFixed(6) }}
 					</div>
 				</div>
+				<div class="location-search-bar">
+					<el-input
+						v-model="locationSearchKeyword"
+						placeholder="输入地址或关键词检索（如：成都市武侯区紫荆北路182号）"
+						clearable
+						size="small"
+						class="search-input"
+						@keyup.enter.native="handleSearchLocation"
+					>
+						<el-button slot="append" icon="el-icon-search" @click="handleSearchLocation" :loading="locationSearchLoading">检索</el-button>
+					</el-input>
+				</div>
 				<div id="location-map" class="map-canvas"></div>
 			</div>
 			<span slot="footer" class="dialog-footer">
@@ -163,6 +175,29 @@
 <script>
 import request from '@/utils/request'
 
+// 腾讯地图 WebService API Key（与地图脚本共用，需在腾讯控制台开启 WebServiceAPI）
+const TMAP_WS_KEY = 'YRXBZ-NEV6T-K7SXH-VJPMF-G5IQF-F3FCJ'
+
+// JSONP 调用（绕过 CORS，腾讯 WebService API 前端需用 JSONP）
+function jsonp(url) {
+  return new Promise((resolve, reject) => {
+    const cbName = '_tmap_jsonp_' + Date.now() + '_' + Math.random().toString(36).slice(2);
+    const script = document.createElement('script');
+    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'output=jsonp&callback=' + cbName;
+    window[cbName] = function(res) {
+      if (script.parentNode) script.parentNode.removeChild(script);
+      delete window[cbName];
+      resolve(res);
+    };
+    script.onerror = function() {
+      if (script.parentNode) script.parentNode.removeChild(script);
+      delete window[cbName];
+      reject(new Error('JSONP request failed'));
+    };
+    document.body.appendChild(script);
+  });
+}
+
 export default {
 	data() {
 		return {
@@ -198,6 +233,8 @@ export default {
 			locationMap: null,
 			locationMarkerLayer: null,
 			tempMarker: { lng: null, lat: null },
+			locationSearchKeyword: '',
+			locationSearchLoading: false,
 
 			// 围栏弹窗相关
 			fenceVisible: false,
@@ -237,8 +274,34 @@ export default {
 				if (this.dataForm.id) {
 					request({ url: '/api/Extend/LqMdxx/' + this.dataForm.id, method: 'get' })
 						.then(res => {
-							this.dataForm = res.data;
+							const raw = res.data || {};
+							// 合并接口数据，保留 dataForm 默认结构
+							this.dataForm = {
+								...this.dataForm,
+								...raw,
+								// 经纬度：兼容后端 camelCase / PascalCase（避免 ?? 语法，兼容旧 Babel）
+								longitude: raw.longitude != null ? raw.longitude : (raw.Longitude != null ? raw.Longitude : this.dataForm.longitude),
+								latitude: raw.latitude != null ? raw.latitude : (raw.Latitude != null ? raw.Latitude : this.dataForm.latitude)
+							};
+							// fencePolygons：后端返回 JSON 字符串需解析为数组，兼容 fence_polygons 字段名
+							const fpRaw = raw.fencePolygons != null ? raw.fencePolygons : (raw.fence_polygons != null ? raw.fence_polygons : raw.FencePolygons);
+							if (typeof fpRaw === 'string') {
+								try {
+									this.dataForm.fencePolygons = JSON.parse(fpRaw) || [];
+								} catch (e) {
+									this.dataForm.fencePolygons = [];
+								}
+							} else if (Array.isArray(fpRaw)) {
+								this.dataForm.fencePolygons = fpRaw;
+							} else {
+								this.dataForm.fencePolygons = Array.isArray(this.dataForm.fencePolygons) ? this.dataForm.fencePolygons : [];
+							}
 						});
+				} else {
+					// 新建时重置经纬度与围栏
+					this.dataForm.longitude = null;
+					this.dataForm.latitude = null;
+					this.dataForm.fencePolygons = [];
 				}
 			})
 		},
@@ -257,12 +320,111 @@ export default {
 		// --- 门店定位逻辑 ---
 		handleOpenLocation() {
 			this.locationVisible = true;
-			this.tempMarker = { lng: this.dataForm.longitude, lat: this.dataForm.latitude };
+			// 若已有经纬度，则以门店经纬度为中心；否则先不设置，等 IP 定位
+			this.tempMarker = {
+				lng: this.dataForm.longitude,
+				lat: this.dataForm.latitude
+			};
+			// 仅作为默认检索关键字，不自动发起检索
+			this.locationSearchKeyword = this.dataForm.dz || '';
+
 			this.$nextTick(() => {
-				this.initLocationMap();
+				// 如果已有经纬度，直接按门店坐标初始化地图
+				if (this.dataForm.longitude && this.dataForm.latitude) {
+					this.initLocationMap();
+				} else {
+					// 无经纬度时，优先用 IP 做一个大概定位，再初始化地图
+					this.initLocationWithIp();
+				}
 			});
 		},
 
+		// 使用腾讯地图 IP 定位作为初始中心（仅在没有门店经纬度时调用）
+		initLocationWithIp() {
+			const ipUrl = 'https://apis.map.qq.com/ws/location/v1/ip?key=' + TMAP_WS_KEY;
+			// 先尝试 IP 定位（JSONP），成功后设置 tempMarker 再初始化地图；失败则走默认中心
+			jsonp(ipUrl)
+				.then((res) => {
+					if (res.status === 0 && res.result && res.result.location) {
+						const loc = res.result.location;
+						this.tempMarker = { lng: loc.lng, lat: loc.lat };
+						// 同步一下城市，便于后续检索时 region 使用
+						if (res.result.ad_info && res.result.ad_info.city && !this.dataForm.cs) {
+							this.dataForm.cs = res.result.ad_info.city;
+						}
+					}
+					this.initLocationMap();
+				})
+				.catch(() => {
+					this.initLocationMap();
+				});
+		},
+
+		// 地址检索：使用腾讯地图 WebService API（地址解析 + 地点搜索）
+		handleSearchLocation() {
+			const keyword = (this.locationSearchKeyword || '').trim();
+			if (!keyword) {
+				this.$message.warning('请输入地址或关键词');
+				return;
+			}
+			this.locationSearchLoading = true;
+			const region = this.dataForm.cs || '';
+
+			// 1. 先调用地址解析 API（适合完整地址），使用 JSONP 绕过 CORS
+			const geocoderUrl = 'https://apis.map.qq.com/ws/geocoder/v1/?address=' + encodeURIComponent(keyword) + '&key=' + TMAP_WS_KEY + (region ? '&region=' + encodeURIComponent(region) : '');
+			jsonp(geocoderUrl)
+				.then((res) => {
+					if (res.status === 0 && res.result && res.result.location) {
+						const loc = res.result.location;
+						this.applySearchResult(loc.lat, loc.lng);
+						this.locationSearchLoading = false;
+						this.$message.success('检索成功');
+					} else {
+						this.searchByKeyword(keyword, region);
+					}
+				})
+				.catch(() => {
+					this.searchByKeyword(keyword, region);
+				});
+		},
+
+		// 关键词搜索：使用腾讯地图地点搜索 WebService API
+		searchByKeyword(keyword, region) {
+			const cityName = region || '全国';
+			const boundary = 'region(' + cityName + ',1)';
+			const searchUrl = 'https://apis.map.qq.com/ws/place/v1/search?keyword=' + encodeURIComponent(keyword) + '&boundary=' + encodeURIComponent(boundary) + '&page_size=10&key=' + TMAP_WS_KEY;
+			jsonp(searchUrl)
+				.then((res) => {
+					this.locationSearchLoading = false;
+					if (res.status === 0 && res.data && res.data.length > 0) {
+						const first = res.data[0];
+						const loc = first.location;
+						this.applySearchResult(loc.lat, loc.lng);
+						this.$message.success('检索成功');
+					} else {
+						this.$message.warning('未找到匹配结果，请尝试其他关键词或在地图上直接点击选择');
+					}
+				})
+				.catch(() => {
+					this.locationSearchLoading = false;
+					this.$message.error('检索失败，请稍后再试');
+				});
+		},
+
+		// 将检索结果应用到地图（移动中心、设置标记）
+		applySearchResult(lat, lng) {
+			this.tempMarker = { lng: lng, lat: lat };
+			if (window.TMap && this.locationMarkerLayer) {
+				const TMap = window.TMap;
+				this.locationMarkerLayer.setGeometries([{ id: 'm', position: new TMap.LatLng(lat, lng) }]);
+			}
+			if (window.TMap && this.locationMap) {
+				const TMap = window.TMap;
+				this.locationMap.setCenter(new TMap.LatLng(lat, lng));
+				this.locationMap.setZoom(16);
+			}
+		},
+
 		initLocationMap() {
 			this.loadTMapScript().then(() => {
 				const TMap = window.TMap;
@@ -515,10 +677,15 @@ export default {
 			this.$refs['elForm'].validate((valid) => {
 				if (!valid) return;
 				const isNew = !this.dataForm.id;
+				// 提交前：fencePolygons 若为数组则序列化为 JSON 字符串，与后端约定一致
+				const submitData = { ...this.dataForm };
+				if (Array.isArray(submitData.fencePolygons)) {
+					submitData.fencePolygons = JSON.stringify(submitData.fencePolygons);
+				}
 				request({
 					url: isNew ? '/api/Extend/LqMdxx' : `/api/Extend/LqMdxx/${this.dataForm.id}`,
 					method: isNew ? 'POST' : 'PUT',
-					data: this.dataForm
+					data: submitData
 				}).then((res) => {
 					this.$message({
 						message: res.msg,
@@ -568,6 +735,14 @@ export default {
 			font-weight: bold;
 		}
 	}
+
+	.location-search-bar {
+		margin-bottom: 10px;
+
+		.search-input {
+			width: 100%;
+		}
+	}
 }
 
 .map-canvas {
diff --git a/docs/数据库说明.md b/docs/数据库说明.md
index d178055..a6aad1f 100644
--- a/docs/数据库说明.md
+++ b/docs/数据库说明.md
@@ -53,6 +53,9 @@
 
 ### 1. 门店与人员关系
 - **门店信息表**: `lq_mdxx` (门店基础信息)
+  - `longitude` (DECIMAL): 经度
+  - `latitude` (DECIMAL): 纬度
+  - `fence_polygons` (JSON): 电子围栏多边形坐标，格式 `[[{lng,lat},...]]`
 - **人员信息**: `BASE_USER` (系统用户表，包含门店ID等扩展字段)
 - **关联字段**: `BASE_USER.F_MDID` ↔ `lq_mdxx.F_Id`
 
diff --git a/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqMdxx/LqMdxxCrInput.cs b/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqMdxx/LqMdxxCrInput.cs
index 331de0e..a252a56 100644
--- a/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqMdxx/LqMdxxCrInput.cs
+++ b/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqMdxx/LqMdxxCrInput.cs
@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 
 namespace NCC.Extend.Entitys.Dto.LqMdxx
@@ -44,6 +44,21 @@ namespace NCC.Extend.Entitys.Dto.LqMdxx
         public string dz { get; set; }
 
         /// <summary>
+        /// 经度
+        /// </summary>
+        public decimal? longitude { get; set; }
+
+        /// <summary>
+        /// 纬度
+        /// </summary>
+        public decimal? latitude { get; set; }
+
+        /// <summary>
+        /// 电子围栏多边形坐标，JSON 字符串，格式：[[{lng,lat},...]]
+        /// </summary>
+        public string fencePolygons { get; set; }
+
+        /// <summary>
         /// 姓名
         /// </summary>
         public string xm { get; set; }
diff --git a/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqMdxx/LqMdxxInfoOutput.cs b/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqMdxx/LqMdxxInfoOutput.cs
index 15d12eb..e1d7561 100644
--- a/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqMdxx/LqMdxxInfoOutput.cs
+++ b/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Dto/LqMdxx/LqMdxxInfoOutput.cs
@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 using NCC.Code;
 using NCC.Extend.Entitys.Enum;
@@ -46,6 +46,21 @@ namespace NCC.Extend.Entitys.Dto.LqMdxx
         public string dz { get; set; }
 
         /// <summary>
+        /// 经度
+        /// </summary>
+        public decimal? longitude { get; set; }
+
+        /// <summary>
+        /// 纬度
+        /// </summary>
+        public decimal? latitude { get; set; }
+
+        /// <summary>
+        /// 电子围栏多边形坐标，JSON 字符串，格式：[[{lng,lat},...]]
+        /// </summary>
+        public string fencePolygons { get; set; }
+
+        /// <summary>
         /// 姓名
         /// </summary>
         public string xm { get; set; }
diff --git a/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Entity/lq_mdxx/LqMdxxEntity.cs b/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Entity/lq_mdxx/LqMdxxEntity.cs
index ba74e1c..2411394 100644
--- a/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Entity/lq_mdxx/LqMdxxEntity.cs
+++ b/netcore/src/Modularity/Extend/NCC.Extend.Entitys/Entity/lq_mdxx/LqMdxxEntity.cs
@@ -1,4 +1,4 @@
-using NCC.Common.Const;
+using NCC.Common.Const;
 using SqlSugar;
 using System;
 
@@ -54,6 +54,24 @@ namespace NCC.Extend.Entitys.lq_mdxx
         public string Dz { get; set; }
 
         /// <summary>
+        /// 经度
+        /// </summary>
+        [SugarColumn(ColumnName = "longitude")]
+        public decimal? Longitude { get; set; }
+
+        /// <summary>
+        /// 纬度
+        /// </summary>
+        [SugarColumn(ColumnName = "latitude")]
+        public decimal? Latitude { get; set; }
+
+        /// <summary>
+        /// 电子围栏多边形坐标，JSON 格式：[[{lng,lat},...]]
+        /// </summary>
+        [SugarColumn(ColumnName = "fence_polygons")]
+        public string FencePolygons { get; set; }
+
+        /// <summary>
         /// 姓名
         /// </summary>
         [SugarColumn(ColumnName = "xm")]
diff --git a/sql/添加门店经纬度与电子围栏字段.sql b/sql/添加门店经纬度与电子围栏字段.sql
new file mode 100644
index 0000000..9f6c474
--- /dev/null
+++ b/sql/添加门店经纬度与电子围栏字段.sql
@@ -0,0 +1,7 @@
+-- 门店信息表添加经纬度与电子围栏字段
+-- 用于门店编辑页面的地图定位与电子围栏功能
+
+ALTER TABLE lq_mdxx
+  ADD COLUMN longitude DECIMAL(10, 6) NULL COMMENT '经度' AFTER dz,
+  ADD COLUMN latitude DECIMAL(10, 6) NULL COMMENT '纬度' AFTER longitude,
+  ADD COLUMN fence_polygons JSON NULL COMMENT '电子围栏多边形坐标，格式：[[{lng,lat},...]]' AFTER latitude;
diff --git a/store-pc/src/components/CompanyCalendarDialog.vue b/store-pc/src/components/CompanyCalendarDialog.vue
new file mode 100644
index 0000000..7cff7a8
--- /dev/null
+++ b/store-pc/src/components/CompanyCalendarDialog.vue
@@ -0,0 +1,398 @@
+<template>
+  <el-dialog
+    :visible.sync="visibleProxy"
+    :show-close="false"
+    width="90%"
+    :close-on-click-modal="false"
+    custom-class="company-calendar-dialog"
+    append-to-body
+  >
+    <div class="dialog-inner">
+      <div class="dialog-header">
+        <div class="dialog-title">公司日历</div>
+        <div class="dialog-legend">
+          <span v-for="item in legendList" :key="item.type" class="legend-item">
+            <span class="legend-dot" :style="{ background: item.color }"></span>
+            {{ item.label }}
+          </span>
+        </div>
+        <span class="dialog-close" @click="visibleProxy = false"><i class="el-icon-close"></i></span>
+      </div>
+
+      <div class="dialog-content" v-loading="loading">
+        <FullCalendar
+          ref="fullCalendar"
+          class="company-calendar"
+          defaultView="dayGridMonth"
+          :header="calendarHeader"
+          :plugins="calendarPlugins"
+          :weekends="true"
+          :events="calendarEvents"
+          locale="zh-cn"
+          :buttonText="buttonText"
+          :height="calendarHeight"
+          :eventLimit="true"
+          allDayText="全天"
+          :editable="false"
+          @datesRender="datesRender"
+          @eventClick="handleEventClick"
+        />
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import FullCalendar from '@fullcalendar/vue'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import interactionPlugin from '@fullcalendar/interaction'
+
+export default {
+  name: 'CompanyCalendarDialog',
+  components: { FullCalendar },
+  props: {
+    visible: { type: Boolean, default: false }
+  },
+  data() {
+    const today = new Date()
+    const y = today.getFullYear()
+    const m = String(today.getMonth() + 1).padStart(2, '0')
+    const d = String(today.getDate()).padStart(2, '0')
+    const todayStr = `${y}-${m}-${d}`
+    return {
+      loading: false,
+      // 公司层面的会议/活动数据（后续可换成接口）
+      companyEvents: [
+        // 当天 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: '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: '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: '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: '操作会 - 静居寺店' },
+        { id: 'E010', date: `${y}-${m}-03`, start: `${y}-${m}-03T09:30:00`, end: `${y}-${m}-03T11:00:00`, type: 'training', title: '培训会 - 会员沟通话术' },
+        { id: 'E011', date: `${y}-${m}-04`, start: `${y}-${m}-04T15:00:00`, end: `${y}-${m}-04T17:00:00`, type: 'activity', title: '门店活动 - 双流店开放日' },
+        { id: 'E012', date: `${y}-${m}-05`, start: `${y}-${m}-05T10:00:00`, end: `${y}-${m}-05T11:30:00`, type: 'ops',     title: '操作会 - 保利店' },
+        { id: 'E013', date: `${y}-${m}-06`, start: `${y}-${m}-06T14:00:00`, end: `${y}-${m}-06T15:30:00`, type: 'training', title: '培训会 - 逆龄项目进阶' },
+        { id: 'E014', date: `${y}-${m}-07`, start: `${y}-${m}-07T19:00:00`, end: `${y}-${m}-07T20:30:00`, type: 'activity', title: '门店活动 - 线上直播专场' },
+        { id: 'E015', date: `${y}-${m}-08`, start: `${y}-${m}-08T09:30:00`, end: `${y}-${m}-08T11:00:00`, type: 'meeting',  title: '事业部经营会' },
+        { id: 'E016', date: `${y}-${m}-09`, start: `${y}-${m}-09T13:30:00`, end: `${y}-${m}-09T15:00:00`, type: 'ops',     title: '操作会 - 南湖店' },
+        { id: 'E017', date: `${y}-${m}-10`, start: `${y}-${m}-10T10:00:00`, end: `${y}-${m}-10T11:30:00`, type: 'training', title: '培训会 - 顾问心法' },
+        { id: 'E018', date: `${y}-${m}-11`, start: `${y}-${m}-11T15:00:00`, end: `${y}-${m}-11T17:00:00`, type: 'activity', title: '门店活动 - 西站店沙龙' },
+        { id: 'E019', date: `${y}-${m}-12`, start: `${y}-${m}-12T09:30:00`, end: `${y}-${m}-12T11:00:00`, type: 'ops',     title: '操作会 - 融创店' },
+        { id: 'E020', date: `${y}-${m}-13`, start: `${y}-${m}-13T14:00:00`, end: `${y}-${m}-13T15:30:00`, type: 'training', title: '培训会 - 经典案例分享' },
+        { id: 'E021', date: `${y}-${m}-14`, start: `${y}-${m}-14T19:00:00`, end: `${y}-${m}-14T20:30:00`, type: 'activity', title: '门店活动 - 会员观影会' },
+        { id: 'E022', date: `${y}-${m}-15`, start: `${y}-${m}-15T10:00:00`, end: `${y}-${m}-15T12:00:00`, type: 'training', title: '产品培训 - 生命之波' },
+        { id: 'E023', date: `${y}-${m}-16`, start: `${y}-${m}-16T09:30:00`, end: `${y}-${m}-16T11:00:00`, type: 'ops',     title: '操作会 - 科技部' },
+        { 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: '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: '操作会 - 区域复盘' },
+        { id: 'E031', date: `${y}-${m}-24`, start: `${y}-${m}-24T15:00:00`, end: `${y}-${m}-24T16:30:00`, type: 'activity', title: '门店活动 - 老客回访日' },
+        { id: 'E032', date: `${y}-${m}-25`, start: `${y}-${m}-25T09:30:00`, end: `${y}-${m}-25T11:00:00`, type: 'meeting',  title: '高管经营例会' }
+      ],
+      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: 720,
+      typeColorMap: {
+        ops: '#6366f1',
+        training: '#22c55e',
+        meeting: '#f97316',
+        activity: '#ec4899'
+      }
+    }
+  },
+  computed: {
+    visibleProxy: {
+      get() {
+        return this.visible
+      },
+      set(v) {
+        this.$emit('update:visible', v)
+      }
+    },
+    legendList() {
+      return [
+        { type: 'ops', label: '操作会', color: this.typeColorMap.ops },
+        { type: 'training', label: '培训会', color: this.typeColorMap.training },
+        { type: 'meeting', label: '全体大会', color: this.typeColorMap.meeting },
+        { type: 'activity', label: '门店活动', color: this.typeColorMap.activity }
+      ]
+    }
+  },
+  watch: {
+    visible(v) {
+      if (v) {
+        this.$nextTick(() => {
+          this.calcHeight()
+          this.initData()
+        })
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.calcHeight)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calcHeight)
+  },
+  methods: {
+    calcHeight() {
+      this.$nextTick(() => {
+        const el = this.$el && this.$el.querySelector('.dialog-content')
+        if (el) {
+          // 提高最小高度，让每天能展示更多事件
+          this.calendarHeight = Math.max(el.clientHeight - 20, 650)
+        }
+      })
+    },
+    datesRender(info) {
+      const view = info.view
+      this.startTime = view.activeStart
+      this.endTime = view.activeEnd
+      this.initData()
+    },
+    initData() {
+      this.loading = true
+      setTimeout(() => {
+        let filtered = [...this.companyEvents]
+        if (this.startTime && this.endTime) {
+          filtered = filtered.filter(e => {
+            const t = new Date(e.start).getTime()
+            return t >= this.startTime.getTime() && t < this.endTime.getTime()
+          })
+        }
+        this.calendarEvents = filtered.map(evt => {
+          const color = this.typeColorMap[evt.type] || '#3b82f6'
+          return {
+            id: evt.id,
+            title: evt.title,
+            start: new Date(evt.start).toISOString(),
+            end: new Date(evt.end).toISOString(),
+            color,
+            editable: false,
+            allDay: false,
+            extendedProps: {
+              type: evt.type
+            }
+          }
+        })
+        this.loading = false
+      }, 200)
+    },
+    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}`
+      }
+      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
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '~@fullcalendar/core/main.css';
+@import '~@fullcalendar/daygrid/main.css';
+@import '~@fullcalendar/timegrid/main.css';
+
+.company-calendar-dialog .company-calendar {
+  .fc-toolbar.fc-header-toolbar {
+    padding: 16px 20px;
+    margin-bottom: 0;
+    border-bottom: 2px solid #f1f5f9;
+    background: linear-gradient(135deg, rgba(59,130,246,0.02) 0%, rgba(96,165,250,0.02) 100%);
+  }
+  .fc-toolbar-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: #1e293b;
+  }
+  .fc-button-primary {
+    background-color: #3b82f6;
+    border-color: #3b82f6;
+    border-radius: 10px;
+    font-size: 13px;
+    font-weight: 500;
+    height: 34px;
+    line-height: 34px;
+    padding: 0 14px;
+    transition: all 0.2s;
+    &:hover {
+      background: #2563eb;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(59,130,246,0.3);
+    }
+  }
+  .fc-button-primary:not(:disabled):active,
+  .fc-button-primary:not(:disabled).fc-button-active {
+    background-color: #2563eb;
+    border-color: #2563eb;
+    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
+  }
+  .fc-day-today {
+    background: linear-gradient(135deg, rgba(59,130,246,0.05) 0%, rgba(96,165,250,0.05) 100%);
+    .fc-daygrid-day-number {
+      background: linear-gradient(135deg, #3b82f6, #2563eb);
+      color: #fff;
+      border-radius: 6px;
+      box-shadow: 0 2px 8px rgba(59,130,246,0.3);
+    }
+  }
+  .fc-event {
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 3px 6px;
+    font-size: 12px;
+    font-weight: 500;
+    border: none;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: all 0.2s;
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+  }
+  .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;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+::v-deep .company-calendar-dialog {
+  max-width: 1600px;
+  margin-top: 3vh !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 .el-dialog__header { display: none; }
+::v-deep .el-dialog__body { padding: 0; }
+
+.dialog-inner {
+  display: flex;
+  flex-direction: column;
+  max-height: 92vh;
+  height: 88vh;
+}
+
+.dialog-header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 18px 22px 0;
+  padding: 10px 14px;
+  border-radius: 14px;
+  background: rgba(219,234,254,0.96);
+}
+
+.dialog-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.dialog-legend {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.dialog-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;
+  }
+}
+
+.dialog-content {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0 22px 14px;
+}
+</style>
+
+
diff --git a/store-pc/src/components/InviteAddDialog.vue b/store-pc/src/components/InviteAddDialog.vue
index aebf1f7..a4bd853 100644
--- a/store-pc/src/components/InviteAddDialog.vue
+++ b/store-pc/src/components/InviteAddDialog.vue
@@ -10,7 +10,7 @@
     <div class="invite-dialog-inner">
       <div class="invite-header">
         <div class="invite-title-wrap">
-          <div class="invite-title">新增邀约记录</div>
+          <div class="invite-title">新增沟通记录</div>
         </div>
       </div>
 
@@ -22,44 +22,28 @@
         size="small"
         class="invite-form"
       >
-        <el-form-item label="邀约时间" prop="yysj">
-          <el-date-picker
-            v-model="form.yysj"
-            type="datetime"
-            placeholder="请选择邀约时间"
-            style="width: 100%"
-          />
-        </el-form-item>
-
-        <el-form-item label="预约客户" prop="yykh">
+        <el-form-item label="沟通方式" prop="gtfs">
           <el-select
-            v-model="form.yykh"
-            placeholder="请选择预约客户"
+            v-model="form.gtfs"
+            placeholder="请选择沟通方式"
             filterable
             clearable
           >
-            <el-option
-              v-for="item in customerOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
+            <el-option label="电话" value="电话" />
+            <el-option label="微信" value="微信" />
           </el-select>
         </el-form-item>
 
-        <el-form-item label="联系电话">
-          <el-input
-            v-model="form.dh"
-            placeholder="电话号码"
-            disabled
-          />
-        </el-form-item>
-
-        <el-form-item label="电话是否有效" prop="dhsfyx">
-          <el-radio-group v-model="form.dhsfyx">
-            <el-radio label="是">是</el-radio>
-            <el-radio label="否">否</el-radio>
-          </el-radio-group>
+        <el-form-item label="是否接听" prop="sfjt">
+          <el-select
+            v-model="form.sfjt"
+            placeholder="请选择是否接听"
+            clearable
+          >
+            <el-option label="是" value="是" />
+            <el-option label="否" value="否" />
+            <el-option label="未拨通" value="未拨通" />
+          </el-select>
         </el-form-item>
 
         <el-form-item label="联系记录" prop="lxjl">
@@ -70,6 +54,15 @@
             placeholder="请输入联系记录"
           />
         </el-form-item>
+
+        <el-form-item label="下次联系时间" prop="xcLxsj">
+          <el-date-picker
+            v-model="form.xcLxsj"
+            type="datetime"
+            placeholder="可选，方便下次跟进"
+            style="width: 100%"
+          />
+        </el-form-item>
       </el-form>
 
       <div class="invite-footer">
@@ -97,11 +90,10 @@ export default {
     return {
       submitting: false,
       form: {
-        yysj: '',
-        yykh: '',
-        dh: '',
-        dhsfyx: '',
-        lxjl: ''
+        gtfs: '',
+        sfjt: '',
+        lxjl: '',
+        xcLxsj: ''
       },
       customerOptions: [
         { label: '张三', value: 'GK2020082101170', phone: '13800000001' },
@@ -109,9 +101,8 @@ export default {
         { label: '王五', value: 'GK2020082101172', phone: '13800000003' }
       ],
       rules: {
-        yysj: [{ required: true, message: '请选择邀约时间', trigger: 'change' }],
-        yykh: [{ required: true, message: '请选择预约客户', trigger: 'change' }],
-        dhsfyx: [{ required: true, message: '请选择电话是否有效', trigger: 'change' }],
+        gtfs: [{ required: true, message: '请选择沟通方式', trigger: 'change' }],
+        sfjt: [{ required: true, message: '请选择是否接听', trigger: 'change' }],
         lxjl: [
           { required: true, message: '请输入联系记录', trigger: 'blur' },
           { min: 2, message: '联系记录至少 2 个字', trigger: 'blur' }
@@ -130,19 +121,14 @@ export default {
     }
   },
   watch: {
-    'form.yykh'(val) {
-      const target = this.customerOptions.find(item => item.value === val)
-      this.form.dh = target ? target.phone : ''
-    }
   },
   methods: {
     resetForm() {
       this.form = {
-        yysj: '',
-        yykh: '',
-        dh: '',
-        dhsfyx: '',
-        lxjl: ''
+        gtfs: '',
+        sfjt: '',
+        lxjl: '',
+        xcLxsj: ''
       }
       this.$refs.form && this.$refs.form.clearValidate()
     },
@@ -156,7 +142,7 @@ export default {
         this.submitting = true
         setTimeout(() => {
           this.submitting = false
-          this.$message.success('邀约记录已保存（示例）')
+          this.$message.success('已添加沟通记录')
           this.visibleProxy = false
           this.resetForm()
         }, 800)
diff --git a/store-pc/src/components/MemberProfileDialog.vue b/store-pc/src/components/MemberProfileDialog.vue
index 409e7f3..8d3ea59 100644
--- a/store-pc/src/components/MemberProfileDialog.vue
+++ b/store-pc/src/components/MemberProfileDialog.vue
@@ -297,7 +297,7 @@
         <!-- 底部按钮 -->
         <div class="content-footer">
           <span class="records-op-btn records-op-btn--ghost records-op-btn--invite" @click="emitAction('invite')"><i
-              class="el-icon-phone-outline"></i>去邀约</span>
+              class="el-icon-phone-outline"></i>添加沟通记录</span>
           <span class="records-op-btn records-op-btn--ghost records-op-btn--booking" @click="emitAction('booking')"><i
               class="el-icon-date"></i>去预约</span>
           <span class="records-op-btn records-op-btn--ghost records-op-btn--billing" @click="emitAction('billing')"><i
@@ -590,7 +590,7 @@ export default {
     recordTabs() {
       return [
         { key: 'rights', label: '权益明细' },
-        { key: 'invite', label: '邀约记录' },
+        { key: 'invite', label: '联系记录' },
         { key: 'booking', label: '预约记录' },
         { key: 'billing', label: '开单记录' },
         { key: 'consume', label: '消耗记录' },
@@ -628,7 +628,7 @@ export default {
     },
     currentSearchPlaceholder() {
       switch (this.recordsTab) {
-        case 'invite': return '按联系记录/邀约人搜索'
+        case 'invite': return '按联系记录/跟进人搜索'
         case 'booking': return '按体验项目/健康师搜索'
         case 'billing': return '按品项/开单人员搜索'
         case 'consume': return '按品项/操作人员搜索'
diff --git a/store-pc/src/views/dashboard/index.vue b/store-pc/src/views/dashboard/index.vue
index bc39350..d7bed54 100644
--- a/store-pc/src/views/dashboard/index.vue
+++ b/store-pc/src/views/dashboard/index.vue
@@ -5,55 +5,45 @@
       <div class="store-info">
         <div class="store-name">{{ currentStoreName }} · 工作台</div>
         <div class="store-subtitle">
-          今日邀约 · 预约 · 开单，一眼总览
+          今日预约 · 开单，一眼总览
           <span class="schedule-link" @click.stop="$store.commit('SET_SCHEDULE_DIALOG', true)">打开排班</span>
         </div>
       </div>
       <div class="top-bar-right">
-        <div class="reminder-inline">
-          <i class="el-icon-warning-outline reminder-icon"></i>
-          <span class="reminder-label">待办：</span>
-          <span class="reminder-item" @click="handleReminderClick('goldTriangle')">请设置下月金三角</span>
-          <span class="reminder-sep">、</span>
-          <span class="reminder-item" @click="handleReminderClick('storeTarget')">请设置门店目标</span>
+        <div class="calendar-entry" @click="companyCalendarVisible = true">
+          <i class="el-icon-date calendar-entry-icon"></i>
+          <span class="calendar-entry-text">公司日历</span>
         </div>
         <div class="member-search">
-        <el-autocomplete
-          v-model="memberKeyword"
-          class="member-search-input"
-          :fetch-suggestions="fetchMemberSuggestions"
-          placeholder="手机号 / 姓名 / 会员卡号"
-          prefix-icon="el-icon-search"
-          value-key="displayText"
-          :trigger-on-focus="true"
-          popper-class="member-search-dropdown"
-          @select="handleMemberSelect"
-          @keyup.enter.native="handleFirstMatchOrFocus"
-        >
-          <template slot-scope="{ item }">
-            <div class="member-suggestion">
-              <div class="suggestion-main">
-                <span class="suggestion-name">{{ item.khmc }}</span>
-                <span class="suggestion-level" :class="'level--' + (item.levelKey || 'default')">{{ item.level }}</span>
-              </div>
-              <div class="suggestion-meta">
-                <span><i class="el-icon-phone"></i>{{ item.sjh }}</span>
-                <span v-if="item.dah"><i class="el-icon-postcard"></i>{{ item.dah }}</span>
-                <span><i class="el-icon-office-building"></i>{{ item.gsmdName }}</span>
-              </div>
-              <div class="suggestion-extra">
-                <span class="suggestion-row">
-                  <span>最后到店：{{ item.lastVisit }}</span>
-                  <span v-if="item.sleepDays > 0" class="suggestion-sleep">沉睡 {{ item.sleepDays }} 天</span>
-                </span>
-                <span class="suggestion-row">
-                  <span>剩余权益：<b>¥{{ item.remainingAmount }}</b></span>
-                  <span>累计消费：¥{{ item.totalConsume }}</span>
-                </span>
+          <el-autocomplete v-model="memberKeyword" class="member-search-input"
+            :fetch-suggestions="fetchMemberSuggestions" placeholder="手机号 / 姓名 / 会员卡号" prefix-icon="el-icon-search"
+            value-key="displayText" :trigger-on-focus="true" popper-class="member-search-dropdown"
+            @select="handleMemberSelect" @keyup.enter.native="handleFirstMatchOrFocus">
+            <template slot-scope="{ item }">
+              <div class="member-suggestion">
+                <div class="suggestion-main">
+                  <span class="suggestion-name">{{ item.khmc }}</span>
+                  <span class="suggestion-level" :class="'level--' + (item.levelKey || 'default')">{{ item.level
+                  }}</span>
+                </div>
+                <div class="suggestion-meta">
+                  <span><i class="el-icon-phone"></i>{{ item.sjh }}</span>
+                  <span v-if="item.dah"><i class="el-icon-postcard"></i>{{ item.dah }}</span>
+                  <span><i class="el-icon-office-building"></i>{{ item.gsmdName }}</span>
+                </div>
+                <div class="suggestion-extra">
+                  <span class="suggestion-row">
+                    <span>最后到店：{{ item.lastVisit }}</span>
+                    <span v-if="item.sleepDays > 0" class="suggestion-sleep">沉睡 {{ item.sleepDays }} 天</span>
+                  </span>
+                  <span class="suggestion-row">
+                    <span>剩余权益：<b>¥{{ item.remainingAmount }}</b></span>
+                    <span>累计消费：¥{{ item.totalConsume }}</span>
+                  </span>
+                </div>
               </div>
-            </div>
-          </template>
-        </el-autocomplete>
+            </template>
+          </el-autocomplete>
         </div>
       </div>
       <div class="top-meta">
@@ -104,15 +94,29 @@
       <div class="left-column">
         <!-- 今日概览 -->
         <div class="overview-row">
-          <el-row :gutter="16">
-            <el-col v-for="item in overviewStats" :key="item.key" :span="8">
-              <el-card shadow="hover" class="overview-card">
-                <div class="overview-meta">
-                  <span class="label">{{ item.label }}</span>
-                  <span class="tag" v-if="item.tag">{{ item.tag }}</span>
+          <el-row :gutter="16" class="overview-row-inner">
+            <el-col
+              v-for="item in overviewStats"
+              :key="item.key"
+              :span="24 / overviewStats.length"
+            >
+              <el-card
+                shadow="hover"
+                :class="['overview-card', 'overview-card--' + item.key]"
+              >
+                <div class="overview-card-inner">
+                  <div class="overview-meta">
+                    <span class="label">{{ item.label }}</span>
+                    <span class="tag" v-if="item.tag">{{ item.tag }}</span>
+                  </div>
+                  <div class="overview-main">
+                    <div class="overview-main-value">{{ item.today }}</div>
+                  </div>
+                  <div class="overview-secondary">
+                    <span class="overview-secondary-label">本月</span>
+                    <span class="overview-secondary-value">{{ item.month }}</span>
+                  </div>
                 </div>
-                <div class="overview-value">{{ item.value }}</div>
-                <div class="overview-sub">{{ item.subText }}</div>
               </el-card>
             </el-col>
           </el-row>
@@ -162,8 +166,11 @@
                 </div>
                 <div class="module-actions-spacer"></div>
                 <div class="module-actions">
-                  <button type="button" class="primary-action" @click.stop="handleModulePrimary(module)">{{ module.primaryAction }}</button>
-                  <span v-if="module.secondaryText" class="secondary-text" @click.stop="handleModuleSecondary(module)">{{ module.secondaryText }}</span>
+                  <button type="button" class="primary-action" @click.stop="handleModulePrimary(module)">{{
+                    module.primaryAction }}</button>
+                  <span v-if="module.secondaryText" class="secondary-text"
+                    @click.stop="handleModuleSecondary(module)">{{
+                      module.secondaryText }}</span>
                 </div>
               </el-card>
             </el-col>
@@ -171,132 +178,182 @@
         </div>
       </div>
 
-      <!-- 右侧：今日邀约 / 预约 -->
-      <div class="right-column">
-        <el-card shadow="hover" class="today-card" :body-style="{ padding: '16px 16px 12px' }">
-          <el-tabs v-model="todayTab">
-            <el-tab-pane label="今日邀约" name="invite">
-              <div v-if="todayInvite.length" class="timeline-list">
-                <div v-for="item in todayInvite" :key="item.id" class="timeline-item">
-                  <div class="time">{{ item.time }}</div>
-                  <div class="content">
-                    <div class="line-main">
-                      <span class="name">{{ item.name }}</span>
-                      <span class="mobile">{{ item.mobile }}</span>
+      <!-- 提醒中心侧栏（今日邀约 / 今日预约 / 生日提醒 / 沉睡提醒） -->
+      <div class="reminder-center">
+        <!-- 右侧窄栏入口 -->
+        <div class="reminder-center-toggle">
+          <div v-for="entry in reminderEntries" :key="entry.key"
+            :class="['reminder-toggle-item', entry.key === 'todo' ? 'todo-entry' : '', { 'is-active': currentReminderType === entry.key && reminderCenterOpen }]"
+            @click="handleReminderEntryClick(entry.key)">
+            <!-- 提醒中心入口样式：图标在上、文字在下（角标显示数字） -->
+            <el-badge
+              :value="entry.count"
+              :max="99"
+              :hidden="entry.count === 0"
+              class="reminder-badge"
+            >
+              <div :class="['entry-icon-wrap', 'entry-icon-wrap--' + entry.key]">
+                <i :class="['entry-icon', entry.icon]"></i>
+              </div>
+            </el-badge>
+            <span class="label-text">{{ entry.label }}</span>
+          </div>
+          <div v-if="reminderCenterOpen" class="reminder-toggle-close" @click.stop="toggleReminderCenter(false)">
+            <i class="el-icon-arrow-right"></i>
+          </div>
+        </div>
+
+        <!-- 侧栏主体 -->
+        <transition name="reminder-center-slide" :css="reminderFirstRenderDone">
+          <div v-if="reminderCenterOpen" class="reminder-center-panel">
+            <el-card shadow="hover" class="today-card" :body-style="{ padding: '16px 16px 12px' }">
+              <el-tabs v-model="todayTab" @tab-click="handleTodayTabClick">
+                <el-tab-pane label="我的待办" name="todo">
+                  <div v-if="todoList.length" class="timeline-list todo-list">
+                    <div v-for="item in todoList" :key="item.key" class="timeline-item todo-item" @click="handleTodoClick(item)">
+                      <div class="time">{{ item.tag }}</div>
+                      <div class="content">
+                        <div class="line-main">
+                          <span class="name">{{ item.title }}</span>
+                        </div>
+                        <div class="line-sub">
+                          <span class="project">{{ item.desc }}</span>
+                          <button
+                            type="button"
+                            class="quick-book-btn"
+                          >
+                            立即处理
+                          </button>
+                        </div>
+                      </div>
                     </div>
-                    <div class="line-sub">
-                      <span class="project">
-                        电话是否有效：{{ item.dhsfyx }} · {{ item.lxjl }}
-                      </span>
-                      <button type="button" class="quick-book-btn" @click="handleQuickBooking(item)">
-                        快速预约
-                      </button>
+                  </div>
+                  <div v-else class="empty-tip">暂无待办事项</div>
+                </el-tab-pane>
+                <el-tab-pane label="今日预约" name="booking">
+                  <div v-if="todayBooking.length" class="timeline-list">
+                    <div v-for="item in todayBooking" :key="item.id" class="timeline-item">
+                      <div class="time">{{ item.time }}</div>
+                      <div class="content">
+                        <div class="line-main">
+                          <span class="name">{{ item.name }}</span>
+                          <span class="mobile">{{ item.mobile }}</span>
+                        </div>
+                        <div class="line-sub">
+                          <span class="project">
+                            预约项目：{{ item.project }} · 预约时间：{{ item.date }} {{ item.timeRange }}
+                          </span>
+                          <div class="booking-actions">
+                            <el-button
+                              type="text"
+                              size="mini"
+                              class="booking-action-btn booking-action-btn--cancel"
+                              @click.stop="handleCancelBooking(item)"
+                            >
+                              取消预约
+                            </el-button>
+                            <el-button
+                              type="text"
+                              size="mini"
+                              class="booking-action-btn booking-action-btn--confirm"
+                              @click.stop="handleConfirmConsume(item)"
+                            >
+                              确认消耗
+                            </el-button>
+                          </div>
+                        </div>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </div>
-              <div v-else class="empty-tip">今日暂无邀约记录</div>
-            </el-tab-pane>
-            <el-tab-pane label="今日预约" name="booking">
-              <div v-if="todayBooking.length" class="timeline-list">
-                <div v-for="item in todayBooking" :key="item.id" class="timeline-item">
-                  <div class="time">{{ item.time }}</div>
-                  <div class="content">
-                    <div class="line-main">
-                      <span class="name">{{ item.name }}</span>
-                      <span class="mobile">{{ item.mobile }}</span>
+                  <div v-else class="empty-tip">今日暂无预约记录</div>
+                </el-tab-pane>
+                <el-tab-pane label="生日提醒" name="birthday">
+                  <div class="birthday-calendar">
+                    <!-- 月份切换头 -->
+                    <div class="cal-header">
+                      <button class="cal-nav-btn" @click="prevBirthdayMonth"><i class="el-icon-arrow-left"></i></button>
+                      <div class="cal-month-label">{{ birthdayYear }} 年 {{ birthdayMonth }} 月</div>
+                      <button class="cal-nav-btn" @click="nextBirthdayMonth"><i
+                          class="el-icon-arrow-right"></i></button>
                     </div>
-                    <div class="line-sub">
-                      <span class="project">
-                        预约项目：{{ item.project }} · 预约时间：{{ item.date }} {{ item.timeRange }}
-                      </span>
-                      <button type="button" class="quick-order-btn" @click="handleQuickBilling(item)">
-                        快速开单
-                      </button>
+                    <!-- 星期头 -->
+                    <div class="cal-weekdays">
+                      <div v-for="w in ['日', '一', '二', '三', '四', '五', '六']" :key="w" class="cal-weekday">{{ w }}</div>
                     </div>
-                  </div>
-                </div>
-              </div>
-              <div v-else class="empty-tip">今日暂无预约记录</div>
-            </el-tab-pane>
-            <el-tab-pane label="生日提醒" name="birthday">
-              <div class="birthday-calendar">
-                <!-- 月份切换头 -->
-                <div class="cal-header">
-                  <button class="cal-nav-btn" @click="prevBirthdayMonth"><i class="el-icon-arrow-left"></i></button>
-                  <div class="cal-month-label">{{ birthdayYear }} 年 {{ birthdayMonth }} 月</div>
-                  <button class="cal-nav-btn" @click="nextBirthdayMonth"><i class="el-icon-arrow-right"></i></button>
-                </div>
-                <!-- 星期头 -->
-                <div class="cal-weekdays">
-                  <div v-for="w in ['日','一','二','三','四','五','六']" :key="w" class="cal-weekday">{{ w }}</div>
-                </div>
-                <!-- 日期格子 -->
-                <div class="cal-grid">
-                  <div v-for="(cell, idx) in calendarDays" :key="idx"
-                       :class="['cal-cell', { 'cal-cell--empty': !cell.day, 'cal-cell--has-birthday': cell.members.length > 0, 'cal-cell--selected': cell.day === selectedBirthdayDay }]"
-                       @click="cell.day && selectBirthdayDay(cell.day)">
-                    <span v-if="cell.day" class="cal-day-num">{{ cell.day }}</span>
-                    <div v-if="cell.members.length" class="cal-dots">
-                      <span v-for="m in cell.members.slice(0, 3)" :key="m.id"
-                            class="cal-dot" :style="{ background: levelDotColor(m.level) }"
+                    <!-- 日期格子 -->
+                    <div class="cal-grid">
+                      <div v-for="(cell, idx) in calendarDays" :key="idx"
+                        :class="['cal-cell', { 'cal-cell--empty': !cell.day, 'cal-cell--has-birthday': cell.members.length > 0, 'cal-cell--selected': cell.day === selectedBirthdayDay }]"
+                        @click="cell.day && selectBirthdayDay(cell.day)">
+                        <span v-if="cell.day" class="cal-day-num">{{ cell.day }}</span>
+                        <div v-if="cell.members.length" class="cal-dots">
+                          <span v-for="m in cell.members.slice(0, 3)" :key="m.id" class="cal-dot"
+                            :style="{ background: levelDotColor(m.level) }"
                             :title="m.name + '（' + m.level + '）'"></span>
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </div>
-                <!-- 生日会员列表 -->
-                <div class="cal-list-title" v-if="birthdayMonthData.length">
-                  <span v-if="selectedBirthdayDay != null">{{ birthdayMonth }}月{{ selectedBirthdayDay }}日 · {{ birthdayDisplayList.length }} 位</span>
-                  <span v-else>本月共 {{ birthdayMonthData.length }} 位会员生日</span>
-                  <span v-if="selectedBirthdayDay != null" class="cal-list-reset" @click="selectedBirthdayDay = null">查看全部</span>
-                </div>
-                <div v-if="birthdayDisplayList.length" class="timeline-list cal-member-list">
-                  <div v-for="item in birthdayDisplayList" :key="item.id" class="birthday-item">
-                    <div class="birthday-day-badge">{{ item.day }}日</div>
-                    <div class="birthday-info">
-                      <div class="birthday-name">
-                        {{ item.name }}
-                        <span class="birthday-level-tag" :style="levelTagStyle(item.level)">{{ item.level }}</span>
+                    <!-- 生日会员列表 -->
+                    <div class="cal-list-title" v-if="birthdayMonthData.length">
+                      <span v-if="selectedBirthdayDay != null">{{ birthdayMonth }}月{{ selectedBirthdayDay }}日 · {{
+                        birthdayDisplayList.length }} 位</span>
+                      <span v-else>本月共 {{ birthdayMonthData.length }} 位会员生日</span>
+                      <span v-if="selectedBirthdayDay != null" class="cal-list-reset"
+                        @click="selectedBirthdayDay = null">查看全部</span>
+                    </div>
+                    <div v-if="birthdayDisplayList.length" class="timeline-list cal-member-list">
+                      <div v-for="item in birthdayDisplayList" :key="item.id" class="birthday-item">
+                        <div class="birthday-day-badge">{{ item.day }}日</div>
+                        <div class="birthday-info">
+                          <div class="birthday-name">
+                            {{ item.name }}
+                            <span class="birthday-level-tag" :style="levelTagStyle(item.level)">{{ item.level }}</span>
+                          </div>
+                          <div class="birthday-phone">{{ item.phone }}</div>
+                          <div class="birthday-amount">累计消费 ¥{{ item.totalAmount }}</div>
+                        </div>
+                        <button class="quick-book-btn" @click="handleBirthdayCall(item)">发祝福</button>
                       </div>
-                      <div class="birthday-phone">{{ item.phone }}</div>
-                      <div class="birthday-amount">累计消费 ¥{{ item.totalAmount }}</div>
                     </div>
-                    <button class="quick-book-btn" @click="handleBirthdayCall(item)">发祝福</button>
+                    <div v-else-if="birthdayMonthData.length && selectedBirthdayDay != null" class="empty-tip">{{
+                      birthdayMonth }}月{{ selectedBirthdayDay }}日暂无会员生日</div>
+                    <div v-else class="empty-tip">本月暂无会员生日</div>
                   </div>
-                </div>
-                <div v-else-if="birthdayMonthData.length && selectedBirthdayDay != null" class="empty-tip">{{ birthdayMonth }}月{{ selectedBirthdayDay }}日暂无会员生日</div>
-                <div v-else class="empty-tip">本月暂无会员生日</div>
-              </div>
-            </el-tab-pane>
-            <el-tab-pane label="沉睡提醒" name="sleeping">
-              <div v-if="sleepingMembers.length" class="timeline-list">
-                <div v-for="item in sleepingMembers" :key="item.id" class="sleeping-item">
-                  <div class="sleeping-days">{{ item.days }}天</div>
-                  <div class="sleeping-info">
-                    <div class="sleeping-name">{{ item.name }}
-                      <span class="sleeping-level">{{ item.level }}</span>
+                </el-tab-pane>
+                <el-tab-pane label="沉睡提醒" name="sleeping">
+                  <div v-if="sleepingMembers.length" class="timeline-list">
+                    <div v-for="item in sleepingMembers" :key="item.id" class="sleeping-item">
+                      <div class="sleeping-days">{{ item.days }}天</div>
+                      <div class="sleeping-info">
+                        <div class="sleeping-name">
+                          {{ item.name }}
+                          <span class="sleeping-level">{{ item.level }}</span>
+                        </div>
+                        <div class="sleeping-phone">{{ item.phone }}</div>
+                        <div class="sleeping-last">最后到店：{{ item.lastVisit }} · 余额 ¥{{ item.balance }}</div>
+                      </div>
+                      <button class="quick-book-btn" @click="handleSleepingCall(item)">去邀约</button>
                     </div>
-                    <div class="sleeping-phone">{{ item.phone }}</div>
-                    <div class="sleeping-last">最后到店：{{ item.lastVisit }} · 余额 ¥{{ item.balance }}</div>
                   </div>
-                  <button class="quick-book-btn" @click="handleSleepingCall(item)">去邀约</button>
-                </div>
-              </div>
-              <div v-else class="empty-tip">暂无沉睡会员</div>
-            </el-tab-pane>
-          </el-tabs>
-        </el-card>
+                  <div v-else class="empty-tip">暂无沉睡会员</div>
+                </el-tab-pane>
+              </el-tabs>
+            </el-card>
+          </div>
+        </transition>
       </div>
     </div>
-    <member-profile-dialog :visible.sync="memberDialogVisible" :member="activeMember || {}" />
+    <member-profile-dialog
+      :visible.sync="memberDialogVisible"
+      :member="activeMember || {}"
+      @action="handleMemberAction"
+    />
     <tuoke-lead-dialog :visible.sync="tuokeDialogVisible" />
-    <invite-add-dialog :visible.sync="inviteDialogVisible" />
     <booking-dialog :visible.sync="bookingDialogVisible" :prefill="bookingPrefill" />
     <billing-dialog :visible.sync="billingDialogVisible" :prefill="billingPrefill" />
     <consume-dialog :visible.sync="consumeDialogVisible" />
     <refund-dialog :visible.sync="refundDialogVisible" />
     <tuoke-list-dialog :visible.sync="tuokeListVisible" />
-    <invite-list-dialog :visible.sync="inviteListVisible" />
     <booking-calendar-dialog :visible.sync="bookingCalendarVisible" />
     <billing-list-dialog :visible.sync="billingListVisible" />
     <consume-list-dialog :visible.sync="consumeListVisible" />
@@ -312,18 +369,21 @@
       :current-store-name="currentStoreName"
       :month-value="storeTargetMonthValue"
     />
+    <invite-add-dialog :visible.sync="contactDialogVisible" />
+    <company-calendar-dialog :visible.sync="companyCalendarVisible" />
     <!-- 切换门店弹窗 -->
-    <el-dialog :visible.sync="storeSwitchDialogVisible" width="420px" append-to-body
-      custom-class="store-switch-dialog" :show-close="false">
+    <el-dialog :visible.sync="storeSwitchDialogVisible" width="420px" append-to-body custom-class="store-switch-dialog"
+      :show-close="false">
       <div class="store-switch-inner">
         <div class="store-switch-header">
           <div class="store-switch-title">切换门店</div>
-          <span class="store-switch-close" @click="storeSwitchDialogVisible = false"><i class="el-icon-close"></i></span>
+          <span class="store-switch-close" @click="storeSwitchDialogVisible = false"><i
+              class="el-icon-close"></i></span>
         </div>
         <div class="store-switch-content">
           <div v-for="s in storeList" :key="s.id"
-               :class="['store-switch-item', { 'store-switch-item--active': s.id === currentStoreId }]"
-               @click="handleStoreSwitch(s)">
+            :class="['store-switch-item', { 'store-switch-item--active': s.id === currentStoreId }]"
+            @click="handleStoreSwitch(s)">
             <div class="store-switch-icon">
               <span>{{ (s.name || '').replace(/店$/, '')[0] || '店' }}</span>
             </div>
@@ -348,12 +408,12 @@
 import MemberProfileDialog from '@/components/MemberProfileDialog.vue'
 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 BillingDialog from '@/components/BillingDialog.vue'
 import ConsumeDialog from '@/components/ConsumeDialog.vue'
 import RefundDialog from '@/components/RefundDialog.vue'
 import TuokeListDialog from '@/components/TuokeListDialog.vue'
-import InviteListDialog from '@/components/InviteListDialog.vue'
 import BookingCalendarDialog from '@/components/BookingCalendarDialog.vue'
 import BillingListDialog from '@/components/BillingListDialog.vue'
 import ConsumeListDialog from '@/components/ConsumeListDialog.vue'
@@ -367,12 +427,12 @@ export default {
     MemberProfileDialog,
     TuokeLeadDialog,
     InviteAddDialog,
+    CompanyCalendarDialog,
     BookingDialog,
     BillingDialog,
     ConsumeDialog,
     RefundDialog,
     TuokeListDialog,
-    InviteListDialog,
     BookingCalendarDialog,
     BillingListDialog,
     ConsumeListDialog,
@@ -389,6 +449,8 @@ export default {
       memberKeyword: '',
       memberDialogVisible: false,
       activeMember: null,
+      contactDialogVisible: false,
+      companyCalendarVisible: false,
       storeSwitchDialogVisible: false,
       currentStoreId: 'S001',
       // 用户可访问门店：通常 1 个（归属店），借调时 2 个，最多 3 个
@@ -415,30 +477,57 @@ export default {
         { id: 'M016', khmc: '冯丽娟', sjh: '15500155723', dah: 'GK2023081501015', level: 'B', levelKey: 'b', gsmdName: '融创店', lastVisit: '2025-12-25', sleepDays: 0, remainingAmount: '0.73万', totalConsume: '7.3万' },
         { id: 'M017', khmc: '蒋雪梅', sjh: '17700177634', dah: 'GK2023102201016', level: 'A+', levelKey: 'aplus', gsmdName: '西站店', lastVisit: '2026-02-01', sleepDays: 0, remainingAmount: '2.85万', totalConsume: '28.5万' }
       ],
-      todayTab: 'invite',
-      monthlyDone: 86420,
-      monthlyTarget: 150000,
+      todayTab: 'todo',
       overviewStats: [
         {
-          key: 'invite',
-          label: '今日邀约',
-          value: 12,
-          subText: '待联系 7 · 已到店 5',
-          tag: '潜客'
+          key: 'headCount',
+          label: '人头数',
+          today: 42,
+          month: 260,
+          tag: '客流'
         },
         {
-          key: 'booking',
-          label: '今日预约',
-          value: 8,
-          subText: '进行中 3 · 已完成 5',
-          tag: '到店'
+          key: 'visitCount',
+          label: '人次数',
+          today: 58,
+          month: 380,
+          tag: '频次'
         },
         {
-          key: 'order',
-          label: '今日业绩',
-          value: '¥18,360',
-          subText: '开单 6 · 客次 11',
-          tag: '收银'
+          key: 'projectCount',
+          label: '项目数',
+          today: 96,
+          month: 1240,
+          tag: '项目'
+        },
+        {
+          key: 'consumeAmount',
+          label: '消耗金额',
+          today: '¥63,580',
+          month: '¥1,236,800',
+          tag: '消耗'
+        },
+        {
+          key: 'refundAmount',
+          label: '退卡金额',
+          today: '¥12,400',
+          month: '¥45,300',
+          tag: '退卡'
+        }
+      ],
+      // 我的待办列表（后续可扩展更多待办）
+      todoList: [
+        {
+          key: 'goldTriangle',
+          title: '请设置下月金三角',
+          desc: '确保下月业绩分配和责任人明确',
+          tag: '门店规划'
+        },
+        {
+          key: 'storeTarget',
+          title: '请设置门店目标',
+          desc: '设置本月/下月门店业绩目标，便于进度跟踪',
+          tag: '业绩目标'
         }
       ],
       modules: [
@@ -454,17 +543,6 @@ export default {
           secondaryText: '查看拓客数据'
         },
         {
-          key: 'invite',
-          title: '邀约管理',
-          subtitle: '',
-          icon: 'el-icon-phone-outline',
-          iconBg: 'linear-gradient(135deg, #0ea5e9, #22c55e)',
-          metricValue: 0,
-          metricLabel: '待跟进邀约',
-          primaryAction: '新建邀约',
-          secondaryText: '查看邀约记录'
-        },
-        {
           key: 'booking',
           title: '预约管理',
           subtitle: '',
@@ -540,88 +618,7 @@ export default {
           secondaryText: ''
         }
       ],
-      todayInvite: [
-        {
-          id: 'TI202603020001',
-          time: '09:10',
-          name: '林小纤',
-          mobile: '13800138000',
-          dhsfyx: '是',
-          lxjl: '邀约周末面部深层护理体验，客户有兴趣。'
-        },
-        {
-          id: 'TI202603020002',
-          time: '09:35',
-          name: '王丽',
-          mobile: '13800138001',
-          dhsfyx: '是',
-          lxjl: '介绍肩颈调理活动，已确认可到店。'
-        },
-        {
-          id: 'TI202603020003',
-          time: '10:05',
-          name: '张敏',
-          mobile: '13800138002',
-          dhsfyx: '否',
-          lxjl: '电话无人接听，准备稍后再次联系。'
-        },
-        {
-          id: 'TI202603020004',
-          time: '10:40',
-          name: '赵云',
-          mobile: '13800138003',
-          dhsfyx: '是',
-          lxjl: '邀约身体舒缓护理体验，客户需与家人确认时间。'
-        },
-        {
-          id: 'TI202603020005',
-          time: '11:20',
-          name: '刘芳',
-          mobile: '13800138004',
-          dhsfyx: '是',
-          lxjl: '眼周护理体验回访，客户反馈效果不错。'
-        },
-        {
-          id: 'TI202603020006',
-          time: '13:15',
-          name: '陈洁',
-          mobile: '13800138005',
-          dhsfyx: '是',
-          lxjl: '面部护理加购邀约，客户考虑本周安排。'
-        },
-        {
-          id: 'TI202603020007',
-          time: '14:00',
-          name: '周雪',
-          mobile: '13800138006',
-          dhsfyx: '否',
-          lxjl: '电话为空号，准备核实客户信息。'
-        },
-        {
-          id: 'TI202603020008',
-          time: '15:10',
-          name: '李楠',
-          mobile: '13800138007',
-          dhsfyx: '是',
-          lxjl: '身体护理活动邀约，客户希望下班后再联系。'
-        },
-        {
-          id: 'TI202603020009',
-          time: '16:25',
-          name: '何倩',
-          mobile: '13800138008',
-          dhsfyx: '是',
-          lxjl: '生日关怀邀约，初步定周末到店。'
-        },
-        {
-          id: 'TI202603020010',
-          time: '17:40',
-          name: '孙悦',
-          mobile: '13800138009',
-          dhsfyx: '是',
-          lxjl: '眼周护理复查邀约，客户暂不方便到店。'
-        }
-      ],
+      todayInvite: [],
       todayBooking: [
         {
           id: 'TB202603020001',
@@ -770,7 +767,6 @@ export default {
         { id: 'S004', name: '赵海燕', days: 60, phone: '186****0023', level: 'B', lastVisit: '2025-01-06', balance: '1,600' }
       ],
       tuokeDialogVisible: false,
-      inviteDialogVisible: false,
       bookingDialogVisible: false,
       bookingPrefill: {
         name: '',
@@ -781,12 +777,18 @@ export default {
       consumeDialogVisible: false,
       refundDialogVisible: false,
       tuokeListVisible: false,
-      inviteListVisible: false,
       bookingCalendarVisible: false,
       billingListVisible: false,
       consumeListVisible: false,
       refundListVisible: false,
-      goldTriangleDialogVisible: false
+      goldTriangleDialogVisible: false,
+      // 提醒中心侧栏状态（今日预约 / 生日提醒 / 沉睡提醒）
+      // reminderDefaultOpen 可作为默认展开/收起开关
+      reminderDefaultOpen: false,
+      reminderCenterOpen: false,
+      // 提醒中心侧栏：首屏渲染完成后再启用滑动动画
+      reminderFirstRenderDone: false,
+      currentReminderType: 'booking'
     }
   },
   computed: {
@@ -849,6 +851,39 @@ export default {
       const now = new Date()
       const next = new Date(now.getFullYear(), now.getMonth() + 1, 1)
       return `${next.getFullYear()}${String(next.getMonth() + 1).padStart(2, '0')}`
+    },
+    // 提醒中心入口数据（用于窄栏徽标统计）
+    reminderEntries() {
+      const today = new Date()
+      const month = today.getMonth() + 1
+      const day = today.getDate()
+      const birthdayTodayCount = this.birthdayAllData.filter(m => m.month === month && m.day === day).length
+      return [
+        {
+          key: 'todo',
+          label: '我的待办',
+          count: this.todoList.length,
+          icon: 'el-icon-warning-outline'
+        },
+        {
+          key: 'booking',
+          label: '今日预约',
+          count: this.todayBooking.length,
+          icon: 'el-icon-date'
+        },
+        {
+          key: 'birthday',
+          label: '生日提醒',
+          count: birthdayTodayCount,
+          icon: 'el-icon-gift'
+        },
+        {
+          key: 'sleeping',
+          label: '沉睡提醒',
+          count: this.sleepingMembers.length,
+          icon: 'el-icon-moon'
+        }
+      ]
     }
   },
   mounted() {
@@ -866,6 +901,23 @@ export default {
     }
     fmt()
     this.clockTimer = setInterval(fmt, 1000)
+
+    // 提醒中心默认展开/收起与上次状态（可配置）
+    const savedOpen = localStorage.getItem('store_reminder_open')
+    const savedType = localStorage.getItem('store_reminder_type')
+    const validTypes = ['todo', 'booking', 'birthday', 'sleeping']
+    if (savedType && validTypes.includes(savedType)) {
+      this.currentReminderType = savedType
+      this.todayTab = savedType
+    }
+    if (savedOpen !== null) {
+      this.reminderCenterOpen = savedOpen === '1'
+    } else {
+      this.reminderCenterOpen = this.reminderDefaultOpen
+    }
+    this.$nextTick(() => {
+      this.reminderFirstRenderDone = true
+    })
   },
   beforeDestroy() {
     document.removeEventListener('fullscreenchange', this.onFullscreenChange)
@@ -874,9 +926,9 @@ export default {
   methods: {
     toggleFullscreen() {
       if (!document.fullscreenElement) {
-        document.documentElement.requestFullscreen().catch(() => {})
+        document.documentElement.requestFullscreen().catch(() => { })
       } else {
-        document.exitFullscreen().catch(() => {})
+        document.exitFullscreen().catch(() => { })
       }
     },
     onFullscreenChange() {
@@ -893,7 +945,7 @@ export default {
         }).then(() => {
           localStorage.removeItem('store_token')
           this.$router.push('/login')
-        }).catch(() => {})
+        }).catch(() => { })
       } else if (cmd === 'profile') {
         this.$message.info('个人信息功能开发中')
       } else if (cmd === 'password') {
@@ -905,10 +957,6 @@ export default {
         this.tuokeDialogVisible = true
         return
       }
-      if (module.key === 'invite') {
-        this.inviteDialogVisible = true
-        return
-      }
       if (module.key === 'booking') {
         this.bookingPrefill = { name: '', phone: '' }
         this.bookingDialogVisible = true
@@ -1121,6 +1169,15 @@ export default {
       }
       this.memberDialogVisible = true
     },
+    handleMemberAction(payload) {
+      if (!payload || !payload.type) return
+      const { type } = payload
+      if (type === 'invite') {
+        // 添加沟通记录：仅打开沟通记录表单
+        this.contactDialogVisible = true
+      }
+      // 其它类型（booking / billing / consume / refund）暂时保持原有入口按钮逻辑
+    },
     handleQuickBooking(item) {
       this.bookingPrefill = {
         name: item.name,
@@ -1157,6 +1214,34 @@ export default {
     handleSleepingCall(item) {
       this.$message.info(`正在为 ${item.name} 创建邀约...`)
     },
+    handleCancelBooking(item) {
+      this.$confirm(`确定要取消「${item.name}」在 ${item.date} ${item.timeRange} 的预约吗？`, '取消预约确认', {
+        confirmButtonText: '确定',
+        cancelButtonText: '再想想',
+        type: 'warning'
+      }).then(() => {
+        this.$message.success('预约已标记为取消（示例）')
+      }).catch(() => {})
+    },
+    handleConfirmConsume(item) {
+      this.$confirm(`确认「${item.name}」本次预约已完成并产生消耗吗？`, '确认消耗', {
+        confirmButtonText: '确定',
+        cancelButtonText: '再想想',
+        type: 'info'
+      }).then(() => {
+        this.$message.success('已标记为已消耗（示例）')
+      }).catch(() => {})
+    },
+    handleTodoClick(item) {
+      if (!item || !item.key) return
+      if (item.key === 'goldTriangle') {
+        this.goldTriangleDialogVisible = true
+        return
+      }
+      if (item.key === 'storeTarget') {
+        this.storeTargetDialogVisible = true
+      }
+    },
     selectBirthdayDay(day) {
       this.selectedBirthdayDay = this.selectedBirthdayDay === day ? null : day
     },
@@ -1212,7 +1297,6 @@ export default {
       }
       const map = {
         tuoke: 'tuokeListVisible',
-        invite: 'inviteListVisible',
         booking: 'bookingCalendarVisible',
         order: 'billingListVisible',
         consume: 'consumeListVisible',
@@ -1220,6 +1304,29 @@ export default {
       }
       const key = map[module.key]
       if (key) this[key] = true
+    },
+    // 提醒中心侧栏：入口点击
+    handleReminderEntryClick(type) {
+      if (this.reminderCenterOpen && this.currentReminderType === type) {
+        this.reminderCenterOpen = false
+        localStorage.setItem('store_reminder_open', '0')
+        return
+      }
+      this.currentReminderType = type
+      this.todayTab = type
+      this.reminderCenterOpen = true
+      localStorage.setItem('store_reminder_open', '1')
+      localStorage.setItem('store_reminder_type', this.currentReminderType)
+    },
+    // 提醒中心侧栏：面板显隐
+    toggleReminderCenter(open) {
+      this.reminderCenterOpen = open
+      localStorage.setItem('store_reminder_open', open ? '1' : '0')
+    },
+    // 提醒中心侧栏：Tab 切换时同步当前类型
+    handleTodayTabClick(tab) {
+      this.currentReminderType = tab.name
+      localStorage.setItem('store_reminder_type', this.currentReminderType)
     }
   }
 }
@@ -1228,12 +1335,13 @@ export default {
 <style lang="scss" scoped>
 .dashboard-page {
   height: 100%;
-  padding: 24px 28px;
+  padding: 24px 20px 24px 28px;
   background: radial-gradient(circle at 10% 20%, #eef2ff 0, #eef2ff 26%, #fdf2ff 60%, #fff7ed 100%);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  position: relative;
 }
 
 .top-bar-right {
@@ -1242,38 +1350,8 @@ export default {
   gap: 12px;
   min-width: 0;
 }
-.reminder-inline {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  padding: 6px 12px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, #fffbeb, #fef3c7);
-  border: 1px solid #fde68a;
-  font-size: 13px;
-  color: #92400e;
-}
-.reminder-inline .reminder-icon {
-  font-size: 14px;
-  margin-right: 4px;
-  color: #f59e0b;
-}
-.reminder-inline .reminder-label {
-  font-weight: 600;
-  margin-right: 2px;
-}
-.reminder-inline .reminder-item {
-  cursor: pointer;
-  color: #2563eb;
-  font-weight: 500;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-.reminder-inline .reminder-sep {
-  color: #92400e;
-  margin: 0 1px;
-}
+
+/* 顶部我的待办样式已移动到右侧工具栏 */
 
 .top-bar {
   display: grid;
@@ -1289,6 +1367,36 @@ export default {
   max-width: 420px;
 }
 
+.calendar-entry {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #e0f2fe, #ddd6fe);
+  border: 1px solid rgba(129, 140, 248, 0.55);
+  color: #1d4ed8;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+
+.calendar-entry-icon {
+  font-size: 16px;
+}
+
+.calendar-entry-text {
+  white-space: nowrap;
+}
+
+.calendar-entry:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
+}
+
 @media (max-width: 1024px) {
   .top-bar-right {
     flex-wrap: wrap;
@@ -1307,12 +1415,16 @@ export default {
     margin-top: 4px;
     font-size: 14px;
     color: #5b6b7a;
+
     .schedule-link {
       margin-left: 12px;
       color: #6366f1;
       cursor: pointer;
       font-weight: 500;
-      &:hover { text-decoration: underline; }
+
+      &:hover {
+        text-decoration: underline;
+      }
     }
   }
 }
@@ -1342,13 +1454,44 @@ export default {
   font-weight: 600;
   flex-shrink: 0;
 }
-.suggestion-level.level--aplusplus { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
-.suggestion-level.level--aplus { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
-.suggestion-level.level--a { background: rgba(245,158,11,0.12); color: #d97706; border: 1px solid rgba(245,158,11,0.25); }
-.suggestion-level.level--b { background: rgba(34,197,94,0.12); color: #16a34a; border: 1px solid rgba(34,197,94,0.25); }
-.suggestion-level.level--c { background: rgba(59,130,246,0.12); color: #2563eb; border: 1px solid rgba(59,130,246,0.25); }
-.suggestion-level.level--d { background: #e5e7eb; color: #6b7280; }
-.suggestion-level.level--default { background: #e5e7eb; color: #6b7280; }
+
+.suggestion-level.level--aplusplus {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: #fff;
+}
+
+.suggestion-level.level--aplus {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+  color: #fff;
+}
+
+.suggestion-level.level--a {
+  background: rgba(245, 158, 11, 0.12);
+  color: #d97706;
+  border: 1px solid rgba(245, 158, 11, 0.25);
+}
+
+.suggestion-level.level--b {
+  background: rgba(34, 197, 94, 0.12);
+  color: #16a34a;
+  border: 1px solid rgba(34, 197, 94, 0.25);
+}
+
+.suggestion-level.level--c {
+  background: rgba(59, 130, 246, 0.12);
+  color: #2563eb;
+  border: 1px solid rgba(59, 130, 246, 0.25);
+}
+
+.suggestion-level.level--d {
+  background: #e5e7eb;
+  color: #6b7280;
+}
+
+.suggestion-level.level--default {
+  background: #e5e7eb;
+  color: #6b7280;
+}
 
 .suggestion-meta {
   display: flex;
@@ -1357,11 +1500,13 @@ export default {
   font-size: 12px;
   color: #64748b;
 }
+
 .suggestion-meta span {
   display: flex;
   align-items: center;
   gap: 4px;
 }
+
 .suggestion-meta i {
   font-size: 12px;
   color: #94a3b8;
@@ -1394,6 +1539,7 @@ export default {
 
 .member-search-input {
   width: 100%;
+
   ::v-deep .el-input__inner {
     border-radius: 999px;
     padding-left: 40px;
@@ -1449,6 +1595,7 @@ export default {
   color: #64748b;
   font-size: 16px;
   transition: all 0.2s ease;
+
   &:hover {
     background: rgba(99, 102, 241, 0.08);
     border-color: rgba(99, 102, 241, 0.25);
@@ -1469,6 +1616,7 @@ export default {
   border: 1px solid rgba(226, 232, 240, 0.8);
   background: rgba(241, 245, 249, 0.9);
   transition: all 0.2s ease;
+
   &:hover {
     background: rgba(99, 102, 241, 0.06);
     border-color: rgba(99, 102, 241, 0.2);
@@ -1520,15 +1668,20 @@ export default {
   align-items: center;
   gap: 8px;
   line-height: 1.4;
+
   &:hover {
     background: rgba(99, 102, 241, 0.06);
     color: #4f46e5;
   }
-  i { font-size: 15px; }
+
+  i {
+    font-size: 15px;
+  }
 }
 
 ::v-deep .user-dropdown-menu .dropdown-item--danger {
   color: #ef4444 !important;
+
   &:hover {
     background: rgba(239, 68, 68, 0.06) !important;
     color: #dc2626 !important;
@@ -1578,7 +1731,7 @@ export default {
 
 .layout-grid {
   display: grid;
-  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr);
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 20px;
   flex: 1;
   min-height: 0;
@@ -1593,8 +1746,15 @@ export default {
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
-  &::-webkit-scrollbar { width: 4px; }
-  &::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 2px; }
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(148, 163, 184, 0.3);
+    border-radius: 2px;
+  }
 }
 
 .modules-grid {
@@ -1609,15 +1769,25 @@ export default {
   .overview-card {
     border-radius: 16px;
     border: none;
+    background: #ffffff;
     box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
   }
 }
 
+.overview-row-inner {
+  display: flex;
+}
+
+.overview-row-inner > .el-col {
+  flex: 1 1 0;
+  max-width: none;
+}
+
 .overview-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 4px;
+  margin-bottom: 6px;
 
   .label {
     font-size: 14px;
@@ -1634,15 +1804,91 @@ export default {
 }
 
 .overview-value {
-  font-size: 26px;
+  font-size: 18px;
   font-weight: 600;
   color: #111827;
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
 }
 
 .overview-sub {
   margin-top: 4px;
   font-size: 13px;
   color: #9ca3af;
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.overview-card-inner {
+  display: flex;
+  flex-direction: column;
+  row-gap: 6px;
+}
+
+.overview-main {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.overview-main-value {
+  font-size: 26px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.overview-secondary {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.overview-secondary-label {
+  padding: 0 6px;
+  border-radius: 999px;
+  background: #f3f4f6;
+  font-size: 11px;
+}
+
+.overview-secondary-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: #374151;
+}
+
+/* 顶部统计：不同指标的内部色彩区分（保持白底统一） */
+.overview-card--headCount {
+  .overview-main-value {
+    color: #1d4ed8;
+  }
+}
+
+.overview-card--visitCount {
+  .overview-main-value {
+    color: #4f46e5;
+  }
+}
+
+.overview-card--projectCount {
+  .overview-main-value {
+    color: #be185d;
+  }
+}
+
+.overview-card--consumeAmount {
+  .overview-main-value {
+    color: #047857;
+  }
+}
+
+.overview-card--refundAmount {
+  .overview-main-value {
+    color: #c2410c;
+  }
 }
 
 .modules-grid .module-card {
@@ -1751,6 +1997,7 @@ export default {
     box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
     cursor: pointer;
     transition: background 0.15s, box-shadow 0.15s;
+
     &:hover {
       background: #1d4ed8;
       box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
@@ -1763,6 +2010,7 @@ export default {
     cursor: pointer;
     font-weight: 500;
     transition: color 0.15s;
+
     &:hover {
       color: #1d4ed8;
       text-decoration: underline;
@@ -1782,24 +2030,182 @@ export default {
   }
 }
 
-.right-column {
+/* 提醒中心侧栏 - 容器 */
+.reminder-center {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: stretch;
+}
+
+/* 提醒中心侧栏 - 窄栏入口 */
+.reminder-center-toggle {
+  width: 88px;
+  background: #ffffff;
+  border-radius: 18px;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
   display: flex;
   flex-direction: column;
-  min-height: 0;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 10px 4px;
+  gap: 6px;
+  pointer-events: auto;
+}
+
+/* 我的待办入口样式复用提醒入口，无需额外样式 */
+
+.reminder-toggle-item {
+  width: 100%;
+  border-radius: 12px;
+  padding: 8px 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  cursor: pointer;
+  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.reminder-toggle-item .label-text {
+  font-size: 12px;
+  color: #4b5563;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  width: 100%;
+}
+
+.entry-icon-wrap {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #e5edff, #e0f2fe);
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+
+.entry-icon-wrap .entry-icon {
+  font-size: 18px;
+  color: #ffffff;
+}
+
+/* 提醒中心入口样式：不同类型入口渐变色 */
+.entry-icon-wrap--invite {
+  background: linear-gradient(135deg, #0ea5e9, #22c55e);
+}
+
+.entry-icon-wrap--booking {
+  background: linear-gradient(135deg, #f97316, #facc15);
+}
+
+.entry-icon-wrap--birthday {
+  background: linear-gradient(135deg, #ec4899, #8b5cf6);
+}
+
+.entry-icon-wrap--sleeping {
+  background: linear-gradient(135deg, #6366f1, #0ea5e9);
 }
 
-.right-column .today-card {
+/* 我的待办图标底色：橙粉渐变，区分其他入口 */
+.entry-icon-wrap--todo {
+  background: linear-gradient(135deg, #f97316, #ec4899);
+}
+
+.reminder-badge {
+  display: inline-block;
+}
+
+.reminder-toggle-item .reminder-badge {
+  /* 提醒中心入口样式：数字角标位置微调贴近图标右上角 */
+  ::v-deep .el-badge__content {
+    background-color: #ef4444;
+    border: none;
+    box-shadow: 0 0 0 1px #fee2e2;
+    right: 2px;
+    top: 2px;
+    padding: 0 4px;
+    height: 16px;
+    line-height: 16px;
+    font-size: 11px;
+  }
+}
+
+.entry-icon {
+  flex-shrink: 0;
+}
+
+.reminder-toggle-item.is-active {
+  background: linear-gradient(180deg, rgba(59, 130, 246, 0.06), rgba(59, 130, 246, 0.10));
+}
+
+.reminder-toggle-item.is-active .label-text {
+  color: #1d4ed8;
+  font-weight: 600;
+}
+
+.reminder-toggle-item.is-active .entry-icon-wrap {
+  /* 点击后仅轻微高亮，不再增加额外阴影 */
+  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
+}
+
+.reminder-toggle-item.todo-entry {
+  /* 未选中时完全使用通用样式，不额外高亮 */
+}
+
+.reminder-toggle-item.todo-entry.is-active {
+  background: linear-gradient(180deg, rgba(253, 230, 138, 1), rgba(252, 165, 165, 1));
+}
+
+.reminder-toggle-item.todo-entry .label-text {
+  color: #92400e;
+  font-weight: 600;
+}
+
+.reminder-toggle-close {
+  margin-top: 4px;
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.04);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #6b7280;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.reminder-toggle-close:hover {
+  background: rgba(59, 130, 246, 0.16);
+  color: #1d4ed8;
+}
+
+/* 提醒中心侧栏 - 主体卡片（右侧有间距滑出） */
+.reminder-center-panel {
+  width: 400px;
+  margin-right: 20px;
+  pointer-events: auto;
+  display: flex;
+}
+
+/* 提醒面板布局：独立四角圆角卡片 */
+.reminder-center-panel .today-card {
   border-radius: 18px;
   border: none;
-  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
   flex: 1;
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
-/* el-card 内部撑满 */
-.right-column .today-card ::v-deep .el-card__body {
+.reminder-center-panel .today-card ::v-deep .el-card__body {
   flex: 1;
   min-height: 0;
   display: flex;
@@ -1807,34 +2213,56 @@ export default {
   overflow: hidden;
 }
 
-/* el-tabs 撑满 */
-.right-column .today-card ::v-deep .el-tabs {
+.reminder-center-panel .today-card ::v-deep .el-tabs {
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
 
-.right-column .today-card ::v-deep .el-tabs__content {
+.reminder-center-panel .today-card ::v-deep .el-tabs__content {
   flex: 1;
   min-height: 0;
   overflow: hidden;
 }
 
-.right-column .today-card ::v-deep .el-tab-pane {
+.reminder-center-panel .today-card ::v-deep .el-tab-pane {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
+/* 提醒中心侧栏 - 进出场动画 */
+.reminder-center-slide-enter-active,
+.reminder-center-slide-leave-active {
+  transition: transform 0.25s ease;
+}
+
+.reminder-center-slide-enter,
+.reminder-center-slide-leave-to {
+  transform: translateX(100%);
+}
+
+.reminder-center-slide-enter-to,
+.reminder-center-slide-leave {
+  transform: translateX(0);
+}
+
 .timeline-list {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
-  &::-webkit-scrollbar { width: 4px; }
-  &::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 2px; }
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(148, 163, 184, 0.3);
+    border-radius: 2px;
+  }
 }
 
 .timeline-item {
@@ -1859,14 +2287,18 @@ export default {
     display: flex;
     align-items: center;
     gap: 6px;
+    white-space: nowrap;
 
     .name {
       color: #111827;
       font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .mobile {
       color: #6b7280;
+      flex-shrink: 0;
     }
   }
 
@@ -1880,10 +2312,33 @@ export default {
     .project {
       color: #6b7280;
       flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 }
 
+.booking-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.booking-action-btn {
+  padding: 0 4px;
+  font-size: 12px;
+}
+
+.booking-action-btn--cancel {
+  color: #f97316;
+}
+
+.booking-action-btn--confirm {
+  color: #16a34a;
+}
+
 .quick-book-btn {
   flex-shrink: 0;
   border: none;
@@ -1945,7 +2400,7 @@ export default {
   flex: 1;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   font-size: 13px;
   color: #9ca3af;
 }
@@ -2070,7 +2525,11 @@ export default {
   color: #64748b;
   font-size: 13px;
   transition: all 0.2s;
-  &:hover { background: rgba(99, 102, 241, 0.08); color: #4f46e5; }
+
+  &:hover {
+    background: rgba(99, 102, 241, 0.08);
+    color: #4f46e5;
+  }
 }
 
 .cal-weekdays {
@@ -2103,9 +2562,19 @@ export default {
   align-items: center;
   padding: 3px 2px;
   transition: background 0.15s;
-  &--empty { background: transparent; }
-  &:not(.cal-cell--empty) { cursor: pointer; }
-  &--has-birthday { background: rgba(99, 102, 241, 0.04); }
+
+  &--empty {
+    background: transparent;
+  }
+
+  &:not(.cal-cell--empty) {
+    cursor: pointer;
+  }
+
+  &--has-birthday {
+    background: rgba(99, 102, 241, 0.04);
+  }
+
   &--selected {
     background: rgba(99, 102, 241, 0.15);
     box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3);
@@ -2147,7 +2616,10 @@ export default {
   color: #6366f1;
   cursor: pointer;
   font-weight: 500;
-  &:hover { text-decoration: underline; }
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .cal-member-list {
@@ -2161,7 +2633,10 @@ export default {
   gap: 10px;
   padding: 8px 0;
   border-bottom: 1px solid #f1f5f9;
-  &:last-child { border-bottom: none; }
+
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 .sleeping-item {
@@ -2170,7 +2645,10 @@ export default {
   gap: 10px;
   padding: 10px 0;
   border-bottom: 1px solid #f1f5f9;
-  &:last-child { border-bottom: none; }
+
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 .birthday-day-badge {
@@ -2202,6 +2680,9 @@ export default {
   display: flex;
   align-items: center;
   gap: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .birthday-level-tag {
@@ -2217,6 +2698,9 @@ export default {
   font-size: 12px;
   color: #94a3b8;
   margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .birthday-amount,
@@ -2224,6 +2708,9 @@ export default {
   font-size: 11px;
   color: #64748b;
   margin-top: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sleeping-days {
@@ -2254,7 +2741,7 @@ export default {
 
 @media (max-width: 1024px) {
   .layout-grid {
-    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr);
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 
@@ -2279,6 +2766,7 @@ export default {
 .member-search-dropdown {
   min-width: 420px !important;
   max-height: 360px;
+
   .el-autocomplete-suggestion__list li {
     padding: 10px 14px;
     line-height: 1.4;
@@ -2289,8 +2777,8 @@ export default {
 .store-switch-dialog {
   border-radius: 20px !important;
   padding: 0 !important;
-  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%) !important;
-  box-shadow: 0 24px 48px rgba(15,23,42,0.18), 0 0 0 1px rgba(255,255,255,0.9) !important;
+  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%) !important;
+  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
   backdrop-filter: blur(22px);
   -webkit-backdrop-filter: blur(22px);
 }
@@ -2317,7 +2805,7 @@ export default {
   margin: 18px 22px 0;
   padding: 10px 14px;
   border-radius: 14px;
-  background: rgba(219,234,254,0.96);
+  background: rgba(219, 234, 254, 0.96);
 }
 
 .store-switch-title {
@@ -2336,8 +2824,9 @@ export default {
   border-radius: 999px;
   color: #64748b;
   transition: all 0.15s;
+
   &:hover {
-    background: rgba(0,0,0,0.06);
+    background: rgba(0, 0, 0, 0.06);
     color: #0f172a;
   }
 }
@@ -2359,11 +2848,16 @@ export default {
   transition: all 0.2s;
   border: 1px solid transparent;
   margin-bottom: 8px;
-  &:last-child { margin-bottom: 0; }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
   &:hover {
     background: rgba(99, 102, 241, 0.06);
     border-color: rgba(99, 102, 241, 0.2);
   }
+
   &--active {
     background: rgba(219, 234, 254, 0.5);
     border-color: rgba(59, 130, 246, 0.3);
@@ -2421,6 +2915,7 @@ export default {
   align-items: flex-start;
   gap: 4px;
   line-height: 1.5;
+
   i {
     font-size: 12px;
     color: #94a3b8;
--
libgit2 0.21.4