cd-aichat 1.0.0

package/src/components/BurnAfterReadMessage.test.js

@@ -0,0 +1,188 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import BurnAfterReadMessage from './BurnAfterReadMessage.vue';
+import { resetBurnAfterReadService } from '../services/burn-after-read-service';
+
+describe('BurnAfterReadMessage.vue', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    resetBurnAfterReadService();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('应该渲染消息内容', () => {
+    const wrapper = mount(BurnAfterReadMessage, {
+      props: {
+        messageId: 'msg1',
+        burnDelay: 10
+      },
+      slots: {
+        default: 'Test message content'
+      }
+    });
+    expect(wrapper.text()).toContain('Test message content');
+  });
+
+  it('应该显示阅后即焚指示器', () => {
+    const wrapper = mount(BurnAfterReadMessage, {
+      props: {
+        messageId: 'msg1',
+        burnDelay: 10
+      },
+      slots: {
+        default: 'Test message'
+      }
+    });
+    expect(wrapper.findComponent({ name: 'BurnIndicator' }).exists()).toBe(true);
+  });
+
+  it('应该在销毁后显示占位符', async () => {
+    const wrapper = mount(BurnAfterReadMessage, {
+      props: {
+        messageId: 'msg1',
+        burnDelay: 1
+      },
+      slots: {
+        default: 'Test message'
+      }
+    });
+
+    // 标记为已读
+    wrapper.vm.markAsRead();
+    await flushPromises();
+
+    // 快进时间
+    vi.advanceTimersByTime(1000);
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('消息已销毁');
+    expect(wrapper.text()).not.toContain('Test message');
+  });
+
+  it('应该发出 read 事件', async () => {
+    const wrapper = mount(BurnAfterReadMessage, {
+      props: {
+        messageId: 'msg1',
+        burnDelay: 10
+      },
+      slots: {
+        default: 'Test message'
+      }
+    });
+
+    wrapper.vm.markAsRead();
+    await flushPromises();
+
+    expect(wrapper.emitted('read')).toBeTruthy();
+    expect(wrapper.emitted('read')[0][0].messageId).toBe('msg1');
+  });
+
+  it('应该发出 burned 事件', async () => {
+    const wrapper = mount(BurnAfterReadMessage, {
+      props: {
+        messageId: 'msg1',
+        burnDelay: 1
+      },
+      slots: {
+        default: 'Test message'
+      }
+    });
+
+    wrapper.vm.markAsRead();
+    await flushPromises();
+
+    vi.advanceTimersByTime(1000);
+    await flushPromises();
+
+    expect(wrapper.emitted('burned')).toBeTruthy();
+    expect(wrapper.emitted('burned')[0][0].messageId).toBe('msg1');
+  });
+
+  it('应该在卸载时清理资源', async () => {
+    const wrapper = mount(BurnAfterReadMessage, {
+      props: {
+        messageId: 'msg1',
+        burnDelay: 10
+      },
+      slots: {
+        default: 'Test message'
+      }
+    });
+
+    wrapper.vm.markAsRead();
+    await flushPromises();
+
+    wrapper.unmount();
+
+    // 快进时间，不应该触发销毁事件
+    vi.advanceTimersByTime(10000);
+    await flushPromises();
+
+    // 验证没有内存泄漏
+    expect(wrapper.emitted('burned')).toBeFalsy();
+  });
+
+  it('应该显示倒计时', async () => {
+    const wrapper = mount(BurnAfterReadMessage, {
+      props: {
+        messageId: 'msg1',
+        burnDelay: 10,
+        showCountdown: true
+      },
+      slots: {
+        default: 'Test message'
+      }
+    });
+
+    wrapper.vm.markAsRead();
+    await flushPromises();
+
+    // 快进3秒
+    vi.advanceTimersByTime(3000);
+    await flushPromises();
+
+    const indicator = wrapper.findComponent({ name: 'BurnIndicator' });
+    expect(indicator.props('remainingTime')).toBeLessThanOrEqual(7);
+  });
+
+  it('应该在 showCountdown 为 false 时隐藏倒计时', () => {
+    const wrapper = mount(BurnAfterReadMessage, {
+      props: {
+        messageId: 'msg1',
+        burnDelay: 10,
+        showCountdown: false
+      },
+      slots: {
+        default: 'Test message'
+      }
+    });
+
+    const indicator = wrapper.findComponent({ name: 'BurnIndicator' });
+    expect(indicator.props('showCountdown')).toBe(false);
+  });
+
+  it('应该添加 burned 类当消息被销毁', async () => {
+    const wrapper = mount(BurnAfterReadMessage, {
+      props: {
+        messageId: 'msg1',
+        burnDelay: 1
+      },
+      slots: {
+        default: 'Test message'
+      }
+    });
+
+    expect(wrapper.find('.burn-after-read-message--burned').exists()).toBe(false);
+
+    wrapper.vm.markAsRead();
+    await flushPromises();
+
+    vi.advanceTimersByTime(1000);
+    await flushPromises();
+
+    expect(wrapper.find('.burn-after-read-message--burned').exists()).toBe(true);
+  });
+});

package/src/components/BurnAfterReadMessage.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="burn-after-read-message" :class="{ 'burn-after-read-message--burned': isBurned }">
+    <div class="message-wrapper">
+      <div v-if="!isBurned" class="message-content">
+        <slot />
+      </div>
+      <div v-else class="burned-placeholder">
+        <i class="ri-fire-line"></i>
+        <span>消息已销毁</span>
+      </div>
+    </div>
+    <div class="burn-indicator-wrapper">
+      <BurnIndicator
+        :status="burnStatus"
+        :remaining-time="remainingTime"
+        :burn-delay="burnDelay"
+        :show-countdown="showCountdown"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import BurnIndicator from './BurnIndicator.vue';
+import { getBurnAfterReadService } from '../services/burn-after-read-service';
+
+export default {
+  name: 'BurnAfterReadMessage',
+  components: {
+    BurnIndicator
+  },
+  props: {
+    messageId: {
+      type: String,
+      required: true
+    },
+    burnDelay: {
+      type: Number,
+      required: true
+    },
+    showCountdown: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['burned', 'read'],
+  setup(props, { emit }) {
+    const service = getBurnAfterReadService();
+    const burnStatus = ref('pending');
+    const remainingTime = ref(0);
+    const isBurned = ref(false);
+    let updateInterval = null;
+    let unsubscribeRead = null;
+    let unsubscribeBurned = null;
+
+    const markAsRead = () => {
+      try {
+        service.markMessageAsRead(props.messageId);
+        burnStatus.value = 'read';
+        emit('read', { messageId: props.messageId });
+        startCountdownUpdate();
+      } catch (error) {
+        console.error('Failed to mark message as read:', error);
+      }
+    };
+
+    const startCountdownUpdate = () => {
+      if (updateInterval) {
+        clearInterval(updateInterval);
+      }
+      updateInterval = setInterval(() => {
+        const remaining = service.getRemainingTime(props.messageId);
+        if (remaining !== null) {
+          remainingTime.value = remaining;
+        }
+      }, 100);
+    };
+
+    const handleBurned = () => {
+      isBurned.value = true;
+      burnStatus.value = 'burned';
+      if (updateInterval) {
+        clearInterval(updateInterval);
+      }
+      emit('burned', { messageId: props.messageId });
+    };
+
+    const cleanup = () => {
+      if (updateInterval) {
+        clearInterval(updateInterval);
+      }
+      if (unsubscribeRead) {
+        unsubscribeRead();
+      }
+      if (unsubscribeBurned) {
+        unsubscribeBurned();
+      }
+    };
+
+    onMounted(() => {
+      // 标记消息为阅后即焚
+      try {
+        service.markMessageForBurn({
+          id: props.messageId,
+          burnDelay: props.burnDelay
+        });
+      } catch (error) {
+        console.error('Failed to mark message for burn:', error);
+      }
+
+      // 监听消息被读事件
+      unsubscribeRead = service.on('message-read', (data) => {
+        if (data.id === props.messageId) {
+          burnStatus.value = 'read';
+          startCountdownUpdate();
+        }
+      });
+
+      // 监听消息销毁事件
+      unsubscribeBurned = service.on('message-burned', (data) => {
+        if (data.id === props.messageId) {
+          handleBurned();
+        }
+      });
+
+      // 检查消息是否已经被标记为已读
+      const status = service.getBurnStatus(props.messageId);
+      if (status && status.status === 'read') {
+        burnStatus.value = 'read';
+        startCountdownUpdate();
+      }
+    });
+
+    onUnmounted(() => {
+      cleanup();
+    });
+
+    return {
+      burnStatus,
+      remainingTime,
+      isBurned,
+      markAsRead
+    };
+  }
+};
+</script>
+
+<style scoped>
+.burn-after-read-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 6px;
+  background-color: #fff9f5;
+  border: 1px solid #ffe0cc;
+  transition: all 0.3s ease;
+}
+
+.burn-after-read-message--burned {
+  background-color: #f5f5f5;
+  border-color: #e0e0e0;
+  opacity: 0.7;
+}
+
+.message-wrapper {
+  flex: 1;
+  min-width: 0;
+}
+
+.message-content {
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+.burned-placeholder {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #999;
+  font-size: 13px;
+  font-style: italic;
+}
+
+.burned-placeholder i {
+  font-size: 14px;
+}
+
+.burn-indicator-wrapper {
+  flex-shrink: 0;
+}
+</style>

package/src/components/BurnIndicator.test.js

@@ -0,0 +1,101 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import BurnIndicator from './BurnIndicator.vue';
+
+describe('BurnIndicator.vue', () => {
+  it('应该渲染待销毁状态', () => {
+    const wrapper = mount(BurnIndicator, {
+      props: {
+        status: 'pending',
+        burnDelay: 10
+      }
+    });
+    expect(wrapper.find('.burn-indicator--pending').exists()).toBe(true);
+    expect(wrapper.text()).toContain('阅后即焚');
+  });
+
+  it('应该渲染已读状态并显示倒计时', () => {
+    const wrapper = mount(BurnIndicator, {
+      props: {
+        status: 'read',
+        remainingTime: 5,
+        showCountdown: true
+      }
+    });
+    expect(wrapper.find('.burn-indicator--read').exists()).toBe(true);
+    expect(wrapper.text()).toContain('5秒');
+  });
+
+  it('应该渲染已销毁状态', () => {
+    const wrapper = mount(BurnIndicator, {
+      props: {
+        status: 'burned'
+      }
+    });
+    expect(wrapper.find('.burn-indicator--burned').exists()).toBe(true);
+    expect(wrapper.text()).toContain('已销毁');
+  });
+
+  it('应该在倒计时时添加动画类', () => {
+    const wrapper = mount(BurnIndicator, {
+      props: {
+        status: 'read',
+        remainingTime: 5
+      }
+    });
+    expect(wrapper.find('.burn-indicator--burning').exists()).toBe(true);
+  });
+
+  it('应该格式化时间为分钟', () => {
+    const wrapper = mount(BurnIndicator, {
+      props: {
+        status: 'read',
+        remainingTime: 65,
+        showCountdown: true
+      }
+    });
+    expect(wrapper.text()).toContain('1分5秒');
+  });
+
+  it('应该格式化时间为小时', () => {
+    const wrapper = mount(BurnIndicator, {
+      props: {
+        status: 'read',
+        remainingTime: 3665,
+        showCountdown: true
+      }
+    });
+    expect(wrapper.text()).toContain('1小时1分钟');
+  });
+
+  it('应该在不显示倒计时时隐藏时间', () => {
+    const wrapper = mount(BurnIndicator, {
+      props: {
+        status: 'read',
+        remainingTime: 5,
+        showCountdown: false
+      }
+    });
+    expect(wrapper.text()).not.toContain('5秒');
+  });
+
+  it('应该生成正确的工具提示文本', () => {
+    const wrapper = mount(BurnIndicator, {
+      props: {
+        status: 'pending',
+        burnDelay: 10
+      }
+    });
+    expect(wrapper.attributes('title')).toContain('阅后即焚消息');
+  });
+
+  it('应该在已读状态生成正确的工具提示', () => {
+    const wrapper = mount(BurnIndicator, {
+      props: {
+        status: 'read',
+        remainingTime: 5
+      }
+    });
+    expect(wrapper.attributes('title')).toContain('消息将在');
+  });
+});

package/src/components/BurnIndicator.vue

@@ -0,0 +1,164 @@
+<template>
+  <div 
+    class="burn-indicator"
+    :class="{ 
+      'burn-indicator--pending': status === 'pending',
+      'burn-indicator--read': status === 'read',
+      'burn-indicator--burning': status === 'read' && remainingTime > 0,
+      'burn-indicator--burned': status === 'burned'
+    }"
+    :title="tooltipText"
+  >
+    <i 
+      class="burn-icon ri-fire-line"
+      :class="{ 'burn-icon--animated': status === 'read' && remainingTime > 0 }"
+    ></i>
+    <span v-if="showCountdown && remainingTime > 0" class="burn-countdown">
+      {{ formatTime(remainingTime) }}
+    </span>
+    <span v-else-if="status === 'burned'" class="burn-status">
+      已销毁
+    </span>
+    <span v-else-if="status === 'pending'" class="burn-status">
+      阅后即焚
+    </span>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+
+export default {
+  name: 'BurnIndicator',
+  props: {
+    status: {
+      type: String,
+      required: true,
+      validator: (value) => ['pending', 'read', 'burned'].includes(value)
+    },
+    remainingTime: {
+      type: Number,
+      default: 0
+    },
+    showCountdown: {
+      type: Boolean,
+      default: true
+    },
+    burnDelay: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props) {
+    const tooltipText = computed(() => {
+      switch (props.status) {
+        case 'pending':
+          return `阅后即焚消息，将在阅读后 ${props.burnDelay} 秒销毁`;
+        case 'read':
+          if (props.remainingTime > 0) {
+            return `消息将在 ${formatTime(props.remainingTime)} 后销毁`;
+          }
+          return '消息即将销毁';
+        case 'burned':
+          return '消息已销毁';
+        default:
+          return '阅后即焚消息';
+      }
+    });
+
+    const formatTime = (seconds) => {
+      if (seconds < 60) {
+        return `${seconds}秒`;
+      } else if (seconds < 3600) {
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = seconds % 60;
+        return remainingSeconds > 0 
+          ? `${minutes}分${remainingSeconds}秒`
+          : `${minutes}分钟`;
+      } else {
+        const hours = Math.floor(seconds / 3600);
+        const remainingMinutes = Math.floor((seconds % 3600) / 60);
+        return remainingMinutes > 0
+          ? `${hours}小时${remainingMinutes}分钟`
+          : `${hours}小时`;
+      }
+    };
+
+    return {
+      tooltipText,
+      formatTime
+    };
+  }
+};
+</script>
+
+<style scoped>
+.burn-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  cursor: help;
+}
+
+.burn-indicator--pending {
+  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
+  color: white;
+}
+
+.burn-indicator--read {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
+  color: white;
+}
+
+.burn-indicator--burning {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.burn-indicator--burned {
+  background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
+  color: white;
+  opacity: 0.7;
+}
+
+.burn-icon {
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.burn-icon--animated {
+  animation: burn-flame 1s ease-in-out infinite;
+}
+
+@keyframes burn-flame {
+  0%, 100% {
+    transform: scale(1) rotate(-2deg);
+  }
+  50% {
+    transform: scale(1.15) rotate(2deg);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.burn-countdown {
+  font-variant-numeric: tabular-nums;
+  min-width: 30px;
+}
+
+.burn-status {
+  font-size: 10px;
+}
+</style>