# Work Navigation 工作导航

**Repository Path**: sichengtech_admin/Work-Navigation

## Basic Information

- **Project Name**: Work Navigation 工作导航
- **Description**: 工作导航是一个轻量级的内部系统导航工具，为团队提供统一的系统网址入口。打开页面即可快速找到所需系统，无需记忆或收藏大量内部地址。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-26
- **Last Updated**: 2026-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 工作导航系统

> 团队内部系统统一导航入口

## 简介

技术团队的日常，是不是这样的？监控平台、日志系统、CI/CD、需求管理、代码仓库、运维后台……几十个系统散落在浏览器收藏夹的角落里，域名永远记不住，入口永远找不到。新人入职一脸懵，老手想用个工具还得先翻半天书签——当「找系统」比「用系统」还耗时，你的团队正在被效率黑洞吞噬。

**工作导航，就是为终结这场混乱而生的统一入口。** 把散落四处的系统全部收纳进一屏之内，分类清晰、一键直达、秒开即用。从此告别收藏夹翻找，告别域名死记硬背——打开页面，所有工具尽在眼前，团队协作效率直接拉满。

---

## 开源地址

项目**完全开源**（[MIT License](./LICENSE)，无任何限制，可自由使用、修改、商用），欢迎体验、Star 与反馈，让更多团队告别"找系统"的烦恼：

- **国内（Gitee）**：[https://gitee.com/sichengtech_admin/Work-Navigation](https://gitee.com/sichengtech_admin/Work-Navigation)
- **国外（GitHub）**：[https://github.com/sichengtech/Work-Navigation](https://github.com/sichengtech/Work-Navigation)

## 下载

最新发行版已在两个平台同步发布，任选一个下载即可，开箱即用：

- [Gitee Releases 下载](https://gitee.com/sichengtech_admin/Work-Navigation/releases)
- [GitHub Releases 下载](https://github.com/sichengtech/Work-Navigation/releases)

---

**核心特性：**

- 前台一屏展示所有导航，通过自适应网格布局充分利用屏幕空间
- 内置 **6 套首页主题**，管理后台可一键切换
- **移动端适配**：窄屏自动放大字号、优化触控区域，手机浏览体验友好
- 管理后台支持添加、编辑、删除导航条目
- 零外部依赖——无需数据库，数据存储在 JSON 文件中
- 单 JAR 部署，`java -jar` 即可运行

## 界面预览

### 前台首页
![前台首页](doc/images/screenshot-frontend.png)

### 管理后台登录
![管理后台登录](doc/images/screenshot-admin-login.png)

### 管理后台
![管理后台](doc/images/screenshot-admin.png)

---

## 导航层级

系统支持**两种层级混合使用**，统一在一个页面展示。

### 三级结构（环境分组）

适用于需要区分多套环境的系统：

```
分类（如：业务系统入口）
  └─ 导航项（如：门户网站）
       ├─ [演示环境]  https://example.com
       └─ [管理后台]  https://example.com/admin
```

前台效果：
```
门户网站               [演示环境] [管理后台]
商城系统               [测试环境] [生产环境]
```

### 二级结构（单一地址）

适用于只有一个入口的系统或外部工具：

```
分类（如：外部工具）
  └─ 导航项 → 直接跳转地址
```

前台效果（名称本身是可点击链接，点击直接打开）：
```
企业邮箱
GitHub
```

### 混合使用

同一个分类下可以同时存在二级和三级导航项，在管理后台编辑时通过是否填写"单一地址"来控制：

| 填写方式 | 层级 | 前台展示 |
|----------|------|---------|
| 填写"单一地址" | 二级 | 名称本身为可点击链接，点击直接打开 |
| 填写"多环境地址"表格 | 三级 | 名称 + 多个 `[环境名]` 标签 |
| 两者都填 | 二级优先 | 只显示单一地址 |
| 两者都不填 | 无效 | 保存时会被忽略 |

---

## 快速开始

### 方式一：下载发行版（推荐）

从本仓库的 **发行版（Release）** 页面下载最新的 `work-navigation-*.jar`，保存到任意目录即可运行，无需安装 Maven 构建环境。

### 方式二：源码构建

**前提条件**：JDK 8 或更高版本（推荐 JDK 8/11/17）、Maven 3.x

```bash
# 克隆或解压项目后，在项目根目录执行：
mvn clean package -DskipTests
```

### 运行

```bash
java -jar target/work-navigation-*.jar
```

### 访问

| 页面 | 地址 |
|------|------|
| 前台首页 | http://localhost:8080/ |
| 管理后台 | http://localhost:8080/admin/login |

> 默认管理密码：`123456`
> 可在 `application.yml` 中修改密码。

---

## 管理后台使用指南

### 登录

访问 `/admin/login`，输入管理密码（默认 `123456`）即可登录。

### 站点设置

后台页面顶部有「站点设置」面板，可修改站点文字和首页风格，修改后前台实时生效：

| 字段 | 影响位置 |
|------|---------|
| 站点标题 | 浏览器标签页标题 `<title>` + 页面顶部大标题 |
| 副标题 | 顶部标题栏右侧灰色小字 |
| 页脚 | 页面底部文字 |
| 首页风格 | 前台首页主题样式，默认「极光玻璃」，可切换「紫晶经典」「深空终端」「松林清晨」「赛博矩阵」「暖阳信笺」 |

内置首页风格：

| 风格 | code |
|------|------|
| 极光玻璃 | `aurora-glass` |
| 紫晶经典 | `amethyst-classic` |
| 深空终端 | `deep-terminal` |
| 松林清晨 | `pine-morning` |
| 赛博矩阵 | `cyber-grid` |
| 暖阳信笺 | `warm-kraft` |

### 分类管理

- **添加分类**：点击「+ 添加分类」按钮，输入名称
- **编辑分类**：点击分类右上角的「编辑」按钮，可修改名称和排序序号
- **删除分类**：点击分类右上角的「删除」按钮（红色文字）

### 导航项管理

每个分类下有多个导航项：

- **添加导航项**：点击分类中的「+ 添加导航」按钮
- **编辑导航项**：点击导航项的「编辑」按钮，弹出编辑弹窗

编辑弹窗分为三个区块：

**基本信息**

| 字段 | 说明 | 必填 |
|------|------|------|
| 导航名称 | 前台显示的名称 | 是 |
| 排序序号 | 数字越小排越前 | 否 |
| 导航说明 | 在名称下方显示灰色说明文字 | 否 |

**单一地址**

| 字段 | 说明 | 必填 |
|------|------|------|
| 单一地址 | 前台该导航的名称本身成为可点击链接，点击直接打开 | 否 |

**多环境地址**

| 字段 | 说明 | 必填 |
|------|------|------|
| 多环境地址表格 | 每行一个环境入口，前台显示多个环境标签（如：`官网 [生产环境] [测试环境]`） | 否（单一地址的替代方案） |

- **删除导航项**：点击导航项的「删除」按钮

---

## 数据文件

### 文件位置

数据存储在 JAR 同级目录的 `data/nav-data.json` 文件中。

```
work-navigation/
├── target/work-navigation-*.jar     # 可执行 JAR
└── data/nav-data.json              # 导航数据文件（自动生成、可读写）
```

### 首次启动

首次运行 JAR 时，程序会自动从 JAR 内部复制默认导航数据到 `data/nav-data.json`。之后所有修改都持久化至此文件。

### 数据迁移

直接将 `data/nav-data.json` 复制到新的 JAR 同级目录即可携带全部数据。

### 重置数据

如果需要恢复到默认数据，删除 `data/nav-data.json` 后重启 JAR 即可。

### JSON 结构示例

```json
{
  "siteTitle": "开源工作导航",
  "siteSubtitle": "开发团队常用站点与工具导航",
  "siteFooter": "Open Work Navigation",
  "siteTheme": "aurora-glass",
  "datas": [
    {
      "name": "示例业务系统",
      "sort": 1,
      "list": [
        {
          "name": "门户网站",
          "sort": 1,
          "items": [
            { "env": "演示环境", "url": "https://example.com", "sort": 1 },
            { "env": "管理后台", "url": "https://example.com/admin", "sort": 2 }
          ]
        },
        {
          "name": "用户中心",
          "sort": 2,
          "items": [
            { "env": "前台入口", "url": "https://example.com/account", "sort": 1 }
          ]
        }
      ]
    }
  ]
}
```

### 数据文件中的排序

分类、导航项、环境地址三级均有 `sort` 数字字段。加载时自动按 `sort` 从小到大排序。编辑后台修改后即时生效并写入文件。

| 层级 | sort 字段 | 说明 |
|------|-----------|------|
| 分类 | `datas[].sort` | 控制不同分类的显示顺序 |
| 导航项 | `datas[].list[].sort` | 控制同一分类下导航项的顺序 |
| 环境地址 | `datas[].list[].items[].sort` | 控制同一导航项下环境标签的顺序 |

---

## 配置说明

配置文件为 `src/main/resources/application.yml`，也可以在 JAR 同级目录放置 `application.yml` 覆盖。

```yaml
server:
  port: 8080                        # 服务监听端口

spring:
  thymeleaf:
    cache: false                    # 模板缓存（开发时关闭）

nav:
  password: 123456                   # 管理后台登录密码
  data-file: data/nav-data.json      # 导航数据文件路径
```

---

## 项目结构

```
work-navigation/
├── pom.xml                          # Maven 构建文件
├── README.md                        # 本文件
├── .gitignore
├── data/                            # 导航数据文件（示例数据，运行时可读写）
├── doc/
│   └── 技术方案.md                   # 技术方案文档
└── src/main/
    ├── java/com/nav/
    │   ├── Application.java                  # Spring Boot 启动入口
    │   ├── config/
    │   │   ├── AdminConfig.java              # 管理密码配置
    │   │   └── WebMvcConfig.java             # 拦截器注册
    │   ├── interceptor/
    │   │   └── AuthInterceptor.java          # 登录校验拦截器
    │   ├── model/
    │   │   ├── NavData.java                  # 根数据（站点配置 + 分类列表）
    │   │   ├── Category.java                 # 分类（名称 + 排序 + 子项列表）
    │   │   ├── NavItem.java                  # 导航项（名称 + 排序 + 直达URL/环境列表+说明）
    │   │   ├── EnvUrl.java                   # 环境地址对（环境名 + URL + 排序）
    │   │   └── NavTheme.java                 # 首页主题注册表（主题code → CSS 路径）
    │   ├── service/
    │   │   └── NavService.java               # 核心业务：JSON 读写 + 排序 + 站点配置
    │   └── controller/
    │       ├── IndexController.java          # 前台页面控制
    │       └── AdminController.java          # 后台管理控制（登录/增删改/站点配置）
    └── resources/
        ├── application.yml                   # 配置文件
        ├── static/css/
        │   ├── style.css                     # 前台全局基础样式
        │   ├── admin.css                     # 后台专属样式（深色主题）
        │   └── themes/                       # 前台首页主题样式（6 套）
        ├── templates/
        │   ├── index.html                    # 前台首页模板
        │   ├── admin-login.html              # 后台登录页模板
        │   └── admin.html                    # 后台管理页模板
        └── data/nav-data.json                # JAR 内置默认导航数据
```

---

## 常见问题

### 端口被占用怎么办？

找到占用进程并停止：

```bash
lsof -i :8080
kill <PID>
```

或修改 `application.yml` 中的 `server.port` 为其他端口。

### 忘记管理后台密码怎么办？

修改 `application.yml` 中的 `nav.password`，重启 JAR 即可。

### Session 过期怎么办？

后台 AJAX 操作超时后会收到 401 响应，前端会自动跳转到登录页，重新登录即可。

### 如何迁移到另一台服务器？

1. 将 `work-navigation-*.jar` 复制到目标服务器
2. 将 `data/nav-data.json` 复制到同目录
3. 执行 `java -jar work-navigation-*.jar`

---

## 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| Java | 8+ | 开发语言 |
| Spring Boot | 2.7.18 | Web 框架 |
| Thymeleaf | 3.0.x | 服务端模板引擎 |
| Jackson | 2.13.x | JSON 序列化/反序列化 |
| Bootstrap | 5.3.3 | 前端样式 (CDN) |
| Maven | 3.x | 项目构建 |