技术文档

一些客户存 CSS 样式覆写的业务需求， 还有一些客户存在动态接入 第三方 JS 逻辑的需求。因此 V8 前端开放了以下通路满足这些需求。

客户 CSS/JS 定制代码库: custom-theme, 只要存在自定义样式的客户, 就单独拉取一个分支, 如 ● 科伦客户的分支: 3.0-release_20240330_kelun ● CMI客户的分支: cmi

Gitlab 仓库地址: https://gitlab.seeyon.com/a9/code/frontend/libs/custom-theme

目录结构 ├── dist/ // 构建好的输出目录 ├── src/ // 源码目录 ├── pc/ // PC 端自定义样式 ├── biz/ // 业务组件库自定义样式 ├── ui/ // 基础UI 组件库 自定义样式 ├── index.less // 统一导出 ├── mobile/ // MOBILE 端自定义样式 ├── mbiz/ // 业务组件库自定义样式 ├── mui/ // 基础UI 组件库 自定义样式 ├── index.less // 统一导出 ├── header.txt // 模板文件 ├── var.less // less 变量 ├── package.json //

  1. pc 端和 mobile 端的都有各自的存放目录
  2. 覆写基础组件样式请放置到 ui/ 或 mui 文件夹
  3. 覆写业务组件夹请放置到 biz/ 或 mbiz 文件夹
  4. 然后在 index.less 中导出文件

如何本地图调试样式

  1. 在 custom-theme 根目录 执行 yarn start，开启静态资源服务: a. http://localhost:8000/seeyon-customer-pc.css b. http://localhost:8000/seeyon-customer-mobile.css
  2. 访问目标网站
  3. 在开发者工具的"网络请求中找到 a. seeyonui 开头的CSS文件 或 seeyon/mui 开头的 CSS 文件 b. 右键"替换内容"，然后该文件会被保存到本地磁盘
  4. 在本地文件的头部使用 CSS 的 @import 引入上一步的 CSS 地址

@import 'http://localhost:8000/seeyon-customer-pc.css';

构建 yarn build 构建成功后 会输出类似以下目录 ├── dist/
├── header-pc.txt // ├── header.txt // ├── seeyon-customer-mobile.css // ├── seeyon-customer-pc.css // 必须把 dist 目录中的内容提交到 git 仓库中

以下是这些文件的说明:

  1. header-pc.txt PC 端 待插入 index.html 的自定义内容, 类似如下内容(以下内容自动生成)
<link rel="stylesheet" type="text/css" href="/custom-index-header/seeyon-customer-pc.css?t=1732269106746">

<script src="/custom-index-header/seeyon-customer-pc.js"></script>
  1. header.txt Mobile 端 待插入 index.html 的自定义内容, 类似如下内容(以下内容自动生成)
<link rel="stylesheet" type="text/css" href="/custom-index-header/seeyon-customer-mobile.css?t=1732269106746">

<script src="/custom-index-header/seeyon-customer-mobile.js"></script>

  1. seeyon-customer-pc.css PC 端的所有 xxx.less 文件统一编译为一个 css 文件

  2. seeyon-customer-mobile.css Mobile 端的所有 xxx.less 文件统一编译为一个 css 文件

  3. header-pc.txt 的内容如图， 是运维通过脚本自动插入到 main 的 index.html 中的

  4. 因为不同的客户需要的是不同的脚本， 所以不能手动写死

部署 推送构建好的代码

  1. custom-theme 执行 yarn build 后，推送代码到远程仓库

运维部署

上传静态资源

  1. 云存储服务上与前端 main/前端 main-mobile 同级 新建 custom-index-header 目录
  2. 上传以下文件到 云存储服务上的 custom-index-header 目录 a. custom-theme/dist/seeyon-customer-pc.css b. custom-theme/dist/seeyon-customer-mobile.css ● 运维需要保证浏览器可以通过路径 http://xxxx/customer-index-header/xxx 访问到 custom-index-header 下边的资源

修改 Nacos(3.10 版本及其之后) 在 Nacos 服务中心找到

  1. 在 front-custom-head-start 中以 HTML 格式插入 custom-theme/dist/header-pc.txt 的内容
  2. 在 mobile-front-custom-head-start 中以 HTML 格式插入 custom-theme/dist/header.txt 的内容 每隔 1 个小时会自动扫描内容， 然后动态插入 前端 main/前端 main-mobile 的 index.html 中

手动修改前端 main/前端 main-mobile 的 index.html(3.10 版本之前)

main/main-mobile 源码工程中的 index.html 存在如下内容

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="author" content="Seeyon" />
  <meta name="keywords" content="Seeyon" />
  <meta name="description" content="Seeyon" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta name="renderer" content="webkit" />
  <title></title>
  <!--客开代码注入点st-->
  <!--customer-index-header_inject st-->
  <!--customer-index-header_inject ed-->
<head>


<html>

index.html 的 header 区域添加一个占位注释，用于标识客开资源 header.txt 注入点

  1. 替换 PC 端 main/index.html 内容: 替换为 custom-index-header/header-pc.txt 内容

  2. 换 Mobile 端 mian-mobile/index.html 内容: 替换为 custom-index-header/header.txt 内容

  3. 重新提交代码推送到远程， 然后重新构建

    编撰人：huhao、admin

快速跳转

    ← @seeyon/js-sdk 移动终端适配层接入手册 →