# 网站信息和统计数据状态管理使用指南

## 概述

项目已经实现了网站信息和统计数据的状态管理，使用 Pinia 进行状态管理，避免了在多个组件中重复调用 API。

## Store 结构

### 1. 网站信息 Store (`useSiteStore`)

位置：`src/store/modules/site.ts`

**功能：**
- 缓存网站基本信息（名称、Logo、域名等）
- 自动计算系统运行天数
- 智能缓存管理（默认30分钟有效期）
- 自动更新 localStorage 中的相关信息

**主要 API：**
```typescript
const siteStore = useSiteStore();

// 获取网站信息（带缓存）
await siteStore.fetchSiteInfo();

// 强制刷新
await siteStore.fetchSiteInfo(true);

// 获取计算属性
siteStore.websiteName
siteStore.websiteLogo
siteStore.runDays
```

### 2. 统计数据 Store (`useStatisticsStore`)

位置：`src/store/modules/statistics.ts`

**功能：**
- 缓存统计数据（用户数、订单数、销售额等）
- 自动刷新机制（默认5分钟间隔）
- 异步更新数据库
- 短期缓存策略

**主要 API：**
```typescript
const statisticsStore = useStatisticsStore();

// 获取统计数据
await statisticsStore.fetchStatistics();

// 开始自动刷新（5分钟间隔）
statisticsStore.startAutoRefresh();

// 停止自动刷新
statisticsStore.stopAutoRefresh();

// 获取统计数据
statisticsStore.userCount
statisticsStore.orderCount
statisticsStore.totalSales
```

## 使用方式

### 方式一：直接使用 Store

```vue
<template>
  <div>
    <h1>{{ siteStore.websiteName }}</h1>
    <img :src="siteStore.websiteLogo" alt="logo" />
    <p>用户总数: {{ statisticsStore.userCount }}</p>
    <p>运行天数: {{ siteStore.runDays }}</p>
  </div>
</template>

<script setup>
import { useSiteStore } from '@/store/modules/site';
import { useStatisticsStore } from '@/store/modules/statistics';
import { onMounted, onUnmounted } from 'vue';

const siteStore = useSiteStore();
const statisticsStore = useStatisticsStore();

onMounted(async () => {
  // 加载数据
  await Promise.all([
    siteStore.fetchSiteInfo(),
    statisticsStore.fetchStatistics()
  ]);
  
  // 开始自动刷新统计数据
  statisticsStore.startAutoRefresh();
});

onUnmounted(() => {
  // 停止自动刷新
  statisticsStore.stopAutoRefresh();
});
</script>
```

### 方式二：使用组合式函数（推荐）

```vue
<template>
  <div>
    <h1>{{ websiteName }}</h1>
    <img :src="websiteLogo" alt="logo" />
    <p>用户总数: {{ userCount }}</p>
    <p>运行天数: {{ runDays }}</p>
    <a-spin :spinning="loading">
      <!-- 内容 -->
    </a-spin>
  </div>
</template>

<script setup>
import { useSiteData } from '@/composables/useSiteData';
import { onMounted, onUnmounted } from 'vue';

const {
  websiteName,
  websiteLogo,
  userCount,
  runDays,
  loading,
  refreshAll,
  startAutoRefresh,
  stopAutoRefresh
} = useSiteData();

onMounted(async () => {
  await refreshAll();
  startAutoRefresh();
});

onUnmounted(() => {
  stopAutoRefresh();
});
</script>
```

## 缓存策略

### 网站信息缓存
- **有效期：** 30分钟
- **策略：** 长期缓存，信息相对稳定
- **刷新时机：** 手动刷新或缓存过期

### 统计数据缓存
- **有效期：** 5分钟
- **策略：** 短期缓存 + 自动刷新
- **刷新时机：** 自动刷新（5分钟间隔）或手动刷新

## 最佳实践

### 1. 组件生命周期管理
```typescript
onMounted(async () => {
  // 加载数据
  await refreshAll();
  // 开始自动刷新
  startAutoRefresh();
});

onUnmounted(() => {
  // 清理定时器
  stopAutoRefresh();
});
```

### 2. 错误处理
```typescript
try {
  await siteStore.fetchSiteInfo();
} catch (error) {
  console.error('获取网站信息失败:', error);
  // 处理错误
}
```

### 3. 强制刷新
```typescript
// 用户手动刷新时
const handleRefresh = async () => {
  await refreshAll(true); // 强制刷新
};
```

## 迁移指南

### 从直接 API 调用迁移

**之前：**
```typescript
import { getSiteInfo } from '@/api/layout';

const siteInfo = ref({});
const loadSiteInfo = async () => {
  siteInfo.value = await getSiteInfo();
};
```

**现在：**
```typescript
import { useSiteStore } from '@/store/modules/site';

const siteStore = useSiteStore();
// 直接使用 siteStore.siteInfo 或 siteStore.websiteName 等
```

## 注意事项

1. **自动刷新管理：** 确保在组件卸载时停止自动刷新，避免内存泄漏
2. **缓存有效性：** 可以通过 `isCacheValid` 检查缓存是否有效
3. **错误处理：** 所有异步操作都应该有适当的错误处理
4. **性能优化：** 使用计算属性而不是直接访问 store 状态

## 扩展功能

如需添加新的统计数据或网站信息字段，请：

1. 更新对应的 Store 接口
2. 添加相应的 getter
3. 更新组合式函数
4. 更新类型定义