王一之 发表于 2023-7-17 00:26:36

脚本猫UI库

(https://github.com/scriptscat/lib/tree/main/src/ui)

特别感谢[@steven026](https://bbs.tampermonkey.net.cn/home.php?mod=space&uid=55086&do=profile)本库主要由其进行开发

# 脚本猫UI库

这是一个类react语法适用于油猴脚本的UI库，底层基于(https://react.dev/)和(https://arco.design/)。

帮助你**快速**构建一个**美观**且**不会影响页面**的UI面板。

!(https://scriptcat.org/api/v2/resource/image/hSFLn7Lmmzar2LI5)

## 使用方式

首先你需要在油猴脚本中[`@require`](https://docs.scriptcat.org/docs/dev/meta/#require)本库，链接已发布在脚本站中：[脚本猫UI库](https://scriptcat.org/script-show-page/1167)

例如下面这样：

```js
// ==UserScript==
// @name      脚本猫UI库
// @namespace   https://scriptcat.org/
// @description 基于Arco做的UI库, 用于快速开发脚本的UI界面
// @version   0.1.0
// @author      You
// @match       https://bbs.tampermonkey.net.cn/
// @require https://scriptcat.org/lib/1167/1.0.0/%E8%84%9A%E6%9C%AC%E7%8C%ABUI%E5%BA%93.js
// ==/UserScript==
```

另外UI库支持两种使用方式，`函数模式`与`JSX模式`。

### 函数模式

函数模式使用js的方式编写组件进行使用

[示例](https://scriptcat.org/script-show-page/1168)

### JSX模式

jsx模式需要将组件写为JSX的字符串模式

[示例](https://scriptcat.org/script-show-page/1169)
## 组件

本框架是基于(https://arco.design/)，你可以在他的官网上看组件相关的文档，调用方式和参数几乎一致，你也可以查看示例来学习如何使用。

szzxc 发表于 2023-7-20 14:29:47

这个主要用来做什么？？是点击右上角的脚本弹出来的对话框或配置吗？

王一之 发表于 2023-7-20 14:32:06

szzxc 发表于 2023-7-20 14:29
这个主要用来做什么？？是点击右上角的脚本弹出来的对话框或配置吗？

主要用来 帮助你快速构建一个美观且不会影响页面的UI面板。

简单说是油猴脚本使用的UI库

哥哥可以看看这个示例
https://scriptcat.org/script-show-page/1168

steven026 发表于 2023-7-20 15:24:29

哥哥觉得用Github Action在push之后自动编译，然后webhook更新脚本站，版本号自动++，如何？

王一之 发表于 2023-7-20 15:25:23

steven026 发表于 2023-7-20 15:24
哥哥觉得用Github Action在push之后自动编译，然后webhook更新脚本站，版本号自动++，如何？ ...
可以的，但是版本号自动++不太好处理，脚本站提供API？github action打tag去处理？好像没什么好方式

steven026 发表于 2023-7-20 15:26:57

王一之 发表于 2023-7-20 15:25
可以的，但是版本号自动++不太好处理，脚本站提供API？github action打tag去处理？好像没什么好方式 ...

改！

或者把版本号在Github Action里面++

王一之 发表于 2023-7-20 15:27:59

steven026 发表于 2023-7-20 15:26
改！

或者把版本号在Github Action里面++

咋改呢？交给哥哥！

last2003 发表于 2024-10-18 17:02:00

请问是只支持部分组件还是全部组件，我想使用Collapse 和CollapseItem，提示没有这样的函数

王一之 发表于 2024-10-21 09:55:28

last2003 发表于 2024-10-18 17:02
请问是只支持部分组件还是全部组件，我想使用Collapse 和CollapseItem，提示没有这样的函数 ...

https://github.com/scriptscat/lib/blob/main/cat_ui/lib/ui.tsx#L6

部分，手动加入的，这是相关源代码，因为没啥人用，也没太维护{:4_115:}

王一之 发表于 2024-10-21 09:55:49

last2003 发表于 2024-10-18 17:02
请问是只支持部分组件还是全部组件，我想使用Collapse 和CollapseItem，提示没有这样的函数 ...

https://github.com/scriptscat/lib/blob/main/cat_ui/lib/ui.tsx#L6

部分，手动加入的，这是相关源代码，因为没啥人用，也没太维护{:4_115:}
页: [1] 2
查看完整版本: 脚本猫UI库