ToolBench样式指南 发布于 2

摘要

本文主要展示Tool Beanch插件中的各种样式，方便大家写作的时候进行参考，部分样式可能会在迭代过程中有所变更，请及时关注最新信息。点击下方仓库链接，获取并下载最新的插件构建版本。

如果您正在使用ToolBench 1.0.4及以上的版本，并且想要使用Tool Bench插件中的扩展标签，则需要安装Tool Bench插件，并在插件设置 → 渲染增强 → 标签前缀中增加“tool”项目。

样式指南

内容修饰

居中标题

代码语言：javascript复制

<tool-mtitle title="牛鞭牛鞭"></tool-mtitle>

小标签

小标签 ChatGPT 小标签 已修正内容 小标签 待确认内容

代码语言：javascript复制

<!-- type支持自定义 可以仿照插件中的相关CSS实现自定义小标签备注功能 -->
<tool-sign type="gpt">小标签 ChatGPT</tool-sign>
<tool-sign type="modified">小标签 已修正内容</tool-sign>
<tool-sign type="not-sure">小标签 待确认内容</tool-sign>

装饰标签

折叠块

这是折叠内容

代码语言：javascript复制

<!-- title默认为"折叠内容"，expand默认为true -->
<tool-expand title="折叠块" expand=true>这是折叠内容</tool-expand>

GitHub仓库

要正确显示该元素块你需要在插件中配置Github Token，如何获取Gihub Token请参考管理个人访问令牌 - GitHub 文档，并确保你的Token具备Public仓库的访问权限。 同时你需要确保你的服务器能访问到GitHub。

代码语言：javascript复制

<!-- 仓库所有者的名称应当填写你的GitHub Account Username而不是Name -->
<tool-github owner="仓库所有者" repo="仓库名"></tool-github>

进度条

代码语言：javascript复制

<tool-progress percentage="50%" color="#6ce766"></tool-progress>

彩色分割线

代码语言：javascript复制

<!-- 不填写begin与end的话将使用默认值 -->
<tool-dotted></tool-dotted>
<tool-dotted begin="#1772e8" end="#4cd327"></tool-dotted>

分栏内容

{tabs-pane 第一个}单身狗的故事{/tabs-pane} {tabs-pane 第二个}小说家的故事{/tabs-pane}

代码语言：javascript复制

<!-- {tabs-pane xxx}表示分栏的项目 -->
<tool-tabs>
  <div class="_tpl">
    {tabs-pane 第一个}单身狗的故事{/tabs-pane}
    {tabs-pane 第二个}小说家的故事{/tabs-pane}
  </div>
</tool-tabs>

时间轴

{timeline-item 2020}10元{/timeline-item} {timeline-item 2021}20元{/timeline-item} {timeline-item 2022}100元{/timeline-item}

代码语言：javascript复制

<!-- {time-line-item xxxx}表示时间轴前的年份 -->
<tool-timeline>
 <div class="_tpl">
   {timeline-item 2020}10元{/timeline-item}
   {timeline-item 2021}20元{/timeline-item}
   {timeline-item 2022}100元{/timeline-item}
 </div>
</tool-timeline>

提示消息

成功消息 普通消息 警告消息 错误消息

代码语言：javascript复制

<!-- 标签内支持其他dom元素 -->
<tool-msg type="success">成功消息</tool-msg>
<tool-msg type="info">普通消息</tool-msg>
<tool-msg type="warning">警告消息</tool-msg>
<tool-msg type="error">错误消息</tool-msg>

多模态

ToolBench自适应表达式

考虑不同设备中多模态内容的长宽是需要按比例显示的，因此Tool Bench插件为这些多模态标签提供了一套高度自适应表达式（以下简称TB表达式）使用TB表达式可以使你的多模态标签在不同尺寸的设备中也能保持一定的比例。

TB表达式形如三目运算符，不同的是它被${}符号包裹，并且支持两种运算方式：

1. ${full}：当使用这种表达式时将返回当前标签的上一层容器的宽度，也就是使元素在宽度上能撑满父容器
2. {expression?trueValue:falseValue}：当使用这种表达式时会根据expression的真假来选择使用trueValue还是falseValue。expression只需要半个表达式即可，ToolBench会自动将其与父容器宽度进行比较。 该表达式支持两个变量： full：代表父容器的宽度 cwdith：代表当前容器的宽度，该变量只在部分元素中适用 我们来看几个案例来更清晰地认识它： height="倍显示，否则高度为500px。即保证当前容器的长宽始终为3:2

TB表达式并不是在所有的tool元素中都适用，支持TB表达式的元素会专门进行标注，在写作时请留意。

Bilibili视频

在该标签中，元素height支持TB表达式，且支持cwidth

代码语言：javascript复制

<!-- 其中bvid为必填，width默认为100%，height默认为500 -->
<tool-bilibili bvid="BV1Yk4y1K7Az" width="750" height="500"></tool-bilibili>
<tool-bilibili bvid="BV1Yk4y1K7Az" page="1" width="100%" height="${<820?(cwidth*25)/41:500}"></tool-bilibili>

PDF阅读器

在该标签中，元素height支持TB表达式，且支持cwidth

代码语言：javascript复制

<!-- 其中src为必填，width默认为100%，height默认为500 -->
<tool-pdf src="..." width="750" height="500"></tool-pdf>
<tool-pdf src="..." width="100%" height="${<820?(cwidth*25)/41:500}"></tool-pdf>

AntV X6

在该标签中，X6对象的变量width和height支持TB表达式，但不支持cwidth 在Tool Bench中集成了这项功能，这项功能是默认关闭的以节省页面资源，如果需要使用请在配置中开启它。

AntV X6 图编辑引擎，是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。所有图表 | X6 (antgroup.com)

ER图

代码语言：javascript复制

const LINE_HEIGHT = 24
const NODE_WIDTH = 150

X6.Graph.registerPortLayout(
  'erPortPosition',
  (portsPositionArgs) => {
    return portsPositionArgs.map((_, index) => {
      return {
        position: {
          x: 0,
          y: (index   1) * LINE_HEIGHT,
        },
        angle: 0,
      }
    })
  },
  true,
)

X6.Graph.registerNode(
  'er-rect',
  {
    inherit: 'rect',
    markup: [
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'text',
        selector: 'label',
      },
    ],
    attrs: {
      rect: {
        strokeWidth: 1,
        stroke: '#5F95FF',
        fill: '#5F95FF',
      },
      label: {
        fontWeight: 'bold',
        fill: '#ffffff',
        fontSize: 12,
      },
    },
    ports: {
      groups: {
        list: {
          markup: [
            {
              tagName: 'rect',
              selector: 'portBody',
            },
            {
              tagName: 'text',
              selector: 'portNameLabel',
            },
            {
              tagName: 'text',
              selector: 'portTypeLabel',
            },
          ],
          attrs: {
            portBody: {
              width: NODE_WIDTH,
              height: LINE_HEIGHT,
              strokeWidth: 1,
              stroke: '#5F95FF',
              fill: '#EFF4FF',
              magnet: true,
            },
            portNameLabel: {
              ref: 'portBody',
              refX: 6,
              refY: 6,
              fontSize: 10,
            },
            portTypeLabel: {
              ref: 'portBody',
              refX: 95,
              refY: 6,
              fontSize: 10,
            },
          },
          position: 'erPortPosition',
        },
      },
    },
  },
  true,
)

const graph = new X6.Graph({
  container: document.getElementById('graph_1'),
  width: ${<800?full:800},
  height: 450,
  connecting: {
    router: {
      name: 'er',
      args: {
        offset: 25,
        direction: 'H',
      },
    },
    createEdge() {
      return new Shape.Edge({
        attrs: {
          line: {
            stroke: '#A2B1C3',
            strokeWidth: 2,
          },
        },
      })
    },
  },
})

fetch('https://x6.antv.antgroup.com/data/er.json')
  .then((response) => response.json())
  .then((data) => {
    const cells = []
    data.forEach((item) => {
      if (item.shape === 'edge') {
        cells.push(graph.createEdge(item))
      } else {
        cells.push(graph.createNode(item))
      }
    })
    graph.resetCells(cells)
    graph.zoomToFit({ padding: 10, maxScale: 1 })
  })

代码语言：javascript复制

<div id="graph_1"></div>

<!-- 使用markdown的x6代码块来配置div的antv样式 -->
```x6
const LINE_HEIGHT = 24
const NODE_WIDTH = 150
const graph = new X6.Graph({ // 请参考官方配置...
  container: document.getElementById('graph_1'), // 指向你的div id
  width: ${<800?full:800}, // 支持ToolBench表达式
  height: 450,
  connecting: {
    router: {
      name: 'er',
      args: {
        offset: 25,
        direction: 'H',
      },
    },
    createEdge() {
      return new Shape.Edge({
        attrs: {
          line: {
            stroke: '#A2B1C3',
            strokeWidth: 2,
          },
        },
      })
    },
  },
})
```

AntV G2

在该标签中，G2对象的变量width和height支持TB表达式，但不支持cwidth 在Tool Bench中集成了这项功能，这项功能是默认关闭的以节省页面资源，如果需要使用请在配置中开启它。

AntV G2可视化语法是一套简洁的渐进式可视化语法，用于报表搭建、数据探索以及可视化叙事。所有图表 | G2 (antgroup.com)

柏林噪声场

代码语言：javascript复制

fetch('https://gw.alipayobjects.com/os/antfincdn/OJOgPypkeE/poisson-disk.json')
  .then((res) => res.json())
  .then((poisson) => {
    const chart_5 = new G2.Chart({
      container: 'chart_5',
      theme: 'classic',
      height: ${<600?full:600},
      width: ${<600?full:600},
    });
    const data = poisson.map(([x, y]) => ({
      x,
      y,
      size: (noise(x   2, y)   0.5) * 24,
      rotate: noise(x, y) * 360,
    }));
    chart_5
      .vector()
      .data(data)
      .encode('x', 'x')
      .encode('y', 'y')
      .encode('rotate', 'rotate')
      .encode('size', 'size')
      .encode('color', 'black')
      .scale('size', { range: [6, 20] })
      .axis('x', { grid: false })
      .axis('y', { grid: false })
      .legend(false)
      .tooltip([
        { channel: 'x', valueFormatter: '.2f' },
        { channel: 'y', valueFormatter: '.2f' },
      ]);
    chart_5.render();
  });
const p = [
  151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140,
  36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234,
  75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237,
  149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48,
  27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105,
  92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73,
  209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86,
  164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38,
  147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189,
  28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101,
  155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232,
  178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12,
  191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31,
  181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254,
  138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215,
  61, 156, 180, 151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233,
  7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148,
  247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57,
  177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165,
  71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133,
  230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1,
  216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116,
  188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124,
  123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16,
  58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163,
  70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110,
  79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193,
  238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107,
  49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45,
  127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128,
  195, 78, 66, 215, 61, 156, 180,
];

const noise = octave(perlin2, 2);

function octave(noise, octaves) {
  return function (x, y, z) {
    let total = 0;
    let frequency = 1;
    let amplitude = 1;
    let value = 0;
    for (let i = 0; i < octaves;   i) {
      value  = noise(x * frequency, y * frequency, z * frequency) * amplitude;
      total  = amplitude;
      amplitude *= 0.5;
      frequency *= 2;
    }
    return value / total;
  };
}

function perlin2(x, y) {
  const xi = Math.floor(x),
    yi = Math.floor(y);
  const X = xi & 255,
    Y = yi & 255;
  const u = fade((x -= xi)),
    v = fade((y -= yi));
  const A = p[X]   Y,
    B = p[X   1]   Y;
  return lerp(
    v,
    lerp(u, grad2(p[A], x, y), grad2(p[B], x - 1, y)),
    lerp(u, grad2(p[A   1], x, y - 1), grad2(p[B   1], x - 1, y - 1)),
  );
}

function fade(t) {
  return t * t * t * (t * (t * 6 - 15)   10);
}

function grad2(i, x, y) {
  const v = i & 1 ? y : x;
  return i & 2 ? -v : v;
}

function lerp(t, a, b) {
  return a   t * (b - a);
}

代码语言：javascript复制

<div id="chart_5"></div>

<!-- 使用markdown的g2代码块来配置div的antv样式 -->
```g2
fetch( ... ) // 请参考官方配置...
  .then((res) => res.json())
  .then((poisson) => {
    const chart_5 = new G2.Chart({
      container: 'chart_5', // 指向你的div id
      theme: 'classic',
      height: ${<600?full:600}, // 支持ToolBench表达式
      width: ${<600?full:600}, // 支持ToolBench表达式
    });
    const data = poisson.map(([x, y]) => ({
      x, y,
      size: (noise(x   2, y)   0.5) * 24,
      rotate: noise(x, y) * 360,
    }));
    chart_5
      .vector()
      .legend(false).tooltip([
        { channel: 'x', valueFormatter: '.2f' },
        { channel: 'y', valueFormatter: '.2f' },
      ]);
    chart_5.render();
  });
```

容器 变量 插件 可视化 配置

0 人点赞