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

<template>
  <view class="page-number-analysis">
    <!-- ========== Phone Input Section ========== -->
    <view class="input-card">
      <text class="input-label">手机号码</text>
      <view class="input-row">
        <input
          v-model="phoneNumber"
          class="phone-input"
          type="number"
          maxlength="11"
          placeholder="请输入11位手机号码"
          placeholder-class="input-placeholder"
          @confirm="handleAnalyze"
        />
        <view class="btn-analyze" :class="{ analyzing: analyzing }" @click="handleAnalyze">
          <text class="btn-analyze-text">{{ analyzing ? '分析中' : '分析' }}</text>
        </view>
      </view>
    </view>

    <!-- ========== Star Combinations Result ========== -->
    <view v-if="starCombinations.length > 0" class="result-section">
      <view class="section-header">
        <text class="section-title">🔢 八星数组</text>
      </view>
      <view class="star-grid">
        <view
          v-for="(star, index) in starCombinations"
          :key="index"
          class="star-card"
          :class="'star-type-' + star.type"
        >
          <view class="star-card-header">
            <text class="star-pair">{{ star.pair }}</text>
            <text class="star-name">{{ star.name }}</text>
          </view>
          <view class="star-card-body">
            <text class="star-energy">{{ star.energy }}</text>
            <text class="star-desc">{{ star.description || '' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- ========== AI Summary ========== -->
    <view v-if="summary" class="summary-card">
      <view class="summary-header">
        <text class="summary-title">🤖 AI 综合解读</text>
        <text v-if="summaryDate" class="summary-date">{{ summaryDate }}</text>
      </view>
      <view class="summary-body">
        <text class="summary-content">{{ summary }}</text>
      </view>
    </view>

    <!-- ========== Analysis History ========== -->
    <view v-if="history.length > 0" class="history-section">
      <view class="section-header">
        <text class="section-title">📋 历史分析</text>
      </view>
      <view
        v-for="item in history"
        :key="item.id"
        class="history-card"
        @click="loadHistory(item)"
      >
        <text class="history-phone">{{ maskPhone(item.phoneNumber) }}</text>
        <view class="history-meta">
          <text class="history-date">{{ formatDate(item.createdAt) }}</text>
          <text v-if="item.summary" class="history-status">已解读</text>
        </view>
      </view>
    </view>
  </view>
</template>

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

const phoneNumber = ref('')
const analyzing = ref(false)
const starCombinations = ref([])
const summary = ref('')
const summaryDate = ref('')
const history = ref([])

const analysisApi = {
  analyze: (data) => requestInstance.post('/number-analysis/analyze', data),
  list: (data) => requestInstance.post('/number-analysis/list', data),
  get: (id) => requestInstance.post('/number-analysis/detail', { id })
}

onShow(() => {
  fetchHistory()
})

async function fetchHistory() {
  try {
    history.value = await analysisApi.list({})
  } catch (e) {
    history.value = []
  }
}

async function handleAnalyze() {
  const num = phoneNumber.value.trim()
  if (num.length < 7) {
    uni.showToast({ title: '请输入至少7位数字', icon: 'none' })
    return
  }
  if (analyzing.value) return

  analyzing.value = true
  try {
    const result = await analysisApi.analyze({ phoneNumber: num })
    if (result) {
      starCombinations.value = result.starCombinations || []
      summary.value = result.summary || ''
      summaryDate.value = result.createdAt || ''
    }
    // Refresh history
    fetchHistory()
  } catch (e) {
    uni.showToast({ title: '分析失败，请重试', icon: 'none' })
  } finally {
    analyzing.value = false
  }
}

function loadHistory(item) {
  phoneNumber.value = item.phoneNumber || ''
  if (item.starCombinations) {
    try {
      starCombinations.value = typeof item.starCombinations === 'string'
        ? JSON.parse(item.starCombinations)
        : item.starCombinations
    } catch (e) {
      starCombinations.value = []
    }
  } else {
    starCombinations.value = []
  }
  summary.value = item.summary || ''
  summaryDate.value = item.createdAt || ''
}

function maskPhone(phone) {
  if (!phone) return ''
  if (phone.length >= 7) {
    return phone.slice(0, 3) + '****' + phone.slice(-4)
  }
  return phone
}

function formatDate(dateStr) {
  if (!dateStr) return ''
  return dateStr.slice(0, 10)
}
</script>

<style scoped lang="scss">
.page-number-analysis {
  min-height: 100vh;
  background: var(--color-bg);
  padding: 16px;
}

/* ========== Input Card ========== */
.input-card {
  background: var(--color-bg-card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.input-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}
.input-row {
  display: flex;
  gap: 12px;
}
.phone-input {
  flex: 1;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 18px;
  color: var(--color-text-primary);
  background: var(--color-bg-card);
  box-sizing: border-box;
}
.phone-input:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}
.input-placeholder {
  color: var(--color-text-secondary);
  font-size: 16px;
}
.btn-analyze {
  flex-shrink: 0;
  height: 48px;
  padding: 0 24px;
  background: var(--color-brand);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-analyze:active {
  transform: scale(0.97);
  opacity: 0.9;
}
.btn-analyze.analyzing {
  opacity: 0.7;
  pointer-events: none;
}
.btn-analyze-text {
  color: var(--color-bg-card);
  font-size: 16px;
  font-weight: 600;
}

/* ========== Sections ========== */
.result-section,
.history-section {
  margin-bottom: 16px;
}
.section-header {
  margin-bottom: 12px;
}
.section-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ========== Star Grid ========== */
.star-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.star-card {
  background: var(--color-bg-card);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--color-text-secondary);
}
.star-card.star-type-ji { border-left-color: #D94A4A; }
.star-card.star-type-huo { border-left-color: #E8A238; }
.star-card.star-type-yan { border-left-color: #4A90D9; }
.star-card.star-type-tian { border-left-color: #2D8B67; }
.star-card.star-type-sheng { border-left-color: #7B6FA0; }
.star-card.star-type-ju { border-left-color: #C9A84C; }
.star-card.star-type-fu { border-left-color: #4A6FA5; }
.star-card.star-type-jue { border-left-color: #B85C3A; }

.star-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.star-pair {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.star-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.star-card-body {
  padding-left: 2px;
}
.star-energy {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-brand);
  display: block;
  margin-bottom: 2px;
  text-transform: capitalize;
}
.star-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  display: block;
}

/* ========== Summary Card ========== */
.summary-card {
  background: var(--color-bg-card);
  border-radius: 16px;
  padding: 20px 16px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.summary-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.summary-date {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.summary-body {
  background: var(--color-bg-secondary);
  border-radius: 12px;
  padding: 16px;
}
.summary-content {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  white-space: pre-wrap;
}

/* ========== History ========== */
.history-card {
  background: var(--color-bg-card);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.history-card:active {
  transform: scale(0.98);
  opacity: 0.9;
}
.history-phone {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.history-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.history-date {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.history-status {
  font-size: 11px;
  color: var(--color-success);
  background: var(--color-success-bg);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}
</style>