simple_navigation_page

韫珠科技内部导航页面

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

功能特点

• ✅ 使用 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. 安装依赖：

   npm install
   

   1. 配置自动登录凭据（可选）： 如果需要使用自动登录功能，请创建 .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）

   start-dev.bat

方式三：使用 npm 命令

• 仅启动前端：npm run dev
• 同时启动前端和后端：npm run dev:all
• 仅启动后端：npm run server

1. 构建生产版本：

   npm run build
   

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

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

部署说明

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

1. Vercel 部署

1. 安装 Vercel CLI：

   npm i -g vercel
   

   1. 在项目根目录执行： bash vercel

2. 按照提示完成部署，或访问 vercel.com 通过网页界面部署。

2. Netlify 部署

1. 安装 Netlify CLI：

   npm i -g netlify-cli
   

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

2. 或访问 netlify.com 通过网页界面拖拽 dist 文件夹部署。

3. GitHub Pages 部署

1. 在 vite.config.js 中添加 base 配置：

   export default defineConfig({
   base: '/your-repo-name/',  // 替换为你的仓库名
   plugins: [vue()],
   // ...
   })
   

   1. 构建项目： bash npm run build

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

4. 其他静态托管服务

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

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

使用 Nginx

1. 构建项目：

   npm run build
   

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

2. Nginx 配置示例（/etc/nginx/sites-available/default）：

   server {
   listen 80;
   server_name your-domain.com;
   root /usr/share/nginx/html;
   index index.html;
   
   location / {
       try_files $uri $uri/ /index.html;
   }
   }
   

   1. 重启 Nginx： bash sudo systemctl restart nginx

使用 Apache

1. 构建项目：

   npm run build
   

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

2. 在网站根目录创建 .htaccess 文件：

   <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

3. 构建并启动服务器：

   npm run build
   serve -s dist -l 3000
   

   方式三：Docker 部署

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

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

   # 启动开发环境（包含前端和后端）
   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;
    }
}

1. 构建并运行 Docker 容器：

   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 字段即可切换不同的页面样式：

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

样式说明：

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

自动登录功能

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

配置自动登录

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

1. 在 navigation.json 中配置链接

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

{
  "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 文件，为每个网站添加配置：

{
  "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. 配置登录凭据

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

方式一：在配置文件中直接配置（不推荐，安全性较低）

"credentials": {
  "username": "admin",
  "password": "admin123"
}

方式二：使用环境变量（推荐）

"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. 启动后端服务器

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 配置或使用其他认证方案
• 每个网站可以有不同的登录方法、字段名、成功标识等，完全通过配置文件控制