sg-paisou 0.0.0

package/src/views/History/index.vue

@@ -0,0 +1,419 @@
+<template>
+  <div class="history-page">
+    <PageHeader title="History" :back-type="fromSource" />
+
+    <div class="tabs">
+      <div
+        v-for="tab in tabs"
+        :key="tab.value"
+        :class="['tab-item', { active: activeTab === tab.value }]"
+        @click="activeTab = tab.value"
+      >
+        {{ tab.label }}
+      </div>
+    </div>
+
+    <div class="content" ref="contentRef" @scroll="handleScroll">
+      <div class="content-list">
+         <!--首次加载状态-->
+        <div v-if="isInitialLoading" class="loading-indicator">
+          <div class="loading-spinner"></div>
+          <span>Loading...</span>
+        </div>
+
+        <!-- 数据列表 -->
+        <template v-else-if="currentGroups.length > 0">
+          <div v-for="(group, index) in currentGroups" :key="index" class="date-group">
+            <div class="date-title">{{ group.date }}</div>
+            <div class="items-grid">
+              <div
+                v-for="item in group.items"
+                :key="item.id"
+                class="history-item"
+                @click="handleItemClick(item)"
+              >
+                <div class="item-image-wrapper">
+                  <img :src="item.imageUrl" :alt="item.title" class="item-image" />
+                  <div v-if="item.isBookmarked" class="bookmark-badge">Bookmarked</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 加载更多提示 -->
+          <div v-if="loading" class="loading-indicator">
+            <div class="loading-spinner"></div>
+            <span>Loading...</span>
+          </div>
+
+          <!-- 没有更多数据 -->
+          <div v-if="!hasMore" class="no-more-data">
+            No more data
+          </div>
+        </template>
+
+        <!-- 空状态（非首次加载且无数据） -->
+        <div v-else class="empty-state">
+          <img :src="emptyConfig.image" :alt="emptyConfig.alt" />
+          <span>{{ emptyConfig.text }}</span>
+          <span v-if="emptyConfig.description" class="empty-state-description">
+            {{ emptyConfig.description }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import PageHeader from '../../components/PageHeader/index.vue'
+import type { IHistoryItem, IHistoryGroup, ISessionItem } from '../../type'
+import { getSessions, getFavorites } from '../../utils/request'
+import emptyHistoryImg from '@/assets/images/empty-history.png'
+import emptyBookmarkImg from '@/assets/images/empty-bookmark.png'
+
+const route = useRoute()
+const router = useRouter()
+
+// Tab 配置
+const tabs = [
+  { label: 'All', value: 'all' as const },
+  { label: 'Bookmarks', value: 'bookmarks' as const }
+]
+
+const activeTab = ref<'all' | 'bookmarks'>('all')
+const fromSource = ref<'client' | 'page'>(route.query.from === 'page' ? 'page' : 'client')
+const contentRef = ref<HTMLElement>()
+const loading = ref(false)
+const pageSize = 10
+
+// 为每个 Tab 独立维护分页状态
+const pagingState = ref({
+  all: { currentPage: 1, hasMore: true, total: 0 },
+  bookmarks: { currentPage: 1, hasMore: true, total: 0 }
+})
+
+// 为每个 Tab 独立维护初始加载状态
+const initialLoadingState = ref({
+  all: true,
+  bookmarks: true
+})
+
+// 数据存储
+const historyData = ref<IHistoryItem[]>([])
+const bookmarksData = ref<IHistoryItem[]>([])
+
+// 当前 Tab 的分页状态
+const currentPaging = computed(() => pagingState.value[activeTab.value])
+const hasMore = computed(() => currentPaging.value.hasMore)
+const isInitialLoading = computed(() => initialLoadingState.value[activeTab.value])
+
+// 公共数据分组函数
+const groupByDate = (items: IHistoryItem[]): IHistoryGroup[] => {
+  const groups: Record<string, IHistoryItem[]> = {}
+  items.forEach(item => {
+    (groups[item.date] ||= []).push(item)
+  })
+  return Object.entries(groups).map(([date, items]) => ({ date, items }))
+}
+
+// 当前 Tab 的分组数据
+const currentGroups = computed(() =>
+  groupByDate(activeTab.value === 'all' ? historyData.value : bookmarksData.value)
+)
+
+// 空状态配置
+const emptyConfig = computed(() =>
+  activeTab.value === 'all'
+    ? {
+        image: emptyHistoryImg,
+        alt: 'empty-history',
+        text: 'No search history.'
+      }
+    : {
+        image: emptyBookmarkImg,
+        alt: 'empty-bookmark',
+        text: 'No bookmarks yet',
+        description: 'Find a result and tap the bookmark icon to save it here'
+      }
+)
+
+
+// 格式化日期
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString)
+  const today = new Date()
+  const dateStr = date.toDateString()
+
+  if (dateStr === today.toDateString()) return 'Today'
+
+  const yesterday = new Date(today)
+  yesterday.setDate(yesterday.getDate() - 1)
+  if (dateStr === yesterday.toDateString()) return 'Yesterday'
+
+  return `${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}/${date.getFullYear()}`
+}
+
+// 判断是否超过7天
+const isOverSevenDays = (dateString: string): 0 | 1 => {
+  const diffDays = Math.floor((Date.now() - new Date(dateString).getTime()) / (86400000))
+  return diffDays > 7 ? 1 : 0
+}
+
+// 转换 API 数据
+const convertSessionToHistoryItem = (session: ISessionItem): IHistoryItem => ({
+  id: session.id,
+  title: session.content || session.summary || session.orcText || 'Untitled',
+  imageUrl: session.imagePath || '',
+  isBookmarked: session.favorite === 1,
+  date: formatDate(session.createdAt),
+  isOverSevenDays: isOverSevenDays(session.createdAt),
+  questionData: session
+})
+
+// 点击历史记录项
+const handleItemClick = (item: IHistoryItem) => {
+  try {
+    sessionStorage.setItem('selectedHistoryItem', JSON.stringify(item))
+    router.push({
+      path: '/',
+      query: { from: 'history', itemId: item.id, isOverSevenDays: String(item.isOverSevenDays) }
+    })
+  } catch (error) {
+    console.error('存储历史记录项数据失败:', error)
+  }
+}
+
+// 加载数据（统一处理历史记录和书签）
+const loadData = async (type: 'all' | 'bookmarks', page: number = 1) => {
+  loading.value = true
+
+  try {
+    const apiCall = type === 'all' ? getSessions : getFavorites
+    const response = await apiCall(
+      { page, pageSize },
+    )
+
+    if (response?.sessions) {
+      const newItems = response.sessions.map(convertSessionToHistoryItem)
+      const targetData = type === 'all' ? historyData : bookmarksData
+
+      targetData.value = page === 1 ? newItems : [...targetData.value, ...newItems]
+
+      // 更新对应 Tab 的分页状态
+      pagingState.value[type].total = response.total
+      pagingState.value[type].currentPage = page
+      pagingState.value[type].hasMore = targetData.value.length < response.total
+
+      // 首次加载完成，关闭初始加载状态
+      if (page === 1) {
+        initialLoadingState.value[type] = false
+      }
+
+      console.log(`加载${type === 'all' ? '历史记录' : '书签'}第 ${page} 页，当前共 ${targetData.value.length}/${response.total} 条`)
+    } else {
+      // 如果没有数据，也关闭初始加载状态
+      if (page === 1) {
+        initialLoadingState.value[type] = false
+      }
+    }
+  } catch (error) {
+    console.error(`加载${type === 'all' ? '历史记录' : '书签'}失败:`, error)
+    pagingState.value[type].hasMore = false
+    // 加载失败时也关闭初始加载状态，以便显示空状态
+    if (page === 1) {
+      initialLoadingState.value[type] = false
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载更多数据
+const loadMore = async () => {
+  if (loading.value || !currentPaging.value.hasMore) return
+
+  const nextPage = currentPaging.value.currentPage + 1
+  await loadData(activeTab.value, nextPage)
+}
+
+// 处理滚动事件
+const handleScroll = (event: Event) => {
+  const target = event.target as HTMLElement
+  if (!target) return
+
+  const { scrollTop, scrollHeight, clientHeight } = target
+  if (scrollHeight - scrollTop - clientHeight < 100) {
+    loadMore()
+  }
+}
+
+// 监听 Tab 切换
+watch(activeTab, async (newTab) => {
+  // 重置滚动位置
+  contentRef.value && (contentRef.value.scrollTop = 0)
+
+  // 如果该 Tab 还没有数据，则加载第一页
+  const targetData = newTab === 'all' ? historyData : bookmarksData
+  if (targetData.value.length === 0) {
+    // 如果还没有数据，确保初始加载状态为 true
+    initialLoadingState.value[newTab] = true
+    await loadData(newTab, 1)
+  } else {
+    // 如果已有数据，确保初始加载状态为 false
+    initialLoadingState.value[newTab] = false
+  }
+})
+
+onMounted(() => {
+  loadData('all', 1)
+})
+
+</script>
+
+<style scoped lang="scss">
+.history-page {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7));
+
+  .tabs {
+    display: flex;
+    gap: 12px;
+    padding: 0 48px 12px;
+
+    .tab-item {
+      padding: 8px 16px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #666;
+      background: #FFF;
+      border-radius: 70px;
+      line-height: 24px;
+
+      &.active {
+        color: #FF9D00;
+        background: rgba(255, 157, 0, 0.1);
+      }
+    }
+  }
+
+  .content {
+    flex: 1;
+    padding: 12px 48px 24px;
+    overflow-y: auto;
+
+    .content-list {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      min-height: 100%;
+
+      .date-group {
+        .date-title {
+          font-size: 20px;
+          font-weight: 600;
+          color: #222;
+          line-height: 32px;
+          margin-bottom: 12px;
+        }
+
+        .items-grid {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 24px;
+
+          .history-item {
+
+            .item-image-wrapper {
+              position: relative;
+              height: 180px;
+              border-radius: 12px;
+              overflow: hidden;
+
+              .item-image {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+              }
+
+              .bookmark-badge {
+                position: absolute;
+                top: 16px;
+                left: 16px;
+                font-size: 18px;
+                line-height: 18px;
+                color: #FFF;
+              }
+            }
+          }
+        }
+      }
+
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+        flex: 1;
+
+        img {
+          width: 300px;
+          height: 200px;
+        }
+
+        span {
+          font-size: 20px;
+          font-weight: 500;
+          line-height: 24px;
+          color: #222;
+
+          &.empty-state-description {
+            font-size: 16px;
+            color: #999;
+            margin-top: -8px;
+          }
+        }
+      }
+
+      .loading-indicator {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        text-align: center;
+        font-size: 16px;
+        color: #666;
+        min-height: 200px;
+
+        .loading-spinner {
+          width: 20px;
+          height: 20px;
+          border: 4px solid rgba(255, 157, 0, 0.2);
+          border-top-color: #FF9D00;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+        }
+      }
+
+      .no-more-data {
+        text-align: center;
+        padding-bottom: 24px;
+        font-size: 16px;
+        color: #999;
+      }
+    }
+  }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
+