# 韫珠科技内部导航页面

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

## 功能特点

- ✅ 使用 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. 配置自动登录凭据（可选）：
   如果需要使用自动登录功能，请创建 `.env` 文件并配置登录凭据：
   ```
   VIDEO_ANALYSIS_USERNAME=your_username
   VIDEO_ANALYSIS_PASSWORD=your_password
   ```
   如果不配置，将使用默认值（admin/admin123）

3. 启动开发服务器：

   **方式一：使用 Docker Compose（推荐，最简单）**
   ```bash
   # 启动服务（后台运行）
   docker-compose up -d
   
   # 查看日志
   docker-compose logs -f
   
   # 停止服务
   docker-compose down
   ```
   启动后访问：
   - 前端：http://localhost:8888
   - 后端：http://localhost:8889

   **方式二：使用批处理脚本（Windows）**
   ```bash
   start-dev.bat
   ```

   **方式三：使用 npm 命令**
   - 仅启动前端：`npm run dev`
   - 同时启动前端和后端：`npm run dev:all`
   - 仅启动后端：`npm run server`

4. 构建生产版本：
```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 部署

#### 开发环境部署（使用 Docker Compose）

项目已包含 `Dockerfile` 和 `docker-compose.yml` 文件，可以直接使用：

```bash
# 启动开发环境（包含前端和后端）
docker-compose up -d

# 查看日志
docker-compose logs -f

# 停止服务
docker-compose down

# 重新构建镜像
docker-compose build
```

**端口映射：**
- 前端：8888
- 后端：8889

**特点：**
- 自动安装依赖
- 支持热重载（代码修改后自动刷新）
- 同时运行前端和后端服务

#### 生产环境部署

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**（电视风格）：适合大屏显示，顶部标签栏切换分组，下方网格展示应用模块

## 自动登录功能

项目支持为特定链接配置自动登录功能。当用户点击配置了自动登录的链接时，系统会自动通过后端服务器完成登录流程，然后跳转到目标站点。

### 配置自动登录

系统支持为多个网站配置不同的自动登录方法。每个网站都有独立的配置。

#### 1. 在 navigation.json 中配置链接

为需要自动登录的链接添加 `autoLogin` 和 `autoLoginEndpoint` 字段：

```json
{
  "name": "视频行为分析平台",
  "url": "222.243.138.146:9001",
  "sort": 6,
  "icon": "",
  "background": "",
  "description": "人脸识别、安全帽识别、抽烟识别、烟火检测",
  "autoLogin": true,
  "autoLoginEndpoint": "/api/auto-login/video-analysis"
}
```

其中 `autoLoginEndpoint` 的格式为 `/api/auto-login/:siteId`，`siteId` 需要在 `auto-login-config.json` 中配置。

#### 2. 在 auto-login-config.json 中配置网站登录信息

编辑 `auto-login-config.json` 文件，为每个网站添加配置：

```json
{
  "video-analysis": {
    "name": "视频行为分析平台",
    "targetHost": "222.243.138.146:9001",
    "targetDomain": "222.243.138.146",
    "targetBaseUrl": "http://222.243.138.146:9001",
    "loginMethod": "rsa-encrypted-form",
    "loginUrl": "/login",
    "loginMethodConfig": {
      "encryption": "rsa",
      "publicKey": "-----BEGIN PUBLIC KEY-----\n...\n-----END PUBLIC KEY-----",
      "usernameField": "username_s",
      "passwordField": "password_s",
      "captchaField": "captcha",
      "captchaRequired": false,
      "contentType": "application/x-www-form-urlencoded",
      "successCode": 1000,
      "successField": "code"
    },
    "credentials": {
      "username": "admin",
      "password": "admin123",
      "envUsername": "VIDEO_ANALYSIS_USERNAME",
      "envPassword": "VIDEO_ANALYSIS_PASSWORD"
    }
  },
  "another-site": {
    "name": "另一个网站",
    "targetHost": "example.com:8080",
    "targetDomain": "example.com",
    "targetBaseUrl": "http://example.com:8080",
    "loginMethod": "plain-form",
    "loginUrl": "/api/login",
    "loginMethodConfig": {
      "usernameField": "username",
      "passwordField": "password",
      "contentType": "application/json",
      "successCode": 200,
      "successField": "status"
    },
    "credentials": {
      "username": "user",
      "password": "pass",
      "envUsername": "ANOTHER_SITE_USERNAME",
      "envPassword": "ANOTHER_SITE_PASSWORD"
    }
  }
}
```

#### 支持的登录方法

目前支持以下登录方法：

1. **rsa-encrypted-form**：RSA 加密的表单登录
   - 需要配置 `publicKey`（RSA 公钥）
   - 用户名和密码会被 RSA 加密后发送

2. **plain-form**：普通表单登录（未加密）
   - 直接发送用户名和密码

#### 3. 配置登录凭据

有两种方式配置登录凭据：

**方式一：在配置文件中直接配置**（不推荐，安全性较低）
```json
"credentials": {
  "username": "admin",
  "password": "admin123"
}
```

**方式二：使用环境变量**（推荐）
```json
"credentials": {
  "username": "admin",
  "password": "admin123",
  "envUsername": "VIDEO_ANALYSIS_USERNAME",
  "envPassword": "VIDEO_ANALYSIS_PASSWORD"
}
```

然后在 `.env` 文件中设置：
```
VIDEO_ANALYSIS_USERNAME=your_username
VIDEO_ANALYSIS_PASSWORD=your_password
```

环境变量的优先级高于配置文件中的默认值。

#### 4. 启动后端服务器

```bash
npm run server
```

后端服务器默认运行在 `http://localhost:8889`（可通过环境变量 `PORT` 修改端口）

**注意**：如果使用端口映射，请确保防火墙已正确配置：
- 前端端口：8888
- 后端端口：8889

#### 5. 工作原理

1. 用户点击自动登录链接时，前端会跳转到后端端点 `/api/auto-login/:siteId`
2. 后端根据 `siteId` 从 `auto-login-config.json` 加载对应的配置
3. 后端根据配置的登录方法执行登录流程：
   - 如果是 RSA 加密，先加密用户名和密码
   - 发送登录请求到目标站点
   - 获取登录成功后的 Cookie/SessionID
4. 后端返回一个 HTML 页面，该页面会尝试设置 Cookie 并跳转到目标站点

**注意**：
- 由于浏览器的跨域 Cookie 限制，自动登录功能可能无法在所有情况下正常工作
- 如果遇到问题，可能需要调整目标站点的 CORS 配置或使用其他认证方案
- 每个网站可以有不同的登录方法、字段名、成功标识等，完全通过配置文件控制