czertainly/czertainly-frontend-administrator

CZERTAINLY Administrator User Interface

概述

本镜像属于商业开源项目CZERTAINLY的一部分。更多项目信息请参见https://github.com/CZERTAINLY/CZERTAINLY%EF%BC%8C%E5%8C%85%E6%8B%AC%E8%B4%A1%E7%8C%AE%E6%8C%87%E5%8D%97%E3%80%82

Administrator User Interface（简称Admin UI）是管理员Web界面，管理员可通过该界面在平台上执行各种管理任务。

核心功能和特性

对象详情

页面链接和布局设计便于导航，用户可点击对象名称直接跳转至详情页查看对象详情。

图标和工具提示

为便于理解和使用，图标均配有工具提示，帮助用户了解其提供的操作功能。

操作

大多数对象支持从列表页执行批量操作。对于单个对象（如连接器）的操作，用户可在列表页或详情页进行。

更多信息请参考CZERTAINLY文档。

使用场景和适用范围

适用于平台管理员执行日常管理任务，包括但不限于：

• 查看各类对象（如连接器、属性等）的详细信息
• 对对象执行批量操作
• 管理平台配置和设置

使用方法

生成API类型

本节提供从OpenAPI规范生成DTO和API的TypeScript类的指南，包括必要的自定义步骤。

步骤1：生成TypeScript数据传输对象（DTOs）

使用以下命令从OpenAPI规范生成TypeScript DTOs，该命令会生成类型并使用Prettier格式化文件：

sh
npm run generate-types

步骤2：修复生成代码中的类型错误

生成的代码可能出现类型错误，例如：

sh
Type 'PaginationRequestDto' is not assignable to type 'string | number | boolean | (string | number | boolean)[]'.ts(2322)
(property) 'paginationRequestDto': PaginationRequestDto

原始生成代码：

sh
const query: HttpQuery = { // 必需参数已通过throwIfNullOrUndefined检查，因此直接使用
    'paginationRequestDto': paginationRequestDto,
};

修复类型错误的更新代码：

sh
const query: HttpQuery = {};
if (paginationRequestDto != null) {
    Object.assign(query, paginationRequestDto);
}

此修改确保仅当paginationRequestDto不为null或undefined时才分配给query，避免类型错误。

步骤3：手动向DataAttribute接口添加BaseAttributeContentDto

从OpenAPI模型类型生成时，BaseAttributeContentDto会从DataAttribute接口中移除（因内部库生成层级类型问题）。按以下方式更新接口：

sh
interface DataAttribute {
    # 向DataAttribute接口添加以下属性
    /**
     * 属性内容
     * @type {Array<BaseAttributeContentDto>}
     * @memberof DataAttribute
     */
    content?: Array<BaseAttributeContentDto>;
}

确保生成类型后手动添加content属性，并导入BaseAttributeContentDto：

sh
import type {
    AttributeCallback,
    AttributeContentType,
    AttributeType,
    BaseAttributeConstraint, # 添加此导入
    DataAttributeProperties,
} from './';

Docker容器配置

环境变量

Admin Web Interface通过以下环境变量配置，镜像拉取命令：docker pull czertainly/czertainly-frontend-administrator:tagname

部署示例

docker run命令部署

sh
docker run -d \
  -e BASE_URL=/admin \
  -e API_URL=/czertainly-api \
  -p 8080:80 \
  czertainly/czertainly-frontend-administrator:tagname

docker-compose部署

创建docker-compose.yml文件：

yaml
version: '3'
services:
  czertainly-admin-ui:
    image: czertainly/czertainly-frontend-administrator:tagname
    environment:
      - BASE_URL=/admin
      - API_URL=/czertainly-api
      - LOGIN_URL=/admin/login
      - LOGOUT_URL=/admin/logout
    ports:
      - "8080:80"

启动容器：docker-compose up -d