Dashboard

!仪表盘截图

镜像概述和主要用途

Dashboard 是一个轻量级仪表盘应用，灵感来源于 SUI，提供与 SUI 相同的核心功能，包括通过 JSON 文件实现简单自定义，以及高效的互联网搜索栏。该应用基于 Nginx 构建，可选集成 Cloudflare 缓存清理功能，适用于构建个性化或团队级别的导航仪表盘。

核心功能和特性

与 SUI 相比的差异化特性

• "显示 URL" 功能：应用显示的 URL 可与实际跳转 URL 不同
• 应用分类：支持对应用进行分类管理
• JSON 配置主题和搜索提供商：通过 JSON 文件自定义主题和搜索服务
• 印记（Imprint）功能：支持添加***信息等印记内容

使用场景和适用范围

• 个人导航主页：集中展示常用应用和书签，简化日常访问流程
• 团队内部导航：统一团队常用工具入口，提升协作效率
• 自定义搜索门户：配置多搜索引擎，实现一站式信息检索
• 轻量级门户页面：适用于需要简洁、可定制界面的场景

安装方法

Docker 安装（推荐）

Docker 镜像是基于 nginx-cloudflare-cache 构建，继承 Nginx 基础功能，并可选在容器重启时自动清理 Cloudflare 缓存。

使用 Docker CLI

sh
$ docker run -d \
  -e CLOUDFLARE_ZONE_ID=[可选的 Cloudflare V4 区域 ID] \
  -e CLOUDFLARE_PURGE_TOKEN=[可选的 Cloudflare 清理令牌] \
  -v $(pwd)/data:/app/data \
  -p 8080:8080 \
  --name dashboard \
  phntxx/dashboard

使用 Docker Compose

yaml
version: "3"

services:
  dashboard:
    image: phntxx/dashboard:latest
    restart: unless-stopped
    environment:
      - CLOUDFLARE_ZONE_ID=[可选的 Cloudflare V4 区域 ID]
      - CLOUDFLARE_PURGE_TOKEN=[可选的 Cloudflare 清理令牌]
    volumes:
      - [数据目录路径]:/app/data  # 本地数据目录映射
    ports:
      - 8080:8080  # 宿主机端口:容器端口

使用 Docker Compose 配置说明

• 环境变量：CLOUDFLARE_ZONE_ID 和 CLOUDFLARE_PURGE_TOKEN 为可选参数，仅当需要 Cloudflare 缓存清理时配置
• 数据卷：/app/data 目录用于存储配置文件，需映射本地目录以持久化配置
• 端口映射：默认容器内端口为 8080，可根据需求修改宿主机端口

从源码编译（不推荐）

bash
$ git clone [***]
$ cd dashboard/
$ yarn
$ yarn build
$ yarn serve:production

手动安装（仅供参考）

bash
$ git clone [***]
$ cd dashboard/
$ yarn
$ yarn build
$ cp -R build/* .

Nginx 配置示例（/etc/nginx/conf.d/dashboard.conf）

nginx
server {
        server_name localhost;
        listen 8080;
        root /var/www/dashboard/html/;

        location / {
                index index.html index.htm;
        }
}

部署步骤

bash
$ cd ..
$ mkdir /var/www/dashboard
$ mv dashboard/ html
$ mv html/ /var/www/dashboard
$ chown -R www-data:www-data /var/www/dashboard
$ systemctl reload nginx

配置说明

所有配置文件均存储在映射的 data 目录中。若无需特定组件，删除对应配置文件即可（未配置的组件不会渲染）。当无任何配置文件时，仅显示欢迎信息。

应用配置（apps.json）

用于定义展示的应用及分类，格式示例：

json
{
  "categories": [
    {
      "name": "[分类名称]",
      "items": [
        {
          "name": "[应用名称]",
          "displayURL": "[显示的URL]",
          "url": "[实际跳转URL]",
          "icon": "[图标代码]"  // 从 Material Design Icon Library 获取
        }
      ]
    }
  ],
  "apps": [  // 未分类应用
    {
      "name": "[应用名称]",
      "displayURL": "[显示的URL]",
      "url": "[实际跳转URL]",
      "icon": "[图标代码]"
    }
  ]
}

图标获取：访问 Material Design Icon Library 复制图标代码

书签配置（bookmarks.json）

用于定义书签分组，格式示例：

json
{
  "groups": [
    {
      "name": "[分组名称]",
      "items": [
        {
          "name": "[书签名称]",
          "url": "[书签URL]"
        }
      ]
    }
  ]
}

主题配置（themes.json）

用于自定义主题颜色，格式示例：

json
{
  "themes": [
    {
      "label": "[主题名称]",
      "value": "[主题编号]",
      "mainColor": "[主色调，6位十六进制色值]",
      "accentColor": "[强调色，6位十六进制色值]",
      "backgroundColor": "[背景色，6位十六进制色值]"
    }
  ]
}

搜索提供商配置（search.json）

用于定义搜索服务，格式示例：

json
{
  "providers": [
    {
      "name": "[网站名称]",
      "url": "[搜索处理链接]",  // 例如 "[***]"
      "prefix": "[自定义前缀]"  // 例如 "/g" 表示使用 "/g 关键词" 触发该搜索
    }
  ]
}

印记配置（imprint.json）

用于添加***信息等印记内容，格式示例：

json
{
  "imprint": {
    "name": {
      "text": "[名称]",
      "link": "[名称链接，如个人 portfolio]"
    },
    "address": {
      "text": "[地址]",
      "link": "[地址链接，如 Google Maps]"
    },
    "phone": {
      "text": "[电话号码]",
      "link": "[电话链接]"
    },
    "email": {
      "text": "[***地址]",
      "link": "[***链接，如 mailto:***]"
    },
    "url": {
      "text": "[网址]",
      "link": "[网址链接]"
    },
    "text": "[印记文本内容]"
  }
}

⚠️ 注意：此功能未经充分测试。本人非专业人士，对因错误使用此功能导致的风险不承担责任。