mirror of
https://github.com/luscis/openlan.git
synced 2026-04-22 23:07:11 +08:00
branding: add dashboard docs and serve OpenLAN logo asset
This commit is contained in:
Daniel Ding
@@ -1,5 +1,9 @@
|
||||
简体中文 | [English](./README.en.md)
|
||||
|
||||
<p align="center">
|
||||
<img src="./pkg/public/openlan.png" alt="OpenLAN Logo" width="180" />
|
||||
</p>
|
||||
|
||||
[](https://goreportcard.com/report/luscis/openlan)
|
||||
[](https://codecov.io/gh/luscis/openlan)
|
||||
[](https://github.com/luscis/openlan/actions/workflows/codeql.yml)
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
English | [简体中文](./README.cn.md)
|
||||
|
||||
<p align="center">
|
||||
<img src="./pkg/public/openlan.png" alt="OpenLAN Logo" width="180" />
|
||||
</p>
|
||||
|
||||
[](https://goreportcard.com/report/luscis/openlan)
|
||||
[](https://codecov.io/gh/luscis/openlan)
|
||||
[](https://github.com/luscis/openlan/actions/workflows/codeql.yml)
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
- 📦 [软件安装](install.md)
|
||||
- 🐳 [Docker 部署](docker.md)
|
||||
- 🧭 [Dashboard 介绍](dashboard.md)
|
||||
- 🌿 [分支接入](central.md)
|
||||
- 🌐 [多区域互联](multiarea.md)
|
||||
- ⚖️ [ECMP 多路径](ecmp.md)
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="512" height="512" rx="96" fill="#081018"/>
|
||||
<circle cx="256" cy="256" r="162" stroke="#233041" stroke-width="22"/>
|
||||
<circle cx="256" cy="256" r="98" fill="#111C27" stroke="#314255" stroke-width="12"/>
|
||||
<circle cx="256" cy="256" r="42" fill="#E6EDF3"/>
|
||||
<circle cx="256" cy="256" r="15" fill="#081018"/>
|
||||
<path d="M256 84V174" stroke="#58A6FF" stroke-width="12" stroke-linecap="round"/>
|
||||
<path d="M398 171L320 216" stroke="#3FB950" stroke-width="12" stroke-linecap="round"/>
|
||||
<path d="M398 341L320 296" stroke="#D29922" stroke-width="12" stroke-linecap="round"/>
|
||||
<path d="M114 341L192 296" stroke="#F85149" stroke-width="12" stroke-linecap="round"/>
|
||||
<path d="M114 171L192 216" stroke="#BC8CFF" stroke-width="12" stroke-linecap="round"/>
|
||||
<circle cx="256" cy="68" r="25" fill="#58A6FF"/>
|
||||
<circle cx="411" cy="162" r="25" fill="#3FB950"/>
|
||||
<circle cx="411" cy="350" r="25" fill="#D29922"/>
|
||||
<circle cx="101" cy="350" r="25" fill="#F85149"/>
|
||||
<circle cx="101" cy="162" r="25" fill="#BC8CFF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,155 @@
|
||||
# OpenLAN Dashboard 视角下的产品介绍
|
||||
|
||||
<div align="center">
|
||||
<img src="./assets/openlan-logo-orbit.svg" alt="OpenLAN Logo" width="140" />
|
||||
<p><strong>OpenLAN</strong></p>
|
||||
<p>从 Dashboard 出发，理解一个面向企业网络互联与统一管理的开源平台。</p>
|
||||
<p>
|
||||
<img src="./assets/openlan-logo-orbit.svg" alt="OpenLAN Icon" width="44" />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
## 引言
|
||||
|
||||
很多网络产品的介绍都会先从协议、拓扑或者安装步骤讲起，但 OpenLAN 更适合从它的 Dashboard 来理解。因为当你打开 Dashboard 时，看到的不只是一个管理页面，而是 OpenLAN 对企业网络互联这件事的整体抽象。
|
||||
|
||||
在 OpenLAN 里，网络不只是“把两台机器连起来”，而是围绕一个中心节点，把用户、虚拟网络、路由、VPN、策略和跨区域互联统一组织起来。Dashboard 正是这套能力最直观的入口。
|
||||
|
||||
## OpenLAN 是什么
|
||||
|
||||
OpenLAN 是一个面向企业场景的开源虚拟网络互联平台。它的核心目标，不是单纯提供一个点到点 VPN，而是把分支接入、远程办公、跨区域互联、代理转发和零信任访问控制，放进同一个可管理的网络平面里。
|
||||
|
||||
和传统“连通即可”的方案相比，OpenLAN 更强调三件事：
|
||||
|
||||
- 让远端节点像接入同一个局域网一样工作；
|
||||
- 让多个网络空间可以在一个平台里统一管理；
|
||||
- 让接入、转发、认证和策略具备持续运维能力。
|
||||
|
||||
这也是为什么 Dashboard 不是一个附属功能，而是 OpenLAN 的重要表达方式。
|
||||
|
||||
## 先从视觉入口理解 OpenLAN
|
||||
|
||||
在 Dashboard 中，OpenLAN 使用了非常克制的视觉语言：深色背景、清晰的导航分区、统一的卡片与表格结构，再配合简洁的 Logo，强调的是“控制面”而不是“营销页”。
|
||||
|
||||
这种风格其实和产品定位高度一致：
|
||||
|
||||
- Logo 简洁，表达的是稳定、边界和控制感；
|
||||
- Dashboard 结构明确，强调网络对象的组织能力；
|
||||
- 视觉不过度装饰，把重点留给状态、连接、用户和策略。
|
||||
|
||||
从这个角度看，OpenLAN 的品牌和界面设计在传递同一件事：它服务的是持续运维的企业网络场景，而不是一次性临时连接。
|
||||
|
||||
## 从 Dashboard 看 OpenLAN 的核心能力
|
||||
|
||||
### 1. Overview：把网络状态先看清楚
|
||||
|
||||
Dashboard 的第一页是 `Overview`。这一页承载的是“控制面视角”的能力：节点状态、网络数量、用户规模、连接情况、运行信息，都可以集中呈现。
|
||||
|
||||
对于运维人员来说，这意味着 OpenLAN 并不是部署完就只能回到命令行逐项检查。它提供了一个统一的观察窗口，让你快速回答几个关键问题：
|
||||
|
||||
- 当前节点是不是正常运行；
|
||||
- 系统里有多少个虚拟网络；
|
||||
- 有多少用户、多少接入连接；
|
||||
- 整体资源和网络状态是否健康。
|
||||
|
||||
这一步很重要。因为企业网络的难点往往不是“能不能连上”，而是“出了问题时能不能快速定位”。Overview 页面体现的，就是 OpenLAN 在可观测性和日常运营上的价值。
|
||||
|
||||
### 2. Virtual Network：把复杂网络拆成可管理的逻辑空间
|
||||
|
||||
`Virtual Network` 页面是理解 OpenLAN 的关键。OpenLAN 支持在同一个平台中管理多个逻辑网络，每个网络都可以有独立的桥接地址、地址池、路由、转发和接入方式。
|
||||
|
||||
这种能力适合下面几类场景：
|
||||
|
||||
- 不同部门使用不同网络空间，互不干扰；
|
||||
- 不同客户或环境共用一套基础设施，但需要逻辑隔离；
|
||||
- 总部、分支、测试环境和生产环境在统一平台下独立运行。
|
||||
|
||||
从 Dashboard 的组织方式也能看出 OpenLAN 的设计取向。这里不是简单列出一个“隧道列表”，而是把网络作为核心对象来管理。管理员可以围绕网络本身配置地址、子网、SNAT、MSS、OpenVPN 接入等能力，这让 OpenLAN 更像一个企业网络控制台，而不是单一协议工具。
|
||||
|
||||
### 3. BGP、Router、IPSec、Ceci：不仅能接入，还能互联
|
||||
|
||||
如果说很多 VPN 产品解决的是“远程进来”，那 OpenLAN 想解决的是“整个网络怎么组织起来”。
|
||||
|
||||
Dashboard 中的 `BGP Network`、`Router Network`、`IPSec Network`、`Ceci Network`，展示的是 OpenLAN 在更大范围网络互联上的扩展能力：
|
||||
|
||||
- `BGP Network` 适合和已有路由体系做动态互通；
|
||||
- `Router Network` 用于管理更明确的三层路由转发关系；
|
||||
- `IPSec Network` 适合站点到站点的安全互联；
|
||||
- `Ceci Network` 则为特定网络接入和互联方式预留了扩展空间。
|
||||
|
||||
这类设计说明 OpenLAN 并不把自己限制在“单一远程访问工具”的角色里。它更接近一个可生长的网络平台，可以随着企业网络规模扩大，逐步承载更多互联需求。
|
||||
|
||||
### 4. VPN Clients：降低终端接入门槛
|
||||
|
||||
企业网络最终还是要给人用。Dashboard 里的 VPN 客户端管理能力，让管理员可以按网络查看接入终端、地址、远端信息、在线状态和流量收发情况。
|
||||
|
||||
这带来两个直接收益：
|
||||
|
||||
- 用户接入路径更清晰，远程办公更容易落地；
|
||||
- 管理侧能快速识别异常连接、离线终端和活跃状态。
|
||||
|
||||
这与 OpenLAN 的产品定位是一致的。它既支持中心节点和接入点之间的网络互联，也支持通过 OpenVPN 等方式为终端用户提供接入能力。也就是说，OpenLAN 既能连站点，也能连人。
|
||||
|
||||
### 5. Users：把认证和网络管理放在一起
|
||||
|
||||
很多时候，网络平台的复杂性不是来自链路，而是来自账号和权限。Dashboard 的 `Users` 页面把用户管理和网络对象放在一起，让管理员能更自然地理解“谁接入哪个网络、以什么身份接入、租期到什么时候”。
|
||||
|
||||
这背后体现的是 OpenLAN 的集中管理思路：
|
||||
|
||||
- 用户不是散落在各节点上的本地配置；
|
||||
- 网络不是独立于身份体系之外的静态资源；
|
||||
- 认证、租约和接入网络形成统一关系。
|
||||
|
||||
对企业来说，这种统一性非常重要。因为网络一旦进入多人、多部门、多地点协作阶段，账号生命周期管理就会和网络可控性直接绑定。
|
||||
|
||||
### 6. About OpenLAN：把节点本身纳入产品叙事
|
||||
|
||||
`About OpenLAN` 页面虽然看起来更像“说明信息”，但它传递了一个很重要的产品信号：OpenLAN 不是一个黑盒服务，而是一个开源、可审视、可追踪构建信息的系统。
|
||||
|
||||
在这里可以看到版本、节点身份以及项目来源信息。这对于开源产品尤其重要，因为用户不仅关心“能不能用”，也关心“是谁在维护、版本是什么、系统处于什么状态”。
|
||||
|
||||
## 为什么 Dashboard 视角很重要
|
||||
|
||||
从 Dashboard 来看 OpenLAN，会发现它解决的问题比传统 VPN 更完整。
|
||||
|
||||
传统 VPN 更关注“建立隧道”，而 OpenLAN 更关注：
|
||||
|
||||
- 网络对象如何被组织；
|
||||
- 用户如何被接入；
|
||||
- 多个区域如何互联；
|
||||
- 路由和安全策略如何持续运维；
|
||||
- 管理员如何在统一界面中观察和操作。
|
||||
|
||||
这正是 OpenLAN 对企业场景更有吸引力的原因。企业网络不是一次性配置，而是持续变化的系统。节点会增加，用户会变化，路由会调整，分支会扩展，安全边界也会不断重构。Dashboard 的价值，就是把这种持续演进的复杂度压缩到一个可理解、可操作的界面里。
|
||||
|
||||
## OpenLAN 适合什么场景
|
||||
|
||||
结合 Dashboard 的能力，可以更容易理解 OpenLAN 的典型使用场景：
|
||||
|
||||
### 分支机构互联
|
||||
|
||||
总部与多个分支之间需要稳定互联，同时希望各分支像在同一局域网里工作。OpenLAN 可以通过中心节点统一管理接入网络、地址空间和用户，减少每个站点单独维护的负担。
|
||||
|
||||
### 远程办公接入
|
||||
|
||||
远程员工需要访问企业内部系统，而管理员又希望清楚知道谁在接入、接入到哪个网络、当前连接是否健康。Dashboard 下的用户和 VPN 客户端视图能显著降低运维成本。
|
||||
|
||||
### 多区域网络扩展
|
||||
|
||||
当业务分布在多个城市、多个机房甚至多个云环境时，单纯依赖静态 VPN 配置会越来越难维护。OpenLAN 提供面向网络对象的集中管理方式，更适合规模扩展。
|
||||
|
||||
### 需要代理、路由与安全策略协同的环境
|
||||
|
||||
如果一个团队不仅要“连上”，还要同时处理代理转发、路由编排、IPSec、BGP 或零信任访问控制，那么 OpenLAN 会比单点 VPN 工具更接近真实需求。
|
||||
|
||||
## 结语
|
||||
|
||||
如果只用一句话介绍 OpenLAN，可以这样概括：
|
||||
|
||||
**OpenLAN 不是单纯的 VPN 工具，而是一个面向企业网络互联与统一管理的开源平台。**
|
||||
|
||||
而如果要用 Dashboard 的语言来理解它，那么答案会更具体一些：
|
||||
|
||||
它把网络、用户、接入、路由、VPN 和策略，收敛到同一个控制面中，让原本分散、依赖手工维护的网络工作，变得更可视、更可控，也更适合持续演进。
|
||||
|
||||
这也是 OpenLAN 最值得关注的地方。它不只是帮你把网络连起来，更是在帮你把网络管理起来。
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 4.2 KiB |
@@ -787,7 +787,7 @@ select option {
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<img src="/favicon.ico" class="sidebar-logo" alt="" onerror="this.style.display='none'">
|
||||
<img src="/openlan.png" class="sidebar-logo" alt="" onerror="this.style.display='none'">
|
||||
<div>
|
||||
<div class="sidebar-brand">OpenLAN</div>
|
||||
<div class="sidebar-version" id="sw-version">Management Console</div>
|
||||
@@ -1324,7 +1324,7 @@ select option {
|
||||
<div class="section-body about-shell">
|
||||
<div class="about-hero">
|
||||
<div class="about-logo">
|
||||
<img src="/favicon.ico" alt="OpenLAN" style="width:56px;height:56px;border-radius:14px;" onerror="this.style.display='none'">
|
||||
<img src="/openlan.png" alt="OpenLAN" style="width:56px;height:56px;border-radius:14px;" onerror="this.style.display='none'">
|
||||
</div>
|
||||
<div>
|
||||
<div class="about-kicker">Open Source Network Overlay Platform</div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 146 KiB |
+2
-1
@@ -93,7 +93,7 @@ func (h *Http) Prome(r *mux.Router) {
|
||||
func (h *Http) Middleware(next http.Handler) http.Handler {
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
libol.Info("Http.Middleware %s %s", r.Method, r.URL.Path)
|
||||
if r.URL.Path == "/favicon.ico" {
|
||||
if r.URL.Path == "/favicon.ico" || r.URL.Path == "/openlan.png" {
|
||||
next.ServeHTTP(w, r)
|
||||
return
|
||||
}
|
||||
@@ -141,6 +141,7 @@ func (h *Http) LoadRouter() {
|
||||
router.HandleFunc("/", h.IndexHtml)
|
||||
router.HandleFunc("/index.html", h.IndexHtml)
|
||||
router.HandleFunc("/favicon.ico", h.PubFile)
|
||||
router.HandleFunc("/openlan.png", h.PubFile)
|
||||
|
||||
h.PProf(router)
|
||||
h.Prome(router)
|
||||
|
||||
Reference in New Issue
Block a user