simple_navigation_page

liuq 5efec2afc3 后端启动		преди 4 месеца
src	5efec2afc3 后端启动	преди 4 месеца
.gitignore	5e512d5334 first update	преди 4 месеца
README.md	5efec2afc3 后端启动	преди 4 месеца
auto-login-config.json	38f3b2adb5 测试视频平台自动登录	преди 4 месеца
index.html	5e512d5334 first update	преди 4 месеца
package-lock.json	5e512d5334 first update	преди 4 месеца
package.json	5efec2afc3 后端启动	преди 4 месеца
server.js	5efec2afc3 后端启动	преди 4 месеца
start-backend.bat	5efec2afc3 后端启动	преди 4 месеца
start-dev.bat	5efec2afc3 后端启动	преди 4 месеца
vite.config.js	5efec2afc3 后端启动	преди 4 месеца

韫珠科技内部导航页面

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

功能特点

✅ 使用 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 配置

安装和运行

安装依赖：
```
npm install
```
1. 配置自动登录凭据（可选）：如果需要使用自动登录功能，请创建 .env 文件并配置登录凭据： ```

VIDEO_ANALYSIS_USERNAME=your_username VIDEO_ANALYSIS_PASSWORD=your_password

   如果不配置，将使用默认值（admin/admin123）

3. 启动开发服务器：
   - 仅启动前端：`npm run dev`
   - 同时启动前端和后端：`npm run dev:all`
   - 仅启动后端：`npm run server`

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

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

预览生产版本（本地测试）：
```
npm run preview
```
部署说明

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

1. Vercel 部署
1. 安装 Vercel CLI： bash npm i -g vercel
在项目根目录执行：
```
vercel
```
1. 按照提示完成部署，或访问 vercel.com 通过网页界面部署。
2. Netlify 部署
1. 安装 Netlify CLI： bash npm i -g netlify-cli
在项目根目录执行：
```
netlify deploy --prod
```
1. 或访问 netlify.com 通过网页界面拖拽 dist 文件夹部署。
3. GitHub Pages 部署
1. 在 vite.config.js 中添加 base 配置： javascript export default defineConfig({ base: '/your-repo-name/', // 替换为你的仓库名 plugins: [vue()], // ... })
构建项目：
```
npm run build
```
1. 使用 GitHub Actions 自动部署，或手动将 dist 目录内容推送到 gh-pages 分支。
4. 其他静态托管服务
- Cloudflare Pages：连接 GitHub 仓库自动部署
- 阿里云 OSS：上传 dist 目录内容到 OSS 并开启静态网站托管
- 腾讯云 COS：上传 dist 目录内容到 COS 并开启静态网站托管
方式二：传统 Web 服务器部署

使用 Nginx
1. 构建项目： bash npm run build
将 dist 目录内容复制到 Nginx 网站根目录（如 /usr/share/nginx/html）：
```
cp -r dist/* /usr/share/nginx/html/
```
1. 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;
```
} } ```
重启 Nginx：
```
sudo systemctl restart nginx
```
使用 Apache
1. 构建项目： bash npm run build
将 dist 目录内容复制到 Apache 网站根目录（如 /var/www/html）：
```
cp -r dist/* /var/www/html/
```
1. 在网站根目录创建 .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 简单服务器（开发/测试用）

安装 serve：
```
npm i -g serve
```
1. 构建并启动服务器： bash npm run build serve -s dist -l 3000

方式三：Docker 部署

在项目根目录创建 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;
    }
}

构建并运行 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"
    }
  }
}

支持的登录方法

目前支持以下登录方法：

rsa-encrypted-form：RSA 加密的表单登录
- 需要配置 publicKey（RSA 公钥）
- 用户名和密码会被 RSA 加密后发送
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. 工作原理

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

注意：

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

README.md

韫珠科技内部导航页面

功能特点

项目结构

安装和运行

部署说明

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

1. Vercel 部署

2. Netlify 部署

3. GitHub Pages 部署

4. 其他静态托管服务

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

使用 Nginx

使用 Apache

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

方式三：Docker 部署

构建阶段

运行阶段

部署注意事项

JSON 配置说明

全局配置

分组字段

链接字段

设计特点

修改配置

切换样式主题