内置第三方库
提示
请务必先阅读如何正确使用酒馆助手
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([1,3,2,3,1,4,5,4]);
// => 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