# 项目配置说明

## 配置文件

`src/config/project.ts` - 项目全局配置

## 重要配置项

### 1. 项目名称

```typescript
export const PROJECT_NAME = '产业带独立站供应商管理系统';
```

**⚠️ 重要：** 这个名称必须与 JeecgBoot 前端的项目名称完全一致，否则无法共享登录态！

### 2. 环境标识

```typescript
export const ENV_MODE = import.meta.env.MODE === 'production' ? 'PRODUCTION' : 'DEVELOPMENT';
```

- `PRODUCTION` - 生产环境
- `DEVELOPMENT` - 开发环境

自动根据 Vite 的环境变量切换。

### 3. 项目版本

```typescript
export const PROJECT_VERSION = '1.0.0';
```

版本号，建议与 JeecgBoot 前端保持一致。

### 4. Persistent Key 生成

```typescript
export function generatePersistentKey(): string {
  return `${PROJECT_NAME}__${ENV_MODE}__${PROJECT_VERSION}__${CACHE_TYPE}__${STORAGE_TYPE}__KEY__`;
}
```

**生成规则：**
```
{项目名}__{环境}__{版本}__COMMON__LOCAL__KEY__
```

**示例：**
- 生产环境：`产业带独立站供应商管理系统__PRODUCTION__1.0.0__COMMON__LOCAL__KEY__`
- 开发环境：`产业带独立站供应商管理系统__DEVELOPMENT__1.0.0__COMMON__LOCAL__KEY__`

## 如何确保与 JeecgBoot 兼容

### 步骤 1：查看 JeecgBoot 的配置

在 JeecgBoot 前端项目中找到 `src/settings/projectSetting.ts` 或类似文件，查看：

```typescript
// JeecgBoot 的配置示例
export default {
  title: '产业带独立站供应商管理系统',  // 项目名称
  // ...
}
```

### 步骤 2：查看实际的 localStorage key

1. 在 JeecgBoot 前端登录
2. 打开浏览器开发者工具
3. Application → Local Storage
4. 找到类似 `xxx__PRODUCTION__1.0.0__COMMON__LOCAL__KEY__` 的 key
5. 复制这个 key 的项目名称部分

### 步骤 3：更新 React 项目配置

修改 `src/config/project.ts`：

```typescript
// 使用与 JeecgBoot 完全相同的项目名称
export const PROJECT_NAME = '你从JeecgBoot看到的项目名称';
```

### 步骤 4：验证

1. 在 React 项目登录
2. 查看 localStorage，应该能看到相同的 key
3. 跳转到 JeecgBoot 前端，应该自动登录 ✅

## 环境变量

可以通过环境变量覆盖配置：

### .env.development

```env
VITE_APP_TITLE=产业带独立站供应商管理系统
VITE_APP_VERSION=1.0.0
```

### .env.production

```env
VITE_APP_TITLE=产业带独立站供应商管理系统
VITE_APP_VERSION=1.0.0
```

然后在 `project.ts` 中使用：

```typescript
export const PROJECT_NAME = import.meta.env.VITE_APP_TITLE || '产业带独立站供应商管理系统';
export const PROJECT_VERSION = import.meta.env.VITE_APP_VERSION || '1.0.0';
```

## 常见问题

### Q1: 为什么登录后跳转到 JeecgBoot 还是要重新登录？

**A:** 检查以下几点：
1. 项目名称是否完全一致（包括空格、标点符号）
2. 环境标识是否一致（PRODUCTION/DEVELOPMENT）
3. 版本号是否一致
4. 域名是否相同（localStorage 不能跨域）

### Q2: 如何查看当前使用的 Persistent Key？

**A:** 在浏览器控制台运行：

```javascript
import { generatePersistentKey } from './src/config/project';
console.log(generatePersistentKey());
```

或者直接查看 localStorage：

```javascript
Object.keys(localStorage).filter(key => key.includes('__COMMON__LOCAL__KEY__'));
```

### Q3: 开发环境和生产环境使用不同的 key 吗？

**A:** 是的，默认配置下：
- 开发环境：`xxx__DEVELOPMENT__xxx`
- 生产环境：`xxx__PRODUCTION__xxx`

这样可以避免开发和生产环境的数据冲突。

### Q4: 可以自定义 key 的格式吗？

**A:** 可以，但不推荐。如果要自定义，需要同时修改 JeecgBoot 前端的配置，确保两边一致。

## 最佳实践

1. **保持一致性**：React 项目和 JeecgBoot 前端使用完全相同的配置
2. **使用环境变量**：通过 `.env` 文件管理不同环境的配置
3. **版本管理**：项目升级时同步更新版本号
4. **文档记录**：在团队文档中记录项目名称和配置规则

## 调试技巧

### 查看所有 localStorage 数据

```javascript
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, '=', localStorage.getItem(key));
}
```

### 清除所有缓存

```javascript
localStorage.clear();
```

### 查看 Persistent 数据结构

```javascript
const key = '产业带独立站供应商管理系统__PRODUCTION__1.0.0__COMMON__LOCAL__KEY__';
const data = JSON.parse(localStorage.getItem(key));
console.log(JSON.stringify(data, null, 2));
```