# 韫珠科技内部导航页面

一个简洁明了的内部导航系统，专为老年人友好设计。

## 功能特点

- ✅ 使用 JSON 配置文件，易于维护
- ✅ 分组管理，支持排序
- ✅ 每个链接支持图标、背景图、简介
- ✅ **多种样式主题，可随时切换**（modern、card、list、minimal、tv）
- ✅ 大字体、高对比度设计，适合老年人使用
- ✅ 响应式布局，支持各种屏幕尺寸
- ✅ 使用 Vue 3 最新框架

## 项目结构

```
simple_navigation/
├── src/
│   ├── components/
│   │   └── Navigation.vue    # 导航组件
│   ├── data/
│   │   └── navigation.json   # 导航配置数据
│   ├── App.vue               # 主应用组件
│   ├── main.js               # 入口文件
│   └── style.css             # 全局样式
├── index.html                # HTML 入口
├── package.json              # 项目配置
└── vite.config.js           # Vite 配置
```

## 安装和运行

1. 安装依赖：
```bash
npm install
```

2. 启动开发服务器：
```bash
npm run dev
```

3. 构建生产版本：
```bash
npm run build
```

构建完成后，生产文件将输出到 `dist` 目录。

4. 预览生产版本（本地测试）：
```bash
npm run preview
```

## 部署说明

### 方式一：静态网站托管服务（推荐）

#### 1. Vercel 部署

1. 安装 Vercel CLI：
```bash
npm i -g vercel
```

2. 在项目根目录执行：
```bash
vercel
```

3. 按照提示完成部署，或访问 [vercel.com](https://vercel.com) 通过网页界面部署。

#### 2. Netlify 部署

1. 安装 Netlify CLI：
```bash
npm i -g netlify-cli
```

2. 在项目根目录执行：
```bash
netlify deploy --prod
```

3. 或访问 [netlify.com](https://netlify.com) 通过网页界面拖拽 `dist` 文件夹部署。

#### 3. GitHub Pages 部署

1. 在 `vite.config.js` 中添加 base 配置：
```javascript
export default defineConfig({
  base: '/your-repo-name/',  // 替换为你的仓库名
  plugins: [vue()],
  // ...
})
```

2. 构建项目：
```bash
npm run build
```

3. 使用 GitHub Actions 自动部署，或手动将 `dist` 目录内容推送到 `gh-pages` 分支。

#### 4. 其他静态托管服务

- **Cloudflare Pages**：连接 GitHub 仓库自动部署
- **阿里云 OSS**：上传 `dist` 目录内容到 OSS 并开启静态网站托管
- **腾讯云 COS**：上传 `dist` 目录内容到 COS 并开启静态网站托管

### 方式二：传统 Web 服务器部署

#### 使用 Nginx

1. 构建项目：
```bash
npm run build
```

2. 将 `dist` 目录内容复制到 Nginx 网站根目录（如 `/usr/share/nginx/html`）：
```bash
cp -r dist/* /usr/share/nginx/html/
```

3. Nginx 配置示例（`/etc/nginx/sites-available/default`）：
```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

4. 重启 Nginx：
```bash
sudo systemctl restart nginx
```

#### 使用 Apache

1. 构建项目：
```bash
npm run build
```

2. 将 `dist` 目录内容复制到 Apache 网站根目录（如 `/var/www/html`）：
```bash
cp -r dist/* /var/www/html/
```

3. 在网站根目录创建 `.htaccess` 文件：
```apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
```

#### 使用 Node.js 简单服务器（开发/测试用）

1. 安装 `serve`：
```bash
npm i -g serve
```

2. 构建并启动服务器：
```bash
npm run build
serve -s dist -l 3000
```

### 方式三：Docker 部署

1. 在项目根目录创建 `Dockerfile`：
```dockerfile
# 构建阶段
FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 运行阶段
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

2. 创建 `nginx.conf`：
```nginx
server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

3. 构建并运行 Docker 容器：
```bash
docker build -t navigation-app .
docker run -d -p 80:80 navigation-app
```

### 部署注意事项

1. **路由配置**：如果使用客户端路由，确保服务器配置了回退到 `index.html` 的规则（见上述 Nginx/Apache 配置）。

2. **环境变量**：如果项目需要环境变量，在构建前设置好，或使用各平台的环境变量配置功能。

3. **HTTPS**：生产环境建议启用 HTTPS，大多数托管服务都提供免费 SSL 证书。

4. **CDN 加速**：对于静态资源，建议使用 CDN 加速访问。

5. **缓存策略**：配置适当的缓存策略，提升用户体验。

## JSON 配置说明

### 全局配置
- `style`: 页面样式主题（可选，默认：`modern`）
  - `modern`: 现代风格 - 渐变背景、大卡片、丰富动画效果
  - `card`: 卡片风格 - 简洁卡片布局、紧凑设计
  - `list`: 列表风格 - 横向列表布局、清晰简洁
  - `minimal`: 极简风格 - 最小化设计、专注内容
  - `tv`: 电视风格 - 顶部标签栏切换分组，下方网格显示应用模块（类似智能电视界面）

### 分组字段
- `name`: 组名（必填）
- `sort`: 排序值，数字越小越靠前（可选）
- `icon`: 图标地址（可选）
- `description`: 简介（可选）
- `links`: 链接数组（必填）

### 链接字段
- `name`: 链接名称（必填）
- `url`: 链接地址（必填）
- `sort`: 排序值，数字越小越靠前（可选）
- `icon`: 图标地址（可选）
- `background`: 背景图地址（可选，仅在 modern 样式下生效）
- `description`: 简介（可选）

## 设计特点

- **大字体**：标题 36-48px，链接名称 24-26px
- **高对比度**：白色卡片配深色文字，清晰易读
- **大按钮区域**：链接卡片最小高度 180-200px，易于点击
- **简洁布局**：清晰的间距和分组，避免信息过载
- **渐变背景**：美观的紫色渐变背景

## 修改配置

编辑 `src/data/navigation.json` 文件即可修改导航内容，无需修改代码。

### 切换样式主题

在 `navigation.json` 文件的顶部修改 `style` 字段即可切换不同的页面样式：

```json
{
  "style": "modern",  // 可选值: "modern", "card", "list", "minimal", "tv"
  "groups": [...]
}
```

**样式说明：**
- **modern**（现代风格）：适合需要丰富视觉效果和动画的场景
- **card**（卡片风格）：适合需要清晰分类和详细信息的场景
- **list**（列表风格）：适合需要快速浏览和简洁展示的场景
- **minimal**（极简风格）：适合需要最小化干扰、专注内容的场景
- **tv**（电视风格）：适合大屏显示，顶部标签栏切换分组，下方网格展示应用模块