ToolBench样式指南发布于 2

DioxideCN

发布于 2023-10-21 11:41:41

3200

发布于 2023-10-21 11:41:41

文章被收录于专栏：用户4480853的专栏用户4480853的专栏

摘要

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

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

样式指南

内容修饰

居中标题

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

小标签

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

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

装饰标签

折叠块

这是折叠内容

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

GitHub仓库

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

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

进度条

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

彩色分割线

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

分栏内容

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

<!-- {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}

<!-- {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>

提示消息

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

<!-- 标签内支持其他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表达式形如三目运算符，不同的是它被${}符号包裹，并且支持两种运算方式：

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

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

Bilibili视频

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

<!-- 其中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

<!-- 其中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图

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 })
  })

<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)

柏林噪声场

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);
}

<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();
  });
\```

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-07-20，如有侵权请联系 cloudcommunity@tencent.com 删除

容器

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度