# 「好站站」企业建站引擎 - 整体规划文档
## 一、项目概述
| 项目 | 说明 |
|------|------|
| 项目名称 | 好站站企业建站引擎 |
| 品牌归属 | 南京可道有思科技有限公司 |
| 第一阶段目标 | 独立版本，支持可视化拖拽DIY，一键生成纯静态企业官网 |
| 部署方式 | 客户下载源码 → 上传服务器 → 一键安装 → 后台管理 → 发布 |
---
## 二、技术架构
```
┌─────────────────────────────────────────────────────────────┐
│ 好站站引擎 │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 后台管理 │ │ 前台展示 │ │ 一键安装 │ │
│ │ engine-admin│ │ engine-web │ │ 向导 │ │
│ │ (Vue 3) │ │ (静态HTML) │ │ (PHP) │ │
│ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ │
│ │ │ │ │
│ └──────────────────┼──────────────────┘ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ Laravel 12 │ │
│ │ API + 后端 │ │
│ └────────┬────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ MySQL │ │
│ │ sites/pages/ │ │
│ │ components │ │
│ └─────────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
### 技术栈详情
| 模块 | 技术 | 版本 |
|------|------|------|
| 后端框架 | Laravel | 12.x |
| 开发语言 | PHP | 8.3+ |
| 数据库 | MySQL | 8.0+ |
| 前端框架 | Vue 3 | 3.x |
| UI 组件库 | Element Plus | 最新 |
| 拖拽库 | vue-draggable-next | 最新 |
| 状态管理 | Pinia | 最新 |
| 路由 | Vue Router | 4.x |
| HTTP 客户端 | Axios | 最新 |
| 静态生成 | Laravel + Blade | - |
| Web 服务器 | Nginx / Apache | - |
---
## 三、数据库设计
### 3.1 数据表结构
#### `sites` 表（站点配置）
| 字段 | 类型 | 说明 |
|------|------|------|
| id | bigint | 主键 |
| site_name | varchar(255) | 网站名称 |
| site_logo | varchar(500) | LOGO 路径 |
| site_keywords | varchar(500) | SEO 关键词 |
| site_description | text | SEO 描述 |
| created_at | timestamp | 创建时间 |
| updated_at | timestamp | 更新时间 |
#### `pages` 表（页面管理）
| 字段 | 类型 | 说明 |
|------|------|------|
| id | bigint | 主键 |
| site_id | bigint | 关联站点 |
| title | varchar(255) | 页面标题 |
| slug | varchar(255) | 访问别名（如 index、about） |
| is_home | tinyint(1) | 是否为首页（1是0否） |
| status | tinyint(1) | 发布状态（0草稿 1已发布） |
| created_at | timestamp | 创建时间 |
| updated_at | timestamp | 更新时间 |
#### `page_components` 表（页面组件）
| 字段 | 类型 | 说明 |
|------|------|------|
| id | bigint | 主键 |
| page_id | bigint | 关联页面 |
| component_type | varchar(50) | 组件类型（banner / text / image / multi_col 等） |
| content | json | 组件的具体内容（标题、图片URL、按钮文字等） |
| settings | json | 样式设置（背景色、内边距、对齐方式等） |
| sort_order | int | 排序（拖拽排序的依据） |
| created_at | timestamp | 创建时间 |
| updated_at | timestamp | 更新时间 |
---
## 四、目录结构
```
engine-api/ # Laravel 后端项目
├── app/
│ ├── Http/
│ │ ├── Controllers/
│ │ │ ├── Admin/ # 后台控制器
│ │ │ │ ├── PageController.php
│ │ │ │ ├── ComponentController.php
│ │ │ │ └── SiteController.php
│ │ │ └── InstallController.php # 安装向导
│ │ └── Middleware/
│ ├── Models/
│ │ ├── Site.php
│ │ ├── Page.php
│ │ └── PageComponent.php
│ └── ...
├── database/
│ └── migrations/ # 数据表迁移文件
├── resources/
│ ├── js/
│ │ ├── admin/ # 后台管理 SPA
│ │ │ ├── router/ # 路由配置
│ │ │ ├── stores/ # Pinia 状态管理
│ │ │ ├── views/ # 页面组件
│ │ │ │ ├── Login.vue
│ │ │ │ ├── Dashboard.vue
│ │ │ │ ├── PageList.vue
│ │ │ │ ├── PageEditor.vue # 拖拽编辑核心
│ │ │ │ └── SiteSettings.vue
│ │ │ ├── components/ # 公共组件
│ │ │ │ ├── ComponentLibrary.vue # 左侧组件库
│ │ │ │ ├── ComponentCanvas.vue # 中间画布
│ │ │ │ └── PropertyPanel.vue # 右侧属性面板
│ │ │ ├── layouts/ # 布局组件
│ │ │ ├── api/ # API 请求封装
│ │ │ └── Admin.vue # 后台主入口
│ │ └── web/ # 前台（初期忽略）
│ └── views/ # Blade 模板（静态生成用）
├── public/
│ ├── index.php # 入口文件
│ └── install.php # 一键安装向导入口
└── ...
```
---
## 五、开发阶段规划
| 阶段 | 任务 | 状态 |
|------|------|------|
| **阶段0** | 环境搭建 + Git 仓库 | ✅ 已完成 |
| **阶段1** | 数据库迁移文件 | 🔜 进行中 |
| **阶段2** | 后台认证（Laravel Breeze + JWT） | 🔜 |
| **阶段3** | 一键安装向导 | 🔜 |
| **阶段4** | 后台 Vue 3 框架搭建（Element Plus + Router + Pinia） | 🔜 |
| **阶段5** | 页面管理功能（增删改查） | 🔜 |
| **阶段6** | 可视化拖拽 API（组件 CRUD + 排序） | 🔜 |
| **阶段7** | 拖拽编辑器前端（三栏布局 + 实时预览） | 🔜 |
| **阶段8** | 静态页面生成器 | 🔜 |
| **阶段9** | 前台访问验证 | 🔜 |
| **阶段10** | 一键安装向导完善 | 🔜 |
---
## 六、开发顺序建议
1. **数据库迁移** → 创建 `sites`、`pages`、`page_components` 表
2. **后台认证** → 管理员登录、中间件
3. **页面管理** → 页面的增删改查 API + 前端界面
4. **拖拽 API** → 组件的增删改查、排序接口
5. **拖拽编辑器** → Vue 3 + vue-draggable-next + Element Plus
6. **静态生成** → 将组件 JSON 渲染成 .html 文件
7. **一键安装** → 首次访问检测、安装界面、写入 .env、运行迁移
---
## 七、Element Plus 安装步骤
```bash
cd D:\laragon\www\engine-api
# 1. 安装核心库
npm install element-plus --save
# 2. 安装自动导入插件
npm install -D unplugin-vue-components unplugin-auto-import
# 3. 安装图标库
npm install @element-plus/icons-vue
# 4. 安装 Vue 生态
npm install vue-router@4 pinia axios
```
### 配置 `vite.config.js`
```javascript
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
});
```
---
## 八、开发原则
| 原则 | 说明 |
|------|------|
| **MVP 优先** | 先做最小可用版本，功能逐步迭代 |
| **前后端分离** | 后台 Vue 3 SPA 通过 API 与后端通信 |
| **组件化** | 拖拽组件统一数据结构（type + content + settings） |
| **静态生成** | 发布时生成纯 .html，提升访问速度 |
| **一键安装** | 降低客户使用门槛，傻瓜式安装 |
---