cd-aichat 1.0.0

package/src/components/BurnAfterReadDialog.test.js

@@ -0,0 +1,121 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import BurnAfterReadDialog from './BurnAfterReadDialog.vue';
+
+describe('BurnAfterReadDialog.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(BurnAfterReadDialog, {
+      props: {
+        messageContent: 'This is a test message'
+      }
+    });
+  });
+
+  it('应该渲染对话框', () => {
+    expect(wrapper.find('.burn-after-read-dialog').exists()).toBe(true);
+  });
+
+  it('应该显示消息预览', () => {
+    expect(wrapper.text()).toContain('This is a test message');
+  });
+
+  it('应该显示预设销毁时间按钮', () => {
+    const presetButtons = wrapper.findAll('.preset-btn');
+    expect(presetButtons.length).toBeGreaterThan(0);
+  });
+
+  it('应该默认选择10秒', () => {
+    const activeButton = wrapper.find('.preset-btn.active');
+    expect(activeButton.text()).toContain('10秒');
+  });
+
+  it('应该允许选择不同的销毁时间', async () => {
+    const buttons = wrapper.findAll('.preset-btn');
+    await buttons[0].trigger('click');
+    expect(wrapper.vm.selectedBurnTime).toBe(5);
+  });
+
+  it('应该支持自定义销毁时间', async () => {
+    const input = wrapper.find('#custom-burn-time');
+    await input.setValue(30);
+    const applyBtn = wrapper.find('.apply-custom-btn');
+    await applyBtn.trigger('click');
+    expect(wrapper.vm.selectedBurnTime).toBe(30);
+  });
+
+  it('应该验证自定义时间范围', async () => {
+    const input = wrapper.find('#custom-burn-time');
+    await input.setValue(0);
+    expect(wrapper.vm.isCustomTimeValid).toBe(false);
+    
+    await input.setValue(3601);
+    expect(wrapper.vm.isCustomTimeValid).toBe(false);
+    
+    await input.setValue(100);
+    expect(wrapper.vm.isCustomTimeValid).toBe(true);
+  });
+
+  it('应该格式化销毁时间显示', () => {
+    expect(wrapper.vm.formatBurnTime).toContain('10秒');
+  });
+
+  it('应该在确认时发出事件', async () => {
+    const confirmBtn = wrapper.find('.btn-primary');
+    await confirmBtn.trigger('click');
+    expect(wrapper.emitted('confirm')).toBeTruthy();
+    const emittedData = wrapper.emitted('confirm')[0][0];
+    expect(emittedData.burnAfterRead).toBe(true);
+    expect(emittedData.burnAfterReadDelay).toBe(10);
+  });
+
+  it('应该在取消时发出事件', async () => {
+    const cancelBtn = wrapper.find('.btn-cancel');
+    await cancelBtn.trigger('click');
+    expect(wrapper.emitted('cancel')).toBeTruthy();
+  });
+
+  it('应该在点击背景时关闭', async () => {
+    const overlay = wrapper.find('.burn-after-read-dialog-overlay');
+    await overlay.trigger('click');
+    expect(wrapper.emitted('cancel')).toBeTruthy();
+  });
+
+  it('应该在点击关闭按钮时关闭', async () => {
+    const closeBtn = wrapper.find('.close-btn');
+    await closeBtn.trigger('click');
+    expect(wrapper.emitted('cancel')).toBeTruthy();
+  });
+
+  it('应该截断长消息预览', async () => {
+    const longMessage = 'a'.repeat(200);
+    const longWrapper = mount(BurnAfterReadDialog, {
+      props: {
+        messageContent: longMessage
+      }
+    });
+    expect(longWrapper.vm.messagePreview).toContain('...');
+  });
+
+  it('应该禁用确认按钮当未选择销毁时间', async () => {
+    wrapper.vm.selectedBurnTime = 0;
+    await wrapper.vm.$nextTick();
+    const confirmBtn = wrapper.find('.btn-primary');
+    expect(confirmBtn.attributes('disabled')).toBeDefined();
+  });
+
+  it('应该格式化分钟时间', async () => {
+    const buttons = wrapper.findAll('.preset-btn');
+    await buttons[3].trigger('click'); // 1分钟
+    expect(wrapper.vm.formatBurnTime).toContain('分钟');
+  });
+
+  it('应该格式化小时时间', async () => {
+    const input = wrapper.find('#custom-burn-time');
+    await input.setValue(3600);
+    const applyBtn = wrapper.find('.apply-custom-btn');
+    await applyBtn.trigger('click');
+    expect(wrapper.vm.formatBurnTime).toContain('小时');
+  });
+});

package/src/components/BurnAfterReadDialog.vue

@@ -0,0 +1,511 @@
+<template>
+  <div class="burn-after-read-dialog-overlay" @click="handleCancel">
+    <div class="burn-after-read-dialog" @click.stop>
+      <div class="dialog-header">
+        <h3>阅后即焚</h3>
+        <button
+          class="close-btn"
+          @click="handleCancel"
+          aria-label="关闭对话框"
+        >
+          <i class="ri-close-line"></i>
+        </button>
+      </div>
+      <div class="dialog-body">
+        <!-- 销毁时间选择 -->
+        <div class="burn-time-section">
+          <label>销毁时间</label>
+          <div class="burn-time-presets">
+            <button
+              v-for="preset in burnTimePresets"
+              :key="preset.id"
+              class="preset-btn"
+              :class="{ active: selectedBurnTime === preset.seconds }"
+              @click="selectBurnTime(preset)"
+            >
+              <i :class="preset.icon"></i>
+              <span>{{ preset.label }}</span>
+            </button>
+          </div>
+          <!-- 自定义时间 -->
+          <div class="custom-time-section">
+            <label for="custom-burn-time">自定义时间（秒）</label>
+            <div class="custom-time-input">
+              <input
+                id="custom-burn-time"
+                v-model.number="customBurnTime"
+                type="number"
+                min="1"
+                max="3600"
+                placeholder="输入秒数"
+                @input="handleCustomTimeInput"
+              />
+              <button
+                class="apply-custom-btn"
+                :disabled="!isCustomTimeValid"
+                @click="applyCustomTime"
+              >
+                应用
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- 消息预览 -->
+        <div class="message-preview-section">
+          <label>消息预览</label>
+          <div class="message-preview">
+            <div class="burn-indicator">
+              <i class="ri-fire-line burn-icon"></i>
+              <span class="burn-text">阅后即焚</span>
+            </div>
+            <div class="message-content">
+              {{ messagePreview }}
+            </div>
+          </div>
+        </div>
+        <!-- 销毁时间显示 -->
+        <div class="burn-info">
+          <div class="burn-time-display">
+            <span class="label">销毁时间：</span>
+            <span class="time-value">{{ formatBurnTime }}</span>
+          </div>
+          <div class="burn-warning">
+            <i class="ri-alarm-warning-line"></i>
+            <span>消息发送后，接收方阅读完毕将在指定时间后自动销毁</span>
+          </div>
+        </div>
+      </div>
+      <div class="dialog-footer">
+        <button
+          class="btn btn-cancel"
+          @click="handleCancel"
+        >
+          取消
+        </button>
+        <button
+          class="btn btn-primary"
+          :disabled="!selectedBurnTime"
+          @click="handleConfirm"
+        >
+          <i class="ri-fire-line"></i>
+          确认发送
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ref, computed } from 'vue';
+export default {
+  name: 'BurnAfterReadDialog',
+  props: {
+    messageContent: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['confirm', 'cancel'],
+  setup(props, { emit }) {
+    const selectedBurnTime = ref(0);
+    const customBurnTime = ref('');
+    const burnTimePresets = [
+      {
+        id: '5s',
+        label: '5秒',
+        seconds: 5,
+        icon: 'ri-time-line'
+      },
+      {
+        id: '10s',
+        label: '10秒',
+        seconds: 10,
+        icon: 'ri-time-line'
+      },
+      {
+        id: '30s',
+        label: '30秒',
+        seconds: 30,
+        icon: 'ri-time-line'
+      },
+      {
+        id: '1min',
+        label: '1分钟',
+        seconds: 60,
+        icon: 'ri-timer-line'
+      },
+      {
+        id: '5min',
+        label: '5分钟',
+        seconds: 300,
+        icon: 'ri-timer-line'
+      },
+      {
+        id: '10min',
+        label: '10分钟',
+        seconds: 600,
+        icon: 'ri-timer-line'
+      }
+    ];
+    const messagePreview = computed(() => {
+      const preview = props.messageContent.substring(0, 100);
+      return preview.length < props.messageContent.length
+        ? preview + '...'
+        : preview;
+    });
+    const formatBurnTime = computed(() => {
+      if (!selectedBurnTime.value) return '未选择';
+      const seconds = selectedBurnTime.value;
+      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}小时`;
+      }
+    });
+    const isCustomTimeValid = computed(() => {
+      const time = Number(customBurnTime.value);
+      return time >= 1 && time <= 3600 && Number.isInteger(time);
+    });
+    const selectBurnTime = (preset) => {
+      selectedBurnTime.value = preset.seconds;
+      customBurnTime.value = '';
+    };
+    const handleCustomTimeInput = () => {
+      if (isCustomTimeValid.value) {
+        selectedBurnTime.value = 0; // 清除预设选择
+      }
+    };
+    const applyCustomTime = () => {
+      if (isCustomTimeValid.value) {
+        selectedBurnTime.value = Number(customBurnTime.value);
+      }
+    };
+    const handleConfirm = () => {
+      if (!selectedBurnTime.value) return;
+      emit('confirm', {
+        message: props.messageContent,
+        burnAfterReadDelay: selectedBurnTime.value,
+        burnAfterRead: true
+      });
+    };
+    const handleCancel = () => {
+      emit('cancel');
+    };
+    // 默认选择10秒
+    selectBurnTime(burnTimePresets[1]);
+    return {
+      selectedBurnTime,
+      customBurnTime,
+      burnTimePresets,
+      messagePreview,
+      formatBurnTime,
+      isCustomTimeValid,
+      selectBurnTime,
+      handleCustomTimeInput,
+      applyCustomTime,
+      handleConfirm,
+      handleCancel
+    };
+  }
+};
+</script>
+<style scoped>
+.burn-after-read-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.burn-after-read-dialog {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #e0e0e0;
+  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
+  color: white;
+}
+.dialog-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.dialog-header h3::before {
+  content: '🔥';
+  font-size: 20px;
+}
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: white;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s;
+}
+.close-btn:hover {
+  opacity: 0.8;
+}
+.dialog-body {
+  padding: 20px;
+  flex: 1;
+  overflow-y: auto;
+}
+.burn-time-section {
+  margin-bottom: 24px;
+}
+.burn-time-section > label {
+  display: block;
+  margin-bottom: 12px;
+  font-weight: 600;
+  color: #333;
+  font-size: 14px;
+}
+.burn-time-presets {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 8px;
+  margin-bottom: 16px;
+}
+.preset-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 12px 8px;
+  border: 2px solid #e0e0e0;
+  border-radius: 6px;
+  background-color: white;
+  color: #333;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s;
+}
+.preset-btn:hover {
+  border-color: #ff6b6b;
+  background-color: #fff5f5;
+}
+.preset-btn.active {
+  border-color: #ff6b6b;
+  background-color: #ff6b6b;
+  color: white;
+}
+.preset-btn i {
+  font-size: 18px;
+}
+.custom-time-section {
+  border-top: 1px solid #e0e0e0;
+  padding-top: 16px;
+}
+.custom-time-section label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #333;
+  font-size: 13px;
+}
+.custom-time-input {
+  display: flex;
+  gap: 8px;
+}
+.custom-time-input input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+}
+.custom-time-input input:focus {
+  outline: none;
+  border-color: #ff6b6b;
+  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.1);
+}
+.apply-custom-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: #ff6b6b;
+  color: white;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background-color 0.2s;
+}
+.apply-custom-btn:hover:not(:disabled) {
+  background-color: #ff5252;
+}
+.apply-custom-btn:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+.message-preview-section {
+  margin-bottom: 24px;
+}
+.message-preview-section label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #333;
+  font-size: 14px;
+}
+.message-preview {
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.burn-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
+  color: white;
+  font-size: 12px;
+  font-weight: 500;
+}
+.burn-icon {
+  font-size: 14px;
+  animation: flame 1.5s ease-in-out infinite alternate;
+}
+@keyframes flame {
+  0% { transform: scale(1) rotate(-2deg); }
+  100% { transform: scale(1.1) rotate(2deg); }
+}
+.message-content {
+  padding: 12px;
+  background-color: #f9f9f9;
+  color: #666;
+  font-size: 13px;
+  line-height: 1.5;
+  word-break: break-word;
+  max-height: 100px;
+  overflow-y: auto;
+}
+.burn-info {
+  padding: 12px;
+  background-color: #fff5f5;
+  border: 1px solid #ffebee;
+  border-radius: 6px;
+  border-left: 4px solid #ff6b6b;
+}
+.burn-time-display {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+.burn-time-display .label {
+  color: #666;
+  font-weight: 500;
+}
+.burn-time-display .time-value {
+  color: #ff6b6b;
+  font-weight: 600;
+}
+.burn-warning {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 12px;
+  color: #ff6b6b;
+  line-height: 1.4;
+}
+.burn-warning i {
+  font-size: 14px;
+  margin-top: 1px;
+  flex-shrink: 0;
+}
+.dialog-footer {
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  border-top: 1px solid #e0e0e0;
+  background-color: #fafafa;
+}
+.btn {
+  flex: 1;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+.btn-cancel {
+  background-color: white;
+  color: #333;
+  border: 1px solid #e0e0e0;
+}
+.btn-cancel:hover {
+  background-color: #f5f5f5;
+  border-color: #d0d0d0;
+}
+.btn-primary {
+  background-color: #ff6b6b;
+  color: white;
+}
+.btn-primary:hover:not(:disabled) {
+  background-color: #ff5252;
+}
+.btn-primary:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+/* 响应式设计 */
+@media (max-width: 600px) {
+  .burn-after-read-dialog {
+    width: 95%;
+    max-height: 95vh;
+  }
+  .burn-time-presets {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .dialog-body {
+    padding: 16px;
+  }
+  .dialog-header {
+    padding: 12px;
+  }
+  .dialog-footer {
+    padding: 12px;
+  }
+}
+</style>