Skip to content

内置第三方库

提示

请务必先阅读如何正确使用酒馆助手

点击查看对应文件

Font Awesome

Font Awesome 网站内有非常多图标可供你使用。

示例: 电脑图标

html
<html>
<body>
  <i class="fa-solid fa-laptop-code"></i>
</body>
</html>

JQuery

通过 JQuery,你可以很方便地设置界面 DOM 元素。

示例: 向 body 末尾添加一行文本

html
<html>
  <body>
    <script>
      const variables = {神乐光: {好感度: 5}};
      $("body").append($("<p></p>").text(JSON.stringify(variables)));
    </script>
  </body>
</html>

JQuery UI

通过 JQuery UI,你可以很方便地设置界面 DOM 元素可以如何被交互。

示例: 向 body 末尾添加一行可以拖动的文本

html
<html>
<body>
  <div id="draggable" class="ui-widget-content">
    <p>随意拖动我</p>
  </div>
  <script>
    $(document).ready(function () {
      $("#draggable").draggable();
    });
  </script>
</body>
</html>

Lodash

通过 Lodash,你可以很方便地对 Array、Object 等类型进行操作。

示例

html
<html>
  <body>
    <script>
      const array = _.uniq([13231454]);
      // => array == [1,3,2,4,5]
      $("body").append($("<p></p>").text(JSON.stringify(array)));
    </script>
  </body>
</html>
html
<html>
  <body>
    <script>
      const result = {a: 1,b: 2};
      const source = {b: 3,c: 4};
      _.merge(result,source);
      // => result == {a: 1,b: 3,c: 4}
      $("body").append($("<p></p>").text(JSON.stringify(result)));
    </script>
  </body>
</html>

tailwindcss

tailwindcss 提供了很多原子化的样式,你可以很方便地设置界面样式。

html
<div class="flex flex-col items-center p-7 rounded-2xl">
</div>

toastr

通过 toastr,你可以像酒馆内置报错消息那样弹出成功、提示、警告、错误消息。

示例

html
toastr.error('内容', '标题');

Vue 和 VueRouter

让界面书写变得异常简单.

YAML

允许你像 JavaScript 内置的 JSON 那样解析 yaml 语法。

示例

html
<html>
<body>
  <script>
    const variables =
    {
      角色变量:
      {
        爱城华恋: {
          好感度: 10
        },
        神乐光: {
          好感度: 5
        },
      }
    }
    $("body").append($("<p></p>").text(YAML.stringify(variables)));
  </script>
</body>
</html>
html
<html>
<body>
  <script>
    const variables = `
    角色变量:
      爱城华恋:
        好感度: 10
      神乐光:
        好感度: 5
    `
    $("body").append($("<p></p>").text(JSON.stringify(YAML.parse(variables))));
  </script>
</body>
</html>

zod

允许你简单地解析 JSON 等数据为特定类型:

示例

typescript
// 定义一个手机消息数据类型
type PhoneMessage = z.infer<typeof PhoneMessage>;
const PhoneMessage = z.object({
  name: z.string()        // `name` 是一个字符串
          .catch('络络'),  // 如果 ai 错误输出了数字之类的, 用 '络络'

  content: z.string()
            .default('络络'),  // 如果 ai 忘了输出 `content`, 用 '你好',

  reply_count: z.number().min(1),  // 至少有一条回复

  time: z.iso.time(),
});

const data = JSON.parse(/*假设你从 ai 回复中提取出了一条手机消息*/);
const phone_message = PhoneMessage.parse(message);
console.info(data);
// >> { name: '络络', content: '你好', reply_count: 1, time: '06:15' }
// 如果解析失败, 将会报错
// >> 无效输入: 期望 string,实际接收 undefined

作者:KAKAA, 青空莉想做舞台少女的狗