num/client/pages/relations/analysis-records.vue

<template>
  <view class="page-records" :class="themeClass">
    <!-- ========== Header ========== -->
    <view class="header-bar">
      <text class="header-title">分析记录</text>
      <view class="btn-new" @click="goNewAnalysis">
        <text class="btn-new-text">+ 新建</text>
      </view>
    </view>

    <!-- ========== Loading ========== -->
    <view v-if="loading" class="loading-state">
      <view v-for="i in 3" :key="i" class="skeleton-card" />
    </view>

    <!-- ========== Empty ========== -->
    <view v-else-if="records.length === 0" class="empty-state">
      <text class="empty-icon">📋</text>
      <text class="empty-text">暂无分析记录</text>
      <text class="empty-desc">选择关系人并开启关系能量分析</text>
      <view class="btn-empty-new" @click="goNewAnalysis">
        <text class="btn-empty-new-text">新建分析</text>
      </view>
    </view>

    <!-- ========== Records List ========== -->
    <view v-else class="records-list">
      <view
        v-for="item in records"
        :key="item.id"
        class="record-card"
        @click="goChat(item.id)"
      >
        <view class="record-top">
          <text class="record-title">{{ item.title || '关系分析' }}</text>
          <text class="record-time">{{ formatTime(item.createTime) }}</text>
        </view>
        <view class="record-meta">
          <text class="record-status" :class="item.status === 'active' ? 'status-active' : 'status-archived'">
            {{ item.status === 'active' ? '进行中' : '已归档' }}
          </text>
        </view>
        <view class="record-actions">
          <view class="record-action action-delete" @click.stop="handleDelete(item.id)">
            删除
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import request from '@/utils/api'
import { useTheme } from '@/composables/useThemeStyle'

const { themeClass } = useTheme()

const records = ref([])
const loading = ref(false)

onShow(() => {
  fetchRecords()
})

async function fetchRecords() {
  loading.value = true
  try {
    records.value = await request.post('/relation/analysis/list', {})
  } catch (e) {
    records.value = []
  } finally {
    loading.value = false
  }
}

function goNewAnalysis() {
  uni.navigateTo({ url: '/pages/relations/analysis-select' })
}

function goChat(recordId) {
  uni.navigateTo({ url: '/pages/relations/analysis-chat?recordId=' + recordId })
}

function handleDelete(id) {
  uni.showModal({
    title: '确认删除',
    content: '删除后聊天记录将丢失，确定要删除吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await request.post('/relation/analysis/delete', { id })
          uni.showToast({ title: '删除成功', icon: 'success' })
          fetchRecords()
        } catch (e) {
          uni.showToast({ title: '删除失败', icon: 'none' })
        }
      }
    }
  })
}

function formatTime(time) {
  if (!time) return ''
  const d = new Date(time)
  const month = (d.getMonth() + 1).toString().padStart(2, '0')
  const day = d.getDate().toString().padStart(2, '0')
  const hour = d.getHours().toString().padStart(2, '0')
  const min = d.getMinutes().toString().padStart(2, '0')
  return `${month}-${day} ${hour}:${min}`
}
</script>

<style scoped lang="scss">

.page-records {
  min-height: 100vh;
  background: var(--color-bg);
  padding: 16px;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.header-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.btn-new {
  background: var(--color-gold);
  border-radius: 999px;
  padding: 8px 18px;
}
.btn-new:active {
  transform: scale(0.97);
}
.btn-new-text {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
}

/* Loading */
.loading-state {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-card {
  height: 100px;
  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg) 50%, var(--color-bg-secondary) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 14px;
}
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* Empty */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
}
.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.empty-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.empty-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
}
.btn-empty-new {
  background: var(--color-brand);
  border-radius: 12px;
  padding: 12px 32px;
}
.btn-empty-new:active {
  transform: scale(0.97);
}
.btn-empty-new-text {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
}

/* Records */
.records-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.record-card {
  background: var(--color-bg-card);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.record-card:active {
  transform: scale(0.98);
}
.record-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.record-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  flex: 1;
  margin-right: 10px;
}
.record-time {
  font-size: 12px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.record-meta {
  margin-bottom: 10px;
}
.record-status {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}
.status-active {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.status-archived {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}
.record-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
}
.record-action {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 6px;
}
.record-action:active {
  transform: scale(0.97);
}
.action-delete {
  color: #D94A4A;
  background: transparent;
}
</style>