# 企业门户网站模板

这是一个基于 Vue3 + TypeScript + Tailwind CSS 构建的现代企业门户网站模板。

## 特性

- 🎨 **现代设计** - 使用 Tailwind CSS 构建的响应式设计
- ⚡ **高性能** - Vue3 + Vite 构建，快速加载
- 🔧 **易于配置** - 通过 JSON 配置文件即可自定义所有内容
- 📱 **移动友好** - 完全响应式设计，适配所有设备
- 🎯 **SEO 优化** - 内置 SEO 优化功能
- 🌈 **组件化** - 使用 Reka-UI 组件库

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 配置网站内容

复制配置模板文件：
```bash
cp config.template.json public/config.json
```

编辑 `public/config.json` 文件，修改为您的公司信息。

### 3. 启动开发服务器

```bash
npm run dev
```

### 4. 构建生产版本

```bash
npm run build
```

## 配置说明

网站的所有内容都通过 `public/config.json` 文件进行配置。配置文件包含以下部分：

### 基础信息 (site)
- `title`: 网站标题，显示在浏览器标签页
- `description`: 网站描述，用于 SEO
- `keywords`: 关键词，用于 SEO
- `logo`: 品牌标识信息

### 导航菜单 (navigation)
配置网站的主导航菜单项。

### 首页内容 (home)
- `hero`: 首页头部区域
- `features`: 特色功能展示
- `stats`: 统计数据展示
- `cta`: 行动号召区域

### 服务页面 (services)
配置服务页面的所有内容。

### 关于页面 (about)
配置关于我们页面的内容。

### 联系页面 (contact)
配置联系信息和表单。

### 页脚 (footer)
配置页脚的链接和信息。

### 主题 (theme)
配置网站的颜色主题。

## 可用图标

模板内置了以下图标，可在配置中使用：
- `lightning` - 闪电（速度、性能）
- `shield` - 盾牌（安全、保护）
- `globe` - 地球（全球、网络）
- `package` - 包裹（软件包、服务）
- `container` - 容器（Docker、容器化）
- `code` - 代码（开发、编程）
- `server` - 服务器（基础设施）
- `database` - 数据库（数据存储）
- `settings` - 设置（配置、定制）

## 可用颜色

支持以下颜色主题：
- `blue` - 蓝色
- `green` - 绿色
- `purple` - 紫色
- `red` - 红色
- `yellow` - 黄色

## 文件结构

```
echo-portal/
├── public/
│   ├── config.json          # 网站配置文件
│   ├── favicon.svg          # 网站图标
│   └── index.html
├── src/
│   ├── components/          # Vue 组件
│   │   ├── AppHeader.vue    # 顶部导航
│   │   └── AppFooter.vue    # 底部
│   ├── views/               # 页面组件
│   │   ├── Home.vue         # 首页
│   │   ├── Services.vue     # 服务页
│   │   ├── About.vue        # 关于页
│   │   └── Contact.vue      # 联系页
│   ├── composables/         # Vue 组合式函数
│   │   └── useConfig.ts     # 配置管理
│   ├── router/              # 路由配置
│   └── assets/              # 静态资源
└── config.template.json     # 配置文件模板
```

## 自定义指南

### 添加新页面

1. 在 `src/views/` 目录下创建新的 Vue 组件
2. 在 `src/router/index.ts` 中添加路由
3. 在配置文件中添加导航菜单项
4. 在配置文件中添加页面相关配置

### 修改样式

模板使用 Tailwind CSS，您可以：
1. 修改 `src/assets/main.css` 中的样式
2. 在组件中使用 Tailwind CSS 类名
3. 在配置文件中修改主题颜色

### 添加新功能

1. 创建新的 Vue 组件
2. 在配置文件中添加相关配置项
3. 在 `useConfig.ts` 中添加配置读取逻辑

## 部署

构建完成后，将 `dist` 目录的内容部署到您的服务器即可。

确保服务器支持 SPA 路由，可能需要配置服务器重定向规则。

## 许可证

MIT License

## 技术支持

如有问题，请查看配置模板文件中的说明，或联系技术支持。