# 页面管理与站点配置占位
## 1. 创建占位页面
### 1.1 创建 Pages.vue
**文件路径**：`resources\js\admin\views\Pages.vue`
**完整代码**：
```vue
<template>
<el-card>
<h3>页面管理</h3>
<p>页面管理功能开发中...</p>
</el-card>
</template>
```
### 1.2 创建 SiteSettings.vue
**文件路径**：`resources\js\admin\views\SiteSettings.vue`
**完整代码**：
```vue
<template>
<el-card>
<h3>站点配置</h3>
<p>站点配置功能开发中...</p>
</el-card>
</template>
```
### 1.3 说明
这两个文件作为占位页面，确保点击菜单时不报错。具体功能将在后续阶段开发。
---
## 2. 修改路由配置
### 2.1 文件路径
`resources\js\admin\router\index.ts`
### 2.2 问题发现
原有的路由配置只有 `dashboard` 子路由，缺少 `pages` 和 `site`。
**原有代码**：
```typescript
children: [
{
path: '',
name: 'dashboard',
component: () => import('../views/Dashboard.vue'),
},
],
```
### 2.3 完整代码
```typescript
import { createRouter, createWebHistory } from 'vue-router';
import { useAuthStore } from '../stores/auth';
const routes = [
{
path: '/admin/login',
name: 'login',
component: () => import('../views/Login.vue'),
meta: { guest: true },
},
{
path: '/admin',
component: () => import('../layouts/MainLayout.vue'),
meta: { requiresAuth: true },
children: [
{
path: '',
name: 'dashboard',
component: () => import('../views/Dashboard.vue'),
},
{
path: 'pages',
name: 'pages',
component: () => import('../views/Pages.vue'),
},
{
path: 'site',
name: 'site-settings',
component: () => import('../views/SiteSettings.vue'),
},
],
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, from, next) => {
const authStore = useAuthStore();
const isAuthenticated = authStore.isAuthenticated;
if (to.meta.requiresAuth && !isAuthenticated) {
next('/admin/login');
} else if (to.meta.guest && isAuthenticated) {
next('/admin');
} else {
next();
}
});
export default router;
```
### 2.4 代码说明
| 代码 | 作用 |
|------|------|
| `path: 'pages'` | 匹配 `/admin/pages` 路径 |
| `component: () => import('../views/Pages.vue')` | 动态导入页面管理组件 |
| `path: 'site'` | 匹配 `/admin/site` 路径 |
| `component: () => import('../views/SiteSettings.vue')` | 动态导入站点配置组件 |
---
## 3. 编译验证
### 3.1 执行命令
```bash
npm run build
```
### 3.2 预期结果
编译成功，无报错。
---
## 4. 访问测试
### 4.1 登录后台
浏览器打开：`http://engine-api.test/admin/login`
输入账号密码登录。
### 4.2 测试页面管理
点击左侧菜单「页面管理」
**预期结果**：显示「页面管理功能开发中...」
### 4.3 测试站点配置
点击左侧菜单「站点配置」
**预期结果**：显示「站点配置功能开发中...」
---
## 5. 遇到的问题及解决
### 5.1 问题：点击菜单页面空白
| 项目 | 内容 |
|------|------|
| **现象** | 点击「页面管理」或「站点配置」菜单，右侧内容区空白 |
| **原因** | 路由配置中缺少 `pages` 和 `site` 子路由 |
| **解决方案** | 在 `router/index.ts` 的 `children` 数组中添加 `pages` 和 `site` 路由 |
### 5.2 问题：API 请求 404
| 项目 | 内容 |
|------|------|
| **现象** | 控制台报错 `GET http://engine-api.test/api/admin/pages 404` |
| **原因** | `PageController` 的 `index` 方法尚未实现 |
| **说明** | 这是后续阶段需要开发的功能，不影响当前阶段验收 |
---
## 6. 验证结果
| 验证项 | 预期结果 | 实际结果 |
|--------|---------|---------|
| 编译 | 无报错 | ✅ 通过 |
| 点击「页面管理」菜单 | 显示占位内容 | ✅ 通过 |
| 点击「站点配置」菜单 | 显示占位内容 | ✅ 通过 |
| 页面切换 | 正常切换，无报错 | ✅ 通过 |
---