# 内部导航

**Repository Path**: wangwuli/internal-navigation

## Basic Information

- **Project Name**: 内部导航
- **Description**: 项目做得太多，公司内部协同地址反复寻找，总在相互询问？都记录下来吧，让那些一天问三次地址的同事记录好导航地址，别在迷路。
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-21
- **Last Updated**: 2025-12-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 导航页面应用

一个美观、现代化的导航页面应用，支持多客户端同步、管理员密码保护、自定义主题和背景动画。

## 📸 界面展示

### 浏览模式
![只读页面](展示/只读页面.png)

### 管理模式
![管理页面](展示/管理页面.png)

## ✨ 功能特点

- 🐳 **Docker 一键部署** - 支持容器化部署，开箱即用
- 🔐 **密码保护** - 管理模式需要密码验证，保护数据安全
- 🎨 **主题自定义** - 支持自定义颜色、透明度、背景文字等
- 🌌 **背景动画** - 炫酷的粒子动画背景效果
- 💾 **数据持久化** - 服务端存储，数据安全可靠
- 🔄 **多端同步** - 所有客户端数据实时同步
- 🔍 **智能搜索** - 支持标题、描述、关键词多维度搜索
- 📤 **导入导出** - 支持数据备份和迁移
- 🖼️ **图标上传** - 支持 emoji 或自定义图片图标
- 🌐 **自动适配** - API 地址自动适配部署环境

---

## 🚀 快速开始

### Docker 部署（推荐）

#### 方式一：纯 Docker 命令（无需 docker-compose）

```bash
# 1. 构建镜像
docker build -t navigation-app .

# 2. 创建数据目录（如果不存在）
mkdir -p data/icons

# 3. 启动容器
docker run -d \
  --name navigation-app \
  -p 3000:3000 \
  -v $(pwd)/data:/app/data \
  -e ADMIN_PASSWORD=your_password \
  -e BG_TEXT_CONTENT=SUMZ \
  --restart unless-stopped \
  navigation-app

# 4. 查看日志
docker logs -f navigation-app

# 5. 访问应用
# 打开浏览器访问：http://localhost:3000
```

**Windows 用户使用 PowerShell：**
```powershell
# 启动容器（Windows 路径格式）
docker run -d `
  --name navigation-app `
  -p 3000:3000 `
  -v ${PWD}/data:/app/data `
  -e ADMIN_PASSWORD=your_password `
  -e BG_TEXT_CONTENT=SUMZ `
  --restart unless-stopped `
  navigation-app
```

#### 方式二：Docker Compose 命令

```bash
# 1. 复制环境变量配置文件
cp .env.example .env

# 2. 编辑 .env 文件，设置你的配置
# 必须修改：ADMIN_PASSWORD（管理员密码）
# 可选修改：BG_TEXT_CONTENT（背景文字）、BG_TEXT_COLOR（背景颜色）等

# 3. 启动容器（后台运行）
docker-compose up -d

# 4. 查看日志
docker-compose logs -f

# 5. 访问应用
# 打开浏览器访问：http://localhost:3000
```

---

### Docker 常用命令

#### 纯 Docker 命令

```bash
# 启动容器（如果已停止）
docker start navigation-app

# 停止容器
docker stop navigation-app

# 重启容器
docker restart navigation-app

# 查看日志（实时）
docker logs -f navigation-app

# 查看日志（最近 100 行）
docker logs --tail=100 navigation-app

# 查看容器状态
docker ps -a | grep navigation-app

# 进入容器
docker exec -it navigation-app sh

# 查看容器环境变量
docker exec navigation-app env

# 删除容器（会保留数据）
docker rm -f navigation-app

# 删除镜像
docker rmi navigation-app

# 重新构建并启动
docker build -t navigation-app .
docker rm -f navigation-app
docker run -d \
  --name navigation-app \
  -p 3000:3000 \
  -v $(pwd)/data:/app/data \
  -e ADMIN_PASSWORD=your_password \
  --restart unless-stopped \
  navigation-app
```

#### Docker Compose 命令

```bash
# 启动服务（后台运行）
docker-compose up -d

# 启动服务（前台运行，查看日志）
docker-compose up

# 停止服务
docker-compose down

# 重启服务
docker-compose restart

# 查看日志（实时）
docker-compose logs -f

# 查看日志（最近 100 行）
docker-compose logs --tail=100

# 查看服务状态
docker-compose ps

# 重新构建镜像
docker-compose build

# 重新构建并启动
docker-compose up -d --build

# 进入容器
docker-compose exec nav-app sh

# 查看容器环境变量
docker-compose exec nav-app env
```

#### 环境变量说明

| 变量名 | 说明 | 默认值 | 必填 |
|--------|------|--------|------|
| `ADMIN_PASSWORD` | 管理员密码 | `admin123` | ✅ 强烈建议修改 |
| `BG_TEXT_CONTENT` | 背景文字内容 | `SUMZ` | ❌ |
| `BG_TEXT_COLOR` | 背景文字颜色（RGB） | `118, 75, 162` | ❌ |
| `BG_TEXT_OPACITY` | 背景文字透明度 | `0.4` | ❌ |

**Docker Compose 用户：** 编辑 `.env` 文件配置环境变量  
**纯 Docker 用户：** 在 `docker run` 命令中使用 `-e` 参数设置

**详细部署文档：** [DOCKER_DEPLOY.md](DOCKER_DEPLOY.md)

---

### 传统部署

如果不使用 Docker，可以直接运行 Node.js 应用。

#### 1. 安装依赖

```bash
npm install
```

#### 2. 启动服务器

```bash
# 生产模式
npm start

# 开发模式（自动重启）
npm run dev
```

#### 3. 访问应用

打开浏览器访问：`http://localhost:3000`

---

## 📖 使用说明

### 浏览模式

- 访问 `http://localhost:3000` 进入浏览模式
- 点击卡片可以打开对应的网站
- 使用搜索框快速查找网站
- 点击左侧菜单切换分组

### 管理模式

1. 点击右上角的"管理模式"按钮
2. 输入管理员密码登录（默认：`admin123`）
3. 登录后可以：
   - 添加/编辑/删除分组
   - 添加/编辑/删除网站卡片
   - 上传自定义图标
   - 导入/导出数据
   - 禁用/启用卡片

### 修改管理员密码

**Docker 部署：**
1. 编辑 `.env` 文件中的 `ADMIN_PASSWORD`
2. 重启容器：`docker-compose restart`

**传统部署：**
1. 编辑 `data/config.json` 文件
2. 修改 `adminPassword` 字段
3. 保存文件即可生效

---

## 🎨 主题配置

### 背景文字配置（Docker）

在 `.env` 文件中配置：

```env
# 背景文字内容
BG_TEXT_CONTENT=Hello World

# 背景文字颜色（RGB 格式）
# 紫色: 118, 75, 162
# 蓝色: 74, 144, 255
# 粉色: 255, 107, 157
# 绿色: 76, 175, 80
BG_TEXT_COLOR=118, 75, 162

# 背景文字透明度（0-1）
BG_TEXT_OPACITY=0.4
```

### 主题样式配置

编辑 `theme-config.css` 文件可以自定义：

- 透明度和毛玻璃效果
- 主题颜色（紫色、蓝色、绿色、红色等）
- 字体大小和样式
- 卡片样式和布局
- 背景文字动画效果

**详细配置说明：** [配置说明.md](配置说明.md)

### 背景动画配置

编辑 `background-animation.js` 文件可以调整：

- 粒子数量和大小
- 移动速度
- 连线距离
- 颜色和透明度

---

## 🌐 多客户端使用

### 局域网访问

1. 确保服务器正在运行
2. 查看服务器 IP 地址（如：`192.168.1.100`）
3. 其他设备通过 IP 访问：`http://192.168.1.100:3000`
4. 所有客户端的数据会自动同步

### 公网访问

使用反向代理（Nginx/Caddy）配置域名和 HTTPS：

**Nginx 示例：**
```nginx
server {
    listen 80;
    server_name nav.example.com;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

**Caddy 示例：**
```caddy
nav.example.com {
    reverse_proxy localhost:3000
}
```

---

## 💾 数据管理

### 数据存储位置

| 数据类型 | 文件路径 | 说明 |
|---------|---------|------|
| 导航数据 | `data/navData.json` | 分组和网站信息 |
| 配置文件 | `data/config.json` | 管理员密码等配置 |
| 图标文件 | `data/icons/` | 上传的图标图片 |

### 数据备份

**Docker 部署：**
```bash
# 备份整个 data 目录
tar -czf nav-backup-$(date +%Y%m%d).tar.gz data/

# 恢复备份
docker-compose down
tar -xzf nav-backup-20241205.tar.gz
docker-compose up -d
```

**传统部署：**
```bash
# 直接复制 data 目录
cp -r data data-backup-$(date +%Y%m%d)
```

### 数据导入导出

在管理模式下：
1. 点击"导出数据"按钮下载 JSON 文件
2. 点击"导入数据"按钮上传 JSON 文件

---

## 🔧 端口配置

### Docker 部署

编辑 `docker-compose.yml` 文件：

```yaml
ports:
  - "8080:3000"  # 外部访问 8080 端口
```

### 传统部署

编辑 `server.js` 文件：

```javascript
const PORT = 8080;  // 修改为你想要的端口
```

---

## 🛠️ 技术栈

- **后端：** Node.js + Express
- **前端：** 原生 JavaScript + CSS3
- **存储：** JSON 文件
- **部署：** Docker + Docker Compose

---

## 📝 技术特性

- 🌐 **API 自动适配** - 前端自动使用当前页面地址，支持任意域名和端口
- 🔄 **实时同步** - 所有设备数据自动同步
- 💾 **持久化存储** - 数据安全可靠
- 🎯 **响应式设计** - 支持桌面和移动设备
- ⚡ **性能优化** - 轻量级，加载快速
- 🔒 **安全可靠** - 密码保护，会话管理

---

## ❓ 常见问题

**Q: 忘记管理员密码怎么办？**  
A: 
- Docker 部署：编辑 `.env` 文件修改 `ADMIN_PASSWORD`，然后 `docker-compose restart`
- 传统部署：编辑 `data/config.json` 文件修改 `adminPassword` 字段

**Q: 如何修改端口？**  
A: 
- Docker 部署：修改 `docker-compose.yml` 中的 `ports` 配置
- 传统部署：修改 `server.js` 中的 `PORT` 变量

**Q: 数据会丢失吗？**  
A: 不会。Docker 部署使用 volume 挂载 `./data` 目录，删除容器不会删除数据。

**Q: 如何更新应用？**  
A: 
```bash
git pull
docker-compose up -d --build
```

**Q: 如何查看日志？**  
A: 
```bash
docker-compose logs -f
```

**Q: 容器无法启动怎么办？**  
A: 
1. 查看日志：`docker-compose logs`
2. 检查端口是否被占用
3. 确认 `.env` 文件格式正确

---

## 📄 许可证

Apache License Version 2.0

---

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

## 📞 相关文档

- [Docker 部署详细文档](DOCKER_DEPLOY.md)
- [配置说明文档](配置说明.md)