feat: 添加常驻通知管理功能，支持编辑和删除通知

2025-11-30 11:50:20 +08:00
parent 069f0a31c0
commit 46dffb02ca
6 changed files with 564 additions and 26 deletions
@@ -213,6 +213,26 @@
        </div>
      </v-card-text>

+      <!-- 非今日编辑警告 -->
+      <v-alert
+        v-if="isEditingPastData"
+        type="warning"
+        variant="tonal"
+        class="mx-4 mb-4"
+        border="start"
+        border-color="warning"
+        prominent
+      >
+        <template #prepend>
+        </template>
+        <div class="d-flex flex-column">
+          <div class="text-h6 mb-1">你打算修改历史？</div>
+          <div class="text-body-2">
+            这是 {{ new Date(currentDateString.slice(0,4), currentDateString.slice(4,6)-1, currentDateString.slice(6,8)).toLocaleDateString() }} 的作业 • 请谨慎操作，确保不会覆盖重要数据
+          </div>
+        </div>
+      </v-alert>
+
      <div class="text-center text-body-2 text-disabled mb-5">
        点击空白处完成编辑
      </div>
@@ -244,6 +264,14 @@ export default {
    autoSave: {
      type: Boolean,
      default: false
+    },
+    isEditingPastData: {
+      type: Boolean,
+      default: false
+    },
+    currentDateString: {
+      type: String,
+      default: ""
    }
  },
  emits: ["update:modelValue", "save"],
@@ -43,8 +43,14 @@
                          color="red"
                          inset
                        >
-
                        </v-switch>
+                        <v-checkbox
+                          v-model="notificationForm.isPersistent"
+                          label="常驻展示"
+                          color="primary"
+                          hide-details
+                          class="mt-0"
+                        ></v-checkbox>
                      </v-col>
                      <v-col cols="12">
                        <v-textarea
@@ -82,6 +88,42 @@
            </v-col>
          </v-row>

+          <!-- 常驻通知管理 -->
+          <v-row class="mt-4">
+            <v-col cols="12">
+              <v-card>
+                <v-card-title>
+                  <v-icon class="mr-2">mdi-pin</v-icon>
+                  常驻通知管理
+                </v-card-title>
+                <v-card-text>
+                  <div v-if="persistentNotifications.length === 0" class="text-center text-grey py-4">
+                    暂无常驻通知
+                  </div>
+                  <v-list v-else>
+                    <v-list-item
+                      v-for="item in persistentNotifications"
+                      :key="item.id"
+                      :title="item.message"
+                      :subtitle="formatTime(item.timestamp)"
+                      lines="two"
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="item.isUrgent ? 'error' : 'primary'">
+                          {{ item.isUrgent ? 'mdi-alert-circle' : 'mdi-information' }}
+                        </v-icon>
+                      </template>
+                      <template v-slot:append>
+                        <v-btn icon="mdi-pencil" variant="text" size="small" @click="openEditDialog(item)"></v-btn>
+                        <v-btn icon="mdi-delete" variant="text" color="error" size="small" @click="confirmDelete(item.id)"></v-btn>
+                      </template>
+                    </v-list-item>
+                  </v-list>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-row>
+
          <!-- 消息发送历史 -->
          <v-row class="mt-4">
            <v-col cols="12">
@@ -222,6 +264,57 @@

    <ChatWidget />
    <EventSender ref="eventSender" />
+
+    <!-- 编辑常驻通知对话框 -->
+    <v-dialog v-model="editDialog" max-width="500" :fullscreen="$vuetify.display.xs">
+      <v-card>
+        <v-toolbar flat density="compact">
+          <v-toolbar-title>编辑常驻通知</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-btn icon="mdi-close" @click="editDialog = false"></v-btn>
+        </v-toolbar>
+        <v-card-text>
+          <v-form>
+            <v-textarea
+              v-model="editForm.message"
+              label="通知内容"
+              rows="3"
+              auto-grow
+            ></v-textarea>
+            <v-switch
+              v-model="editForm.isUrgent"
+              label="强调通知"
+              color="error"
+              hide-details
+            ></v-switch>
+            <v-checkbox
+              v-model="editForm.resend"
+              label="保存并重新发送通知"
+              hint="勾选后将作为新通知发送给所有在线设备"
+              persistent-hint
+            ></v-checkbox>
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn variant="text" @click="editDialog = false">取消</v-btn>
+          <v-btn color="primary" :loading="savingEdit" @click="saveEdit">保存</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 删除确认对话框 -->
+    <v-dialog v-model="deleteConfirmDialog" max-width="400">
+      <v-card>
+        <v-card-title class="text-h5">确认删除</v-card-title>
+        <v-card-text>确定要删除这条常驻通知吗？此操作无法撤销。</v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="grey-darken-1" variant="text" @click="deleteConfirmDialog = false">取消</v-btn>
+          <v-btn color="error" variant="text" @click="confirmDelete">删除</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
  </v-dialog>
 </template>

@@ -229,6 +322,7 @@
 import ChatWidget from '@/components/ChatWidget.vue'
 import EventSender from '@/components/EventSender.vue'
 import { on as socketOn } from '@/utils/socketClient'
+import dataProvider from '@/utils/dataProvider'

 export default {
  name: 'UrgentTestDialog',
@@ -248,10 +342,22 @@ export default {
      sending: false,
      notificationForm: {
        isUrgent: false,
-        message: ''
+        message: '',
+        isPersistent: false
      },
      sentMessages: [],
-      receiptCleanup: []
+      receiptCleanup: [],
+      persistentNotifications: [],
+      editDialog: false,
+      editForm: {
+        id: null,
+        message: '',
+        isUrgent: false,
+        resend: false
+      },
+      savingEdit: false,
+      deleteConfirmDialog: false,
+      itemToDelete: null,
    }
  },
  computed: {
@@ -266,6 +372,7 @@ export default {
  },
  mounted() {
    this.setupEventListeners()
+    this.loadPersistentNotifications()
  },
  beforeUnmount() {
    this.cleanup()
@@ -288,10 +395,13 @@ export default {
      try {
        // 生成32位随机通知ID
        const notificationId = this.generateNotificationId()
+        const messageContent = this.notificationForm.message
+        const isUrgent = this.notificationForm.isUrgent
+        const isPersistent = this.notificationForm.isPersistent

        const result = await this.$refs.eventSender.sendNotification(
-          this.notificationForm.message,
-          this.notificationForm.isUrgent,
+          messageContent,
+          isUrgent,
          [],
          { deviceName: '测试设备', deviceType: 'system', isReadOnly: false },
          notificationId
@@ -302,8 +412,8 @@ export default {
        this.sentMessages.push({
          id: eventId,
          notificationId: notificationId,
-          message: this.notificationForm.message,
-          isUrgent: this.notificationForm.isUrgent,
+          message: messageContent,
+          isUrgent: isUrgent,
          timestamp: new Date().toISOString(),
          receipts: {
            displayed: [],
@@ -311,6 +421,36 @@ export default {
          }
        })

+        // 处理常驻通知
+        if (isPersistent) {
+          try {
+            const listKey = 'notification-list'
+            const existingData = await dataProvider.loadData(listKey)
+            let list = []
+            if (existingData && Array.isArray(existingData)) {
+              list = existingData
+            } else if (existingData && existingData.success !== false && Array.isArray(existingData.data)) {
+            // list = existingData.data
+               list = existingData.data
+            }
+
+            const newNotification = {
+              id: notificationId,
+              message: messageContent,
+              isUrgent: isUrgent,
+              timestamp: new Date().toISOString()
+            }
+
+            list.unshift(newNotification)
+            await dataProvider.saveData(listKey, list)
+            // 更新本地列表
+            this.persistentNotifications = list
+            console.log('常驻通知已保存')
+          } catch (e) {
+            console.error('保存常驻通知失败', e)
+          }
+        }
+
        console.log('通知已发送，事件ID:', eventId, '通知ID:', notificationId)
        this.resetForm()
      } catch (error) {
@@ -320,6 +460,13 @@ export default {
      }
    },

+    resetForm() {
+      this.notificationForm = {
+        isUrgent: false,
+        message: '',
+        isPersistent: false
+      }
+    },

    close() {
      this.dialog = false
@@ -414,6 +561,137 @@ export default {
      return receipts.displayed.filter(device =>
        !readSenderIds.includes(device.senderId)
      )
+    },
+
+    openEditDialog(notification) {
+      this.editForm = {
+        id: notification.id,
+        message: notification.message,
+        isUrgent: notification.isUrgent || false,
+        resend: false,
+        timestamp: notification.timestamp
+      }
+      this.editDialog = true
+    },
+
+    async saveEdit() {
+      if (!this.editForm.message.trim()) return
+
+      this.savingEdit = true
+      try {
+        // 更新列表
+        const index = this.persistentNotifications.findIndex(n => n.id === this.editForm.id)
+        if (index !== -1) {
+          this.persistentNotifications[index] = {
+            ...this.persistentNotifications[index],
+            message: this.editForm.message,
+            isUrgent: this.editForm.isUrgent,
+            // 如果重新发送，更新时间戳？或者保持原样？通常编辑后更新时间戳比较合理
+            timestamp: new Date().toISOString()
+          }
+
+          await dataProvider.saveData('notification-list', this.persistentNotifications)
+
+          // 如果需要重新发送
+          if (this.editForm.resend) {
+             const notificationId = this.editForm.id
+             const messageContent = this.editForm.message
+             const isUrgent = this.editForm.isUrgent
+
+             const result = await this.$refs.eventSender.sendNotification(
+              messageContent,
+              isUrgent,
+              [],
+              { deviceName: '测试设备', deviceType: 'system', isReadOnly: false },
+              notificationId
+            )
+
+            const eventId = result?.eventId || `msg-${Date.now()}`
+
+            // 添加到发送记录
+            this.sentMessages.push({
+              id: eventId,
+              notificationId: notificationId,
+              message: messageContent,
+              isUrgent: isUrgent,
+              timestamp: new Date().toISOString(),
+              receipts: {
+                displayed: [],
+                read: []
+              }
+            })
+          }
+
+          this.editDialog = false
+          this.$message?.success('已更新')
+        }
+      } catch (e) {
+        console.error('保存失败', e)
+        this.$message?.error('保存失败')
+      } finally {
+        this.savingEdit = false
+      }
+    },
+
+    async loadPersistentNotifications() {
+      try {
+        const res = await dataProvider.loadData('notification-list')
+        if (res && Array.isArray(res)) {
+          this.persistentNotifications = res
+        } else if (res && res.success !== false && Array.isArray(res.data)) {
+          this.persistentNotifications = res.data
+        } else {
+          this.persistentNotifications = []
+        }
+      } catch (e) {
+        console.error('加载常驻通知失败', e)
+      }
+    },
+
+    async deleteNotification(notificationId) {
+      const confirmed = confirm('确定要删除这个通知吗？')
+      if (!confirmed) return
+
+      try {
+        // 从 sentMessages 中删除
+        this.sentMessages = this.sentMessages.filter(msg => msg.id !== notificationId)
+
+        // 从常驻通知列表中删除
+        this.persistentNotifications = this.persistentNotifications.filter(notif => notif.id !== notificationId)
+
+        // TODO: 调用接口删除通知（如果有的话）
+
+        console.log('通知已删除，通知ID:', notificationId)
+      } catch (error) {
+        console.error('删除通知失败:', error)
+      }
+    },
+
+    deletePersistentNotification(id) {
+      this.itemToDelete = id
+      this.deleteConfirmDialog = true
+    },
+
+    async confirmDelete() {
+      if (!this.itemToDelete) return
+
+      const id = this.itemToDelete
+      this.deleteConfirmDialog = false
+      this.itemToDelete = null
+
+      try {
+        this.persistentNotifications = this.persistentNotifications.filter(n => n.id !== id)
+        await dataProvider.saveData('notification-list', this.persistentNotifications)
+        this.$message?.success('已删除')
+      } catch (e) {
+        console.error('删除失败', e)
+        this.$message?.error('删除失败')
+      }
+    },
+
+    confirmDelete(id) {
+      this.itemToDelete = id
+      this.deleteConfirmDialog = true
    }
  }
 }
@@ -1,16 +1,17 @@
 <template>
  <v-col
    v-if="studentList && studentList.length"
-    v-ripple="{
+    v-ripple="!isEditingDisabled ? {
      class: `text-${
        ['primary', 'secondary', 'info', 'success', 'warning', 'error'][
          Math.floor(Math.random() * 6)
        ]
      }`,
-    }"
+    } : false"
+    :class="{ 'cursor-not-allowed': isEditingDisabled }"
    class="attendance-area no-select"
    cols="1"
-    @click="$emit('click')"
+    @click="handleClick"
  >
    <h1>出勤</h1>
    <h2>
@@ -94,12 +95,25 @@ export default {
      type: Object,
      required: true,
    },
+    isEditingDisabled: {
+      type: Boolean,
+      default: false,
+    },
  },
-  emits: ["click"],
+  emits: ["click", "disabled-click"],
  setup() {
    const display = useDisplay();
    return { display };
  },
+  methods: {
+    handleClick() {
+      if (this.isEditingDisabled) {
+        this.$emit('disabled-click');
+      } else {
+        this.$emit('click');
+      }
+    },
+  },
 };
 </script>

@@ -13,11 +13,11 @@
        <!-- 出勤卡片 -->
        <v-card
          v-if="item.type === 'attendance'"
-          :class="{ 'glow-highlight': highlightedCards[item.key] }"
+          :class="{ 'glow-highlight': highlightedCards[item.key], 'cursor-not-allowed': isEditingDisabled, 'cursor-pointer': !isEditingDisabled }"
          border
          class="glow-track"
          height="100%"
-          @click="$emit('open-attendance')"
+          @click="handleCardClick('attendance', null)"
          @mousemove="handleMouseMove"
          @touchmove="handleTouchMove"
        >
@@ -82,11 +82,11 @@
        <!-- 自定义/测试卡片 -->
        <v-card
          v-else-if="item.type === 'custom'"
-          :class="{ 'glow-highlight': highlightedCards[item.key] }"
+          :class="{ 'glow-highlight': highlightedCards[item.key], 'cursor-not-allowed': isEditingDisabled, 'cursor-pointer': !isEditingDisabled }"
          border
          class="glow-track"
          height="100%"
-          @click="!isEditingDisabled && $emit('open-dialog', item.key)"
+          @click="handleCardClick('dialog', item.key)"
          @mousemove="handleMouseMove"
          @touchmove="handleTouchMove"
        >
@@ -102,11 +102,11 @@
        <!-- 普通作业卡片 -->
        <v-card
          v-else
-          :class="{ 'glow-highlight': highlightedCards[item.key] }"
+          :class="{ 'glow-highlight': highlightedCards[item.key], 'cursor-not-allowed': isEditingDisabled, 'cursor-pointer': !isEditingDisabled }"
          border
          class="glow-track"
          height="100%"
-          @click="!isEditingDisabled && $emit('open-dialog', item.key)"
+          @click="handleCardClick('dialog', item.key)"
          @mousemove="handleMouseMove"
          @touchmove="handleTouchMove"
        >
@@ -133,11 +133,10 @@
      <v-chip
        v-for="subject in unusedSubjects"
        :key="subject.name"
-        :disabled="isEditingDisabled"
        class="ma-1"
        color="primary"
        variant="tonal"
-        @click="$emit('open-dialog', subject.name)"
+        @click="handleCardClick('dialog', subject.name)"
      >
        <v-icon start size="small">mdi-plus</v-icon>
        {{ subject.name }}
@@ -149,8 +148,7 @@
        <v-btn
          v-for="subject in unusedSubjects"
          :key="subject.name"
-          :disabled="isEditingDisabled"
-          @click="$emit('open-dialog', subject.name)"
+          @click="handleCardClick('dialog', subject.name)"
        >
          <v-icon start> mdi-plus</v-icon>
          {{ subject.name }}
@@ -162,10 +160,9 @@
        <v-card
          v-for="subject in unusedSubjects"
          :key="subject.name"
-          :disabled="isEditingDisabled"
          border
          class="empty-subject-card"
-          @click="$emit('open-dialog', subject.name)"
+          @click="handleCardClick('dialog', subject.name)"
        >
          <v-card-title class="text-subtitle-1">
            {{ subject.name }}
@@ -209,13 +206,25 @@ export default {
      default: () => ({}),
    },
  },
-  emits: ["open-dialog", "open-attendance"],
+  emits: ["open-dialog", "open-attendance", "disabled-click"],
  computed: {
    isMobile() {
      return this.$vuetify.display.mobile;
    },
  },
  methods: {
+    handleCardClick(type, key) {
+      if (this.isEditingDisabled) {
+        this.$emit('disabled-click');
+        return;
+      }
+
+      if (type === 'attendance') {
+        this.$emit('open-attendance');
+      } else if (type === 'dialog') {
+        this.$emit('open-dialog', key);
+      }
+    },
    splitPoint(content) {
      return content.split("\n").filter((text) => text.trim());
    },
@@ -241,3 +250,17 @@ export default {
  },
 };
 </script>
+
+<style scoped>
+.cursor-not-allowed {
+  cursor: not-allowed !important;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.v-card.cursor-not-allowed:hover {
+  transform: none !important;
+}
+</style>