AIxiaocaishen/src/views/components/HistoryRecord.vue

<template>
  <div
    v-if="!isMobile"
    class="history-record-container"
    :class="{
      collapsed: !isCollapsed,
    }"
  >
    <!-- 收起状态的展开按钮和图标 -->
    <div v-if="isCollapsed" class="collapsed-container">
      <img
        class="collapsed-icon"
        src="https://d31zlh4on95l9h.cloudfront.net/images/74430a4ebbb67aefc713bf694147fb2a.png"
        alt="icon"
      />
      <img
        class="collapsed-toggle-btn"
        @click="openHistory"
        src="	https://d31zlh4on95l9h.cloudfront.net/images/b2d784f8607ab65081f5289459581bfe.png"
        alt="icon"
      />
    </div>

    <div v-if="isCollapsed" class="collapsed-bottom-container">
      <div class="collapsed-bottom-btn" @click="handleFeedbackClick">
        <img
          class="collapsed-bottom-feedback"
          src="https://d31zlh4on95l9h.cloudfront.net/images/41d6e25c19466718d462bcee2f050140.png"
          alt="icon"
        />
      </div>
      <div class="collapsed-bottom-btn" @click="handleAnnouncementClick">
        <img
          class="collapsed-bottom-announcement"
          @click="openHistory"
          src="https://d31zlh4on95l9h.cloudfront.net/images/c51c7fbb68671729801fb10d65bd7789.png"
          alt="icon"
        />
      </div>
    </div>

    <!-- 历史记录内容 -->
    <div class="history-content" v-show="!isCollapsed">
      <div class="head-container">
        <!-- 标题 -->
        <div class="history-actions">
          <img
            src="/src/assets/img/homePage/logo.png"
            alt="Logo"
            class="logo-img"
          />
        </div>
        <!-- 折叠/展开按钮 -->
        <img
          class="toggle-btn"
          @click="closeHistory"
          src="	https://d31zlh4on95l9h.cloudfront.net/images/b2d784f8607ab65081f5289459581bfe.png"
          alt="icon"
        />
      </div>
      <!-- 历史记录列表 -->
      <div class="history-list">
        <div
          v-for="record in filteredHistory"
          :key="record.id"
          class="history-item"
          @click="selectRecord(record)"
          :class="{ active: selectedRecordId === record.id }"
        >
          <div class="record-content">
            <div class="record-type">
              <span class="type-badge" :class="record.type">
                {{ record.type === "AIchat" ? "夺宝奇兵" : "AI情绪" }}
              </span>
            </div>
            <div class="record-text">{{ record.question }}</div>
            <div class="record-time">{{ formatTime(record.timestamp) }}</div>
          </div>
          <div class="record-actions">
            <button
              class="delete-btn"
              @click.stop="deleteRecord(record.id)"
              title="删除"
            >
              <svg
                width="12"
                height="12"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M18 6L6 18M6 6L18 18"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </button>
          </div>
        </div>
        <!-- 空状态 -->
        <div v-if="filteredHistory.length === 0" class="empty-state">
          <div class="empty-icon">
            <el-icon class="documentDelete"><DocumentDelete /></el-icon>
            <!-- <svg
              width="48"
              height="48"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.1 3.89 23 5 23H19C20.1 23 21 22.1 21 21V9M19 9H14V4"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg> -->
          </div>
          <p class="empty-text">暂无历史记录</p>
        </div>
      </div>

      <div class="bottom-container">
        <div class="bottom-btn" @click="handleFeedbackClick">
          <img
            class="bottom-feedback"
            src="https://d31zlh4on95l9h.cloudfront.net/images/41d6e25c19466718d462bcee2f050140.png"
            alt="icon"
          />
        </div>
        <div class="bottom-btn" @click="handleAnnouncementClick">
          <img
            class="bottom-announcement"
            @click="openHistory"
            src="https://d31zlh4on95l9h.cloudfront.net/images/c51c7fbb68671729801fb10d65bd7789.png"
            alt="icon"
          />
        </div>
      </div>
    </div>
  </div>

  <div
    v-else
    class="mobile-history-record-container"
    :class="{
      mobileCollapsed: !isCollapsed,
    }"
  >
    <!-- 历史记录内容 -->
    <div class="history-content" v-show="!isCollapsed">
      <div class="mobile-head-container">
        <!-- 折叠/展开按钮 -->
        <img
          class="mobile-toggle-btn"
          @click="closeHistory"
          src="https://d31zlh4on95l9h.cloudfront.net/images/37fe3d79a8a700f6c674c9f0e7af066b.png"
          alt="icon"
        />
        <!-- 标题 -->
        <div class="mobile-history-actions">
          <img
            src="/src/assets/img/homePage/logo.png"
            alt="Logo"
            class="logo-img"
          />
        </div>
      </div>
      <!-- 历史记录列表 -->
      <div class="history-list">
        <div
          v-for="record in filteredHistory"
          :key="record.id"
          class="history-item"
          @click="selectRecord(record)"
          :class="{ active: selectedRecordId === record.id }"
        >
          <div class="record-content">
            <div class="record-type">
              <span class="type-badge" :class="record.type">
                {{ record.type === "AIchat" ? "夺宝奇兵" : "AI情绪" }}
              </span>
            </div>
            <div class="record-text">{{ record.question }}</div>
            <div class="record-time">{{ formatTime(record.timestamp) }}</div>
          </div>
          <div class="record-actions">
            <button
              class="delete-btn"
              @click.stop="deleteRecord(record.id)"
              title="删除"
            >
              <svg
                width="12"
                height="12"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M18 6L6 18M6 6L18 18"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </button>
          </div>
        </div>
        <!-- 空状态 -->
        <div v-if="filteredHistory.length === 0" class="empty-state">
          <div class="empty-icon">
            <el-icon class="documentDelete"><DocumentDelete /></el-icon>
            <!-- <svg
              width="48"
              height="48"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.1 3.89 23 5 23H19C20.1 23 21 22.1 21 21V9M19 9H14V4"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg> -->
          </div>
          <p class="empty-text">暂无历史记录</p>
        </div>
      </div>

      <div class="mobile-bottom-container">
        <div class="mobile-bottom-btn" @click="handleFeedbackClick">
          <img
            class="mobile-bottom-feedback"
            src="https://d31zlh4on95l9h.cloudfront.net/images/41d6e25c19466718d462bcee2f050140.png"
            alt="icon"
          />
          <div class="mobile-bottom-text">用户反馈</div>
        </div>
        <div class="mobile-bottom-btn" @click="handleAnnouncementClick">
          <img
            class="mobile-bottom-announcement"
            @click="openHistory"
            src="https://d31zlh4on95l9h.cloudfront.net/images/c51c7fbb68671729801fb10d65bd7789.png"
            alt="icon"
          />
          <div class="mobile-bottom-text">公告</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";

// Props
const props = defineProps({
  currentType: {
    type: String,
    default: "AIchat", // 'AIchat' 或 'AiEmotion'
  },
  isMobile: {
    type: Boolean,
    default: false,
  },
});

// Emits
const emit = defineEmits([
  "selectRecord",
  "recordAdded",
  "startNewChat",
  "showAnnouncement",
  "showFeedback",
]);

// 响应式数据
const isCollapsed = ref(false);
const selectedRecordId = ref(null);
const historyRecords = ref([]);

// 计算属性
const filteredHistory = computed(() => {
  return historyRecords.value;
});

// 方法
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
  // 保存折叠状态到本地存储
  localStorage.setItem("historyRecordCollapsed", isCollapsed.value);
};

const openHistory = () => {
  isCollapsed.value = false;
};

const closeHistory = () => {
  isCollapsed.value = true;
};

const selectRecord = (record) => {
  selectedRecordId.value = record.id;
  emit("selectRecord", record);
};

const deleteRecord = (recordId) => {
  const index = historyRecords.value.findIndex(
    (record) => record.id === recordId
  );
  if (index > -1) {
    historyRecords.value.splice(index, 1);
    saveToLocalStorage();

    // 如果删除的是当前选中的记录，清除选中状态
    if (selectedRecordId.value === recordId) {
      selectedRecordId.value = null;
    }
  }
};

const clearHistory = () => {
  if (confirm("确定要清空所有历史记录吗？")) {
    historyRecords.value = [];
    selectedRecordId.value = null;
    saveToLocalStorage();
  }
};

const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  const now = new Date();
  const diff = now - date;

  // 小于1分钟
  if (diff < 60000) {
    return "刚刚";
  }

  // 小于1小时
  if (diff < 3600000) {
    return `${Math.floor(diff / 60000)}分钟前`;
  }

  // 小于1天
  if (diff < 86400000) {
    return `${Math.floor(diff / 3600000)}小时前`;
  }

  // 大于1天
  if (diff < 604800000) {
    return `${Math.floor(diff / 86400000)}天前`;
  }

  // 超过一周，显示具体日期
  return date.toLocaleDateString("zh-CN", {
    month: "short",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
};

const saveToLocalStorage = () => {
  localStorage.setItem(
    "aiChatHistoryRecords",
    JSON.stringify(historyRecords.value)
  );
};

const loadFromLocalStorage = () => {
  try {
    const saved = localStorage.getItem("aiChatHistoryRecords");
    if (saved) {
      historyRecords.value = JSON.parse(saved);
    }

    // 加载折叠状态
    const collapsedState = localStorage.getItem("historyRecordCollapsed");
    if (collapsedState !== null) {
      isCollapsed.value = collapsedState === "true";
    }
  } catch (error) {
    console.error("加载历史记录失败:", error);
    historyRecords.value = [];
  }
};

// 处理公告按钮点击
const handleAnnouncementClick = () => {
  emit("showAnnouncement");
};

// 处理用户反馈按钮点击
const handleFeedbackClick = () => {
  emit("showFeedback");
};

// 暴露方法和状态给父组件
defineExpose({
  clearHistory,
  isCollapsed,
  toggleCollapse,
});

// 生命周期
onMounted(() => {
  loadFromLocalStorage();
});

// 监听历史记录变化，自动保存
watch(
  historyRecords,
  () => {
    saveToLocalStorage();
  },
  { deep: true }
);
</script>

<style scoped>
.history-record-container {
  min-width: 40px;
  width: 3%;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: width 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}

.mobile-history-record-container {
  width: 0px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: width 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.collapsed {
  width: 300px;
}

.mobileCollapsed {
  width: 80vw;
}

.toggle-btn {
  width: 32px;
  height: 32px;
  transform: rotate(180deg);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.mobile-toggle-btn {
  width: 10%;
  height: auto;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.collapsed-container {
  width: 100%;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  z-index: 1000;
}

.collapsed-icon {
  width: 80%;
  height: auto;
  object-fit: contain;
}

.collapsed-toggle-btn {
  width: 80%;
  height: auto;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.collapsed-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.collapsed-bottom-container {
  width: 100%;
  height: 16%;
  margin-top: auto;
  background-color: rgba(106, 0, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 30px;
  z-index: 1000;
}

.collapsed-bottom-btn {
  width: 100%;
  /* height: 50%; */
  display: flex;
  justify-content: center;
  /* align-items: center; */
}

.collapsed-bottom-feedback {
  width: 60%;
  height: auto;
}
.collapsed-bottom-feedback:hover {
  transform: scale(1.1);
}
.collapsed-bottom-announcement {
  width: 60%;
  height: auto;
}
.collapsed-bottom-announcement:hover {
  transform: scale(1.1);
}
.history-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* padding: 20px; */
  overflow: hidden;
}

.head-container {
  margin-top: 20%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-head-container {
  padding: 5px 0px 5px 20px;
  /* margin-left: 20px; */
  /* width: 100%; */
  display: flex;
  align-items: center;
  border-bottom: 2px solid #414141;
  /* justify-content: center; */
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.history-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-history-actions {
  margin-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-img {
  height: auto;
  width: 70%;
  object-fit: contain;
}

.new-chat-btn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.new-chat-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.new-chat-btn:active {
  transform: translateY(0);
}

.history-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.history-list::-webkit-scrollbar {
  width: 6px;
}

.history-list::-webkit-scrollbar-track {
  background: transparent;
}

.history-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.history-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.history-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.history-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.history-item.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.record-content {
  flex: 1;
  min-width: 0;
}

.record-type {
  margin-bottom: 6px;
}

.type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.type-badge.AIchat {
  background: rgba(52, 152, 219, 0.2);
  color: #3498db;
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.type-badge.AiEmotion {
  background: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
  border: 1px solid rgba(155, 89, 182, 0.3);
}

.record-text {
  color: white;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.record-time {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

.record-actions {
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.history-item:hover .record-actions {
  opacity: 1;
}

.delete-btn {
  background: rgba(231, 76, 60, 0.2);
  border: none;
  border-radius: 4px;
  color: #e74c3c;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-btn:hover {
  background: rgba(231, 76, 60, 0.3);
  transform: scale(1.1);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.empty-icon {
  margin-bottom: 16px;
  opacity: 0.5;
}

.documentDelete {
  color: white;
  font-size: 5rem;
}

.empty-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin: 0;
}

.bottom-container {
  width: 100%;
  height: 16%;
  margin-top: auto;
  background-color: rgba(106, 0, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-bottom-container {
  border-top: 2px solid #414141;
  width: 100%;
  height: 16%;
  margin-top: auto;
  background-color: rgba(106, 0, 255, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.bottom-btn {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-bottom-btn {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}

.bottom-feedback {
  width: 30%;
  height: auto;
}

.mobile-bottom-feedback {
  margin-left: 20px;
  height: 60%;
  width: auto;
}

.bottom-feedback:hover {
  transform: scale(1.2);
}

.bottom-announcement {
  width: 30%;
  height: auto;
}

.mobile-bottom-announcement {
  margin-left: 20px;
  height: 60%;
  width: auto;
}

.mobile-bottom-text {
  color: white;
  margin-left: 10px;
  font-size: 1.1rem;
}

.bottom-announcement:hover {
  transform: scale(1.2);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .history-content {
    /* padding: 15px; */
  }
}
</style>