Add vuedraggable for drag-and-drop functionality in dashboard; update labels for clarity

“wangming”
1 parent 43ce1b69
Showing 3 changed files with 134 additions and 34 deletions
store-pc/package-lock.json
store-pc/package.json
store-pc/src/views/dashboard/index.vue
@@ -18,6 +18,7 @@
         "normalize.css": "^8.0.1",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
+        "vuedraggable": "^2.24.3",
         "vuex": "^3.6.2"
       },
       "devDependencies": {
@@ -15394,6 +15395,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==",
+      "license": "MIT"
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -17618,6 +17625,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "license": "MIT",
+      "dependencies": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "node_modules/vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
@@ -18,6 +18,7 @@
     "normalize.css": "^8.0.1",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
@@ -5,7 +5,7 @@
       <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>
@@ -89,7 +89,7 @@
       </div>
     </div>
  
-    <div class="layout-grid">
+    <div class="layout-grid" :class="{ 'layout-grid--reminder-open': reminderCenterOpen }">
       <!-- 左侧：概览 + 六大板块 -->
       <div class="left-column">
         <!-- 今日概览 -->
@@ -145,12 +145,22 @@
           </div>
         </div>
  
-        <!-- 六大业务板块 -->
+        <!-- 业务板块：支持拖拽排序并本地记忆顺序 -->
         <div class="modules-grid">
-          <el-row :gutter="16">
+          <draggable
+            v-model="modules"
+            tag="el-row"
+            :component-data="{ props: { gutter: 16 } }"
+            :options="moduleDragOptions"
+            @end="onModuleDragEnd"
+          >
             <el-col v-for="module in modules" :key="module.key" :span="8">
-              <el-card shadow="hover" class="module-card" :body-style="{ padding: '20px 20px 18px' }"
-                @click.native="handleModuleCardClick($event, module)">
+              <el-card
+                shadow="hover"
+                class="module-card module-card--draggable"
+                :body-style="{ padding: '20px 20px 18px' }"
+                @click.native="handleModuleCardClick($event, module)"
+              >
                 <div class="module-header">
                   <div class="module-title-wrap">
                     <div class="module-title">{{ module.title }}</div>
@@ -166,19 +176,28 @@
                 </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>
-          </el-row>
+          </draggable>
         </div>
       </div>
  
-      <!-- 提醒中心侧栏（今日邀约 / 今日预约 / 生日提醒 / 沉睡提醒） -->
+      <!-- 提醒中心侧栏（我的待办 / 今日到店 / 生日提醒 / 沉睡提醒） -->
       <div class="reminder-center">
         <!-- 右侧窄栏入口 -->
         <div class="reminder-center-toggle">
@@ -230,7 +249,7 @@
                   </div>
                   <div v-else class="empty-tip">暂无待办事项</div>
                 </el-tab-pane>
-                <el-tab-pane label="今日预约" name="booking">
+                <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>
@@ -303,7 +322,10 @@
                     </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-day-badge">
+                          <i class="el-icon-present birthday-icon"></i>
+                          <span class="birthday-day-text">{{ item.day }}日</span>
+                        </div>
                         <div class="birthday-info">
                           <div class="birthday-name">
                             {{ item.name }}
@@ -405,6 +427,7 @@
 </template>
  
 <script>
+import draggable from 'vuedraggable'
 import MemberProfileDialog from '@/components/MemberProfileDialog.vue'
 import TuokeLeadDialog from '@/components/TuokeLeadDialog.vue'
 import InviteAddDialog from '@/components/InviteAddDialog.vue'
@@ -438,7 +461,8 @@ export default {
     ConsumeListDialog,
     RefundListDialog,
     GoldTriangleDialog,
-    StoreTargetDialog
+    StoreTargetDialog,
+    draggable
   },
   data() {
     return {
@@ -549,7 +573,7 @@ export default {
           icon: 'el-icon-date',
           iconBg: 'linear-gradient(135deg, #f97316, #facc15)',
           metricValue: 0,
-          metricLabel: '今日预约',
+        metricLabel: '今日到店',
           primaryAction: '新建预约',
           secondaryText: '打开预约日历'
         },
@@ -618,6 +642,7 @@ export default {
           secondaryText: ''
         }
       ],
+      moduleOrderStorageKey: 'store_dashboard_module_order',
       todayInvite: [],
       todayBooking: [
         {
@@ -847,6 +872,14 @@ export default {
       while (days.length % 7 !== 0) days.push({ day: null, members: [] })
       return days
     },
+    moduleDragOptions() {
+      return {
+        animation: 200,
+        ghostClass: 'module-card--ghost',
+        chosenClass: 'module-card--chosen',
+        handle: '.module-card--draggable'
+      }
+    },
     storeTargetMonthValue() {
       const now = new Date()
       const next = new Date(now.getFullYear(), now.getMonth() + 1, 1)
@@ -867,7 +900,7 @@ export default {
         },
         {
           key: 'booking',
-          label: '今日预约',
+          label: '今日到店',
           count: this.todayBooking.length,
           icon: 'el-icon-date'
         },
@@ -875,7 +908,7 @@ export default {
           key: 'birthday',
           label: '生日提醒',
           count: birthdayTodayCount,
-          icon: 'el-icon-gift'
+          icon: 'el-icon-present'
         },
         {
           key: 'sleeping',
@@ -918,6 +951,7 @@ export default {
     this.$nextTick(() => {
       this.reminderFirstRenderDone = true
     })
+    this.applyModuleOrderFromStorage()
   },
   beforeDestroy() {
     document.removeEventListener('fullscreenchange', this.onFullscreenChange)
@@ -934,6 +968,39 @@ export default {
     onFullscreenChange() {
       this.isFullscreen = !!document.fullscreenElement
     },
+    applyModuleOrderFromStorage() {
+      try {
+        const cached = window.localStorage.getItem(this.moduleOrderStorageKey)
+        if (!cached) return
+        const orderKeys = JSON.parse(cached)
+        if (!Array.isArray(orderKeys) || !orderKeys.length) return
+
+        const map = this.modules.reduce((acc, item) => {
+          acc[item.key] = item
+          return acc
+        }, {})
+
+        const ordered = []
+        orderKeys.forEach(key => {
+          if (map[key]) {
+            ordered.push(map[key])
+            delete map[key]
+          }
+        })
+
+        Object.keys(map).forEach(key => {
+          ordered.push(map[key])
+        })
+
+        this.modules = ordered
+      } catch (e) {
+        // ignore parse errors
+      }
+    },
+    onModuleDragEnd() {
+      const orderKeys = this.modules.map(item => item.key)
+      window.localStorage.setItem(this.moduleOrderStorageKey, JSON.stringify(orderKeys))
+    },
     handleUserCommand(cmd) {
       if (cmd === 'store') {
         this.storeSwitchDialogVisible = true
@@ -1731,11 +1798,18 @@ export default {
  
 .layout-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  /* 收起时：主内容更宽，右侧只保留竖向按钮条宽度（约 88px + 间距） */
+  grid-template-columns: minmax(0, 1fr) 108px;
   gap: 20px;
   flex: 1;
   min-height: 0;
   align-items: stretch;
+  transition: grid-template-columns 0.25s ease-out;
+}
+
+.layout-grid--reminder-open {
+  /* 展开时：主内容略窄，为竖向条 + 面板预留宽度 */
+  grid-template-columns: minmax(0, 1fr) 520px;
 }
  
 .left-column {
@@ -2032,6 +2106,7 @@ export default {
  
 /* 提醒中心侧栏 - 容器 */
 .reminder-center {
+  position: relative;
   display: flex;
   flex-direction: row-reverse;
   align-items: stretch;
@@ -2050,6 +2125,12 @@ export default {
   padding: 10px 4px;
   gap: 6px;
   pointer-events: auto;
+  /* 固定宽度，避免在列宽动画时被压缩 */
+  flex: 0 0 88px;
+  position: relative;
+  z-index: 2;
+  /* 高度跟随列一起拉满 */
+  height: 100%;
 }
  
 /* 我的待办入口样式复用提醒入口，无需额外样式 */
@@ -2154,19 +2235,6 @@ export default {
   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;
@@ -2189,9 +2257,14 @@ export default {
 /* 提醒中心侧栏 - 主体卡片（右侧有间距滑出） */
 .reminder-center-panel {
   width: 400px;
+  /* 与右侧竖向按钮条留出间距 */
   margin-right: 20px;
   pointer-events: auto;
   display: flex;
+  /* 固定宽度，由外层 grid 列宽承担动画 */
+  flex: 0 0 400px;
+  position: relative;
+  z-index: 1;
 }
  
 /* 提醒面板布局：独立四角圆角卡片 */
@@ -2652,7 +2725,7 @@ export default {
 }
  
 .birthday-day-badge {
-  width: 36px;
+  width: 40px;
   height: 36px;
   border-radius: 8px;
   background: rgba(99, 102, 241, 0.08);
@@ -2664,6 +2737,16 @@ export default {
   justify-content: center;
   flex-shrink: 0;
   text-align: center;
+  flex-direction: column;
+}
+
+.birthday-icon {
+  font-size: 14px;
+  margin-bottom: 2px;
+}
+
+.birthday-day-text {
+  line-height: 1;
 }
  
 .birthday-info,