# 🔧 新增项目配置指南

## 📋 快速开始

假设要新增一个"北京"项目（环境名：`beijing`，type：`4`），按以下步骤操作：

---

## 1️⃣ 创建资源目录

```bash
mkdir src/assets/beijing
```

将项目特定的图片、图标等资源放入此目录。

---

## 2️⃣ 创建平面图组件（必需）

```bash
cp src/views/plan/wuhan.vue src/views/plan/beijing.vue
```

修改 `src/views/plan/beijing.vue` 中的资源引用：

```javascript
const assetsVersion = import.meta.env.VITE_ASSETS_VERSION || 'beijing'
const backgroundImage = new URL(`../../assets/${assetsVersion}/beijing-bg.png`, import.meta.url).href
```

---

## 3️⃣ 修改构建配置

### 3.1 更新插件配置

**文件**：`vite/plugins/conditional-assets.js`

**第 13 行**：添加到版本列表

```javascript
const allVersions = ['wuhan', 'shiyan', 'suzhou', 'beijing']
```

### 3.2 添加构建命令

**文件**：`package.json`

在 `scripts` 中添加：

```json
"build:beijing": "cross-env ASSETS_VERSION=beijing vite build"
```

---

## 4️⃣ 修改项目配置

**文件**：`app.vue`

### 4.1 设置当前项目类型

```javascript
type: 4,  // 修改为新的 type 值
```

### 4.2 添加项目配置

在 `typeConfig` 数组中添加：

```javascript
{
  type: 4,
  name: '北京项目',
  typeName: 'beijing',
  cockpit: true,  // true=有驾驶舱，false=仅平面图
  hideSidebar: true,  // 是否隐藏侧边栏
}
```

**注意**：`type` 值必须唯一，不能与现有项目重复。

---

## 5️⃣ 添加路由配置

**文件**：`src/router/index.js`

在 `conditionalRoutes` 数组中添加：

### 有驾驶舱（cockpit: true）

```javascript
{
  path: '/beijing-cockpit',
  component: Layout,
  redirect: '/beijing-cockpit/index',
  hidden: true,
  children: [
    {
      path: 'index',
      hidden: true,
      component: () => import('@/views/index'),
      name: 'beijing-cockpit',
      meta: { title: '驾驶舱', icon: 'plan' }
    },
  ]
}
```

### 仅平面图（cockpit: false）

```javascript
{
  path: '/beijing-plan',
  component: Layout,
  redirect: '/beijing-plan/index',
  hidden: false,
  children: [
    {
      path: 'index',
      component: () => import('@/views/plan/beijing.vue'),
      name: 'beijing-plan',
      meta: { title: '平面图', icon: 'plan', menuTitle: '北京平面图' }
    },
  ]
}
```

**路由命名规范**：
- 驾驶舱：`/{typeName}-cockpit`
- 平面图：`/{typeName}-plan`

---

## 6️⃣ 添加路由映射配置（集中配置）

**文件**：`src/config/projectRoutes.js`

在 `projectRouteConfig` 数组中添加项目配置：

```javascript
{
  type: 4,
  typeName: 'beijing',
  name: '北京项目',
  routePath: '/beijing-cockpit',  // 或 '/beijing-plan'
  routeName: 'beijing-cockpit',   // 或 'beijing-plan'
  cockpit: true,
}
```

**说明**：此配置会自动应用到以下位置，无需手动修改：
- ✅ 首页重定向（`src/views/home.vue`）
- ✅ 侧边栏隐藏配置（`src/store/modules/config.js`）
- ✅ 权限路由选择（`src/store/modules/permission.js`）
- ✅ 面包屑导航（`src/components/Breadcrumb/index.vue`）
- ✅ 标签页导航（`src/layout/components/TagsView/index.vue`）

---

## 8️⃣ （可选）创建独立 Dashboard

如果项目有驾驶舱且需要独立组件：

```bash
mkdir src/views/beijing_dashboard
cp src/views/dashboard/index.vue src/views/beijing_dashboard/index.vue
```

然后在路由中使用 `@/views/beijing_dashboard/index.vue`。

---

## ✅ 配置清单

| 文件/目录 | 操作 | 必需 |
|---------|------|------|
| `src/assets/beijing/` | 创建资源目录 | ✅ |
| `src/views/plan/beijing.vue` | 创建平面图组件 | ✅ |
| `vite/plugins/conditional-assets.js` | 添加到 `allVersions` | ✅ |
| `package.json` | 添加 `build:beijing` 命令 | ✅ |
| `public/config.js` | 添加 `typeConfig` 配置 | ✅ |
| `src/router/index.js` | 添加路由配置 | ✅ |
| `src/config/projectRoutes.js` | 添加路由映射配置 | ✅ |
| `src/views/beijing_dashboard/` | 创建 dashboard（如需要） | ⚠️ |

---

## 🧪 测试

```bash
# 构建新项目
npm run build:beijing

# 验证构建结果
find dist -name "*beijing*"  # 应该找到
find dist -name "*wuhan*"    # 应该为空（排除其他版本）
```

---

## 📝 注意事项

1. **type 值唯一性**：`App.vue` 中的 `type` 值不能重复
2. **命名一致性**：`typeName` 应与资源目录名、构建命令中的环境名保持一致
3. **路由路径唯一**：路由路径和名称必须唯一，不能与其他项目重复
4. **集中配置**：路由映射统一在 `src/config/projectRoutes.js` 中配置，无需在多个文件中修改
5. **首页重定向**：所有跳转首页的操作都会跳转到 `/home`，然后自动重定向到对应项目首页