open-index/open-npm huggingface dataset:
npm package: @sinlair/reagent
Description: Local-first research workspace and runtime CLI
Latest version: 0.1.10

# ReAgent

ReAgent 是一个 standalone、local-first 的常驻 runtime 和 CLI，用来跑长周期科研工作流。

## 核心定位

- 唯一官方 npm 安装入口是 `@sinlair/reagent`
- 唯一官方命令是 `reagent`
- 主控制面是 CLI
- Web 端只是辅助查看面

## 适合什么场景

- 先写 brief，再做研究
- 持续跟踪同一主题，而不是一次性问答
- 保留 memory、task、report、presentation、artifact
- 让研究过程可恢复、可复盘、可重试

## 快速开始

```bash
npm install
npm run db:push
npm run dev
```

最小本地配置：

```env
LLM_PROVIDER=fallback
WECHAT_PROVIDER=mock
```

如果 PowerShell 阻止 `npm`，请使用 `npm.cmd`。

## 全局安装

```bash
npm install -g @sinlair/reagent
reagent onboard
reagent home
reagent service run
```

## 推荐 CLI 流程

首次启动：

```bash
reagent onboard
reagent home
reagent service run
```

排障：

```bash
reagent doctor
reagent doctor --fix --skip-db
```

日常使用：

```bash
reagent home
reagent runtime status
reagent runtime logs --follow
reagent research recent
reagent research tasks
reagent memory recall "recent research choices"
reagent channels status
```

## 产品形态

ReAgent 的主循环是：

1. `reagent onboard`
2. `reagent home`
3. `reagent service ...`
4. `reagent runtime ...`
5. `reagent research ...`
6. `reagent memory ...`

设计原则只有一条：

- 一个 runtime
- 一个 CLI
- 一个官方包

## 知识和产物

ReAgent 会把研究状态落到文件里，而不是只留在聊天上下文里：

- `MEMORY.md`
- `memory/YYYY-MM-DD.md`
- `memory-index.json`
- `research/task-runs.json`
- `research/rounds/<taskId>/`

研究输出也会保留下来：

- report
- review
- presentation
- module asset

## OpenClaw

OpenClaw 现在只是参考对象和兼容方向，不是主产品安装路径。

如果你要使用 ReAgent，请安装：

```bash
npm install -g @sinlair/reagent
```

## 开发校验

```bash
npm run check:all
npm run test
```

如果只想校验发布链：

```bash
npm run release:verify
npm run release:pack
```

## 文档

- English README: [README.md](./README.md)
- 路线图: [ROADMAP.md](./ROADMAP.md)
- 运维说明: [OPERATIONS.md](./OPERATIONS.md)
- 贡献指南: [CONTRIBUTING.md](./CONTRIBUTING.md)
- 安全说明: [SECURITY.md](./SECURITY.md)
npm package: @sinlair/reagent-sdk
Description: Host and plugin contract types for ReAgent
Latest version: 0.1.1
Deprecated: Internal package. Use @sinlair/reagent instead.

# @sinlair/reagent-sdk

TypeScript contracts for ReAgent host and plugin integration.

Current first-phase scope:

- plugin manifest types and validation
- host API types
- command / tool / service / view registration contracts
- capability and permission declarations

This package is intentionally small. It exists to stabilize the boundary
between the ReAgent host, first-party apps, and installable plugins before
adding a broader plugin ecosystem.
npm package: @sinm/json-table-viewer
Description: render json to table
Author: pansinm
Latest version: 0.1.0

# json table viewer

render json to table

![](./screenshot.png)

## Installation

```bash
npm install @sinm/json-table-viewer
# or
yarn add @sinm/json-table-viewer
```

## Usage
```tsx
import { JSONTableViewer } from '@sinm/json-table-viewer';

<JSONTableViewer json={json} />
```

## Props (extends table props)
| Prop        | Type                       | Required | Description           |
| ----------- | -------------------------- | -------- | --------------------- |
| json        | any                        | true     | data to render        |
| renderKey   | (key: string) => ReactNode | false    | custom key renderer   |
| renderValue | (value: any) => ReactNode  | false    | custom value renderer |
| className   | string                     | false    | table class name      |
| style       | string                     | false    | table style           |
npm package: @sinm/monaco-plantuml
Description: PlantUML extension for monaco editor with better intellisense
Author: pansinm
Latest version: 0.5.6

# monaco-plantuml

monaco editor extension for PlantUML with better intellisense

![](./screenshot.gif)

[Online Demo](https://pansinm.github.io/monaco-plantuml/)

## Installation

```bash
yarn add @sinm/monaco-plantuml
```

## Usage

```ts
import { PUmlExtension } from '@sinm/monaco-plantuml';

const extension = new PUmlExtension();

const disposer = extension.active(editor);

// when destroyed
disposer.dispose();
```
## Run with web worker

### webpack 5
1. create  `puml.worker.ts` file in current directory

```ts
// editor/puml.worker.ts
import '@sinm/monaco-plantuml/lib/puml.worker'
```

2. user worker in `editor.ts` file
```ts
// editor/editor.ts
import { PUmlExtension } from '@sinm/monaco-plantuml';
const worker = new Worker(new URL('./puml.worker.ts', import.meta.url));
const extension = new PUmlExtension(worker);
```

### vite
```ts
import { PUmlExtension } from '@sinm/monaco-plantuml';
import PUmlWorker from '@sinm/monaco-plantuml/lib/puml.worker?worker';
// relative
const worker = new PUmlWorker();
const extension = new PUmlExtension(worker);
```
npm package: @sinm/pipe-charts
Description: pipe bash output to echarts
Author: pansinm
Latest version: 1.2.0

# pipe-charts

Generate charts from bash output.

## Install

```bash
npm install -g @sinm/pipe-charts
```

## Usage
```bash
echo -e "day1 1\nday2 4\nday3 9" | pipe-charts --type bar
```

output:

![image](docs/img-1.png)

## With LLM
```bash
# config envs
echo  "LLM_BASE_URL=https://your-llm-api.com"\nLLM_API_KEY=api_key\nLLM_MODEL=gpt-3.5-turbo\nKROKI_HOST=https://kroki.io/" > ~/.pipe-charts
echo "day1 1\nday2 4\nday3 9" | pipe-charts --prompt "generate pie chart from this data" -o output.png
```

## LICENSE

MIT

This repo use fonts [Source Han Sans](https://github.com/adobe-fonts/source-han-sans/blob/release/LICENSE.txt)
npm package: @sinm/prism-line-break
Description: prism line break
Author: pansinm
Latest version: 1.1.0

# Prism Line Break
![](./img/break-line.png)

## Installation

```bash
npm install @sinm/prism-line-break
```

## Usage
```js
import Prism from 'prismjs/components/prism-core';

import 'prismjs/plugins/line-numbers/prism-line-numbers';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';

import lineBreak from '@sinm/prism-line-break';

/**
 * <pre class="line-numbers">
 *   <code class="language-js">
 *    ...
 *   </code>
 * </pre> 
 */
const code = document.queySelect('code');
Prism.highlightElement(codeRef.current);
setTimeout(() => lineBreak(code), 0);
```
npm package: @sinm/react-file-tree
Description: react file tree 
Author: pansinm
Latest version: 1.1.1

# react-file-tree

![](./assets/appearence.png)

## Install

```bash
yarn add @sinm/react-file-tree
```

## Usage

1. Render tree

```tsx
import { FileTree } from '@sinm/react-file-tree';
// default style
import '@sinm/react-file-tree/styles.css';

const [tree, setTree] = useState(defaultTree);

<FileTree tree={tree}>
```

2. Toggle expanded

```tsx
import { utils } from "@sinm/react-file-tree";

const toggleExpanded: FileTreeProps["onItemClick"] = (treeNode) => {
  setTree((tree) =>
    utils.assignTreeNode(tree, treeNode.uri, { expanded: !treeNode.expanded })
  );
};

<FileTree tree={tree} onItemClick={toggleExpanded} />;
```

3. use [github-file-icons](https://github.com/homerchen19/github-file-icons)

```tsx
import FileItemWithFileIcon from '@sinm/react-file-tree/lib/FileItemWithFileIcon';
// import { getFileIconClass } from '@sinm/react-file-tree/lib/FileItemWithFileIcon';
import '@sinm/react-file-tree/icons.css';
const itemRenderer = (treeNode: TreeNode) => <FileItemWithFileIcon treeNode={treeNode} />

<FileTree tree={tree} itemRenderer={itemRenderer} />
```

4. Sort tree items

```tsx
import orderBy from "lodash/orderBy";

// directory first and filename dict sort
const sorter = (treeNodes: TreeNode[]) =>
  orderBy(
    treeNodes,
    [
      (node) => (node.type === "directory" ? 0 : 1),
      (node) => utils.getFileName(node.uri),
    ],
    ["asc", "asc"]
  );

<FileTree tree={tree} sorter={sorter} />
```

5. Load tree from server

```tsx
// backend
import { getTreeNode } from "@sinm/react-file-tree/lib/node";

app.get("/root", async (req, res, next) => {
  try {
    const tree = await getTreeNode("."); // build tree for current directory
    res.send(tree);
  } catch (err) {
    next(err);
  }
});

// frontend
useEffect(() => {
  fetch("/root")
    .then((res) => res.json())
    // expand root node
    .then((tree) => Object.assign(tree, { expanded: true }))
    .then(setTree);
}, []);
```
6. activated style
```css
.file-tree__tree-item.activated {
  background: rgba(0, 0, 0, 0.1);
}
```

```tsx
<FileTree tree={tree} activatedUri={uri}>
```

## Demo

```
git clone https://github.com/pansinm/react-file-tree.git
cd react-file-tree
yarn
git submodule update --init --recursive
yarn start
```
npm package: @sinnerjoe/svelte-touch-datepicker
Description: Native like touch datepicker for Svelte
Author: Radu Cebotari
Latest version: 2.1.1

# Native like date-picker for Svelte (With wheel control for desktop)

<p>
  <a href="https://www.npmjs.com/package/svelte-touch-datepicker"><img  src="https://img.shields.io/npm/v/svelte-touch-datepicker?style=for-the-badge"/></a>
  <a href="https://www.npmjs.com/package/svelte-touch-datepicker">
    <img src="https://img.shields.io/npm/dm/svelte-touch-datepicker?style=for-the-badge"/>
  </a>
  <a href="https://svelte.dev"><img  src="https://img.shields.io/badge/svelte-v3-blueviolet?style=for-the-badge"/></a>
</p>


## 🚀[See it in Action](https://sinnerJoe.github.io/svelte-touch-datepicker/)

## Installation

```bash
npm i -D svelte-touch-datepicker
```

## Usage

```html
<script>
  import DatePicker  from "svelte-touch-datepicker";

  let date = new Date();
  $: _date = date.toLocaleDateString("en-US");

</script>

<style>

  .container{
    height: 100%;
    width: 100%;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font: 20px 'Roboto', sans-serif;
  }
</style>

<div class="container" >
  <div class="center">
    <p>Date: {_date}</p>
    <DatePicker bind:date />
  </div>
</div>

```

## Custom events

```html
<script>
  function callback(event) {
    // you will find the `date` object in event.detail
  }
</script>

<DatePicker
  on:dateChange={callback}
  on:confirmDate={callback2}
/>


```

## Default css custom properties

```css

  :root{
    --svtd-popup-bg-color: white;
    --svtd-popup-color: black;
    --svtd-popup-radius: 10px;
    --svtd-font-size: 20px;
    --svtd-button-color: black;
    --svtd-button-bg-color: transparent;
    --svtd-border: 1px solid grey;
    --svtd-button-box-shadow: none;
    --svtd-bar-color: grey;
  }
```

## Props

| Name | Type | Description | Required | Default |
| --- | --- | --- | --- | --- |
| `date` | `object` | default date object | yes | `new Date()` |
| `visible` | `Boolean` | Popup visibility | No | `false` |
| `startDate` | `Date` | The beginning of the interval that can be picked | No | `new Date(1900, 0, 1)` |
| `endDate` | `Date` | The end of the interval that can be picked | No | `new Date(2100, 11, 31)` |
| `classes` | `String` | custom classes attached to the input | No | `empty string` |
npm package: @sinners/stickerbot-wa-nodejs
Description: A WhatsApp Sticker Bot built with JavaScript.
Author: sinners
Latest version: 1.0.3

# Jomok Sticker Bot

## Description
Jomok Sticker Bot is a WhatsApp bot that allows users to create stickers from images, videos, and GIFs effortlessly.

## Key Features
- Create stickers from images, videos, and GIFs.
- Supports both group and private messages.
- User-friendly sticker creation without user intervention.
  
## Prerequisites
Make sure you have Node.js installed before proceeding. You can download and install Node.js from the official website: [Node.js Official Website](https://nodejs.org/)

## Installation

1. Clone this repository:
   ```bash
   git clone https://github.com/Alfinpratamaa/stickerBot-wa-nodejs.git
   cd stickerBot-wa-nodejs
   ```
2. install dependencies 
   ```bash
    npm i
   ```
3. run the apps
   ```bash
   npm start
   ```
  
## How to use bot on whatsapp

1. use whatsapp account
2. go to linked devices on the menu
3. scan qr that's showed on terminal
4. great !! sticker bot has activated on your whatsapp account
5. now your friend can use command  <span style='font-weight: 800;'>'.sticker'</span>   on capion of pic

## New function !

Now you can revert your sticker into media!
Use command .image to revert your stiker into media
npm package: @sinodevi/web3-react-venly
Description: Venly connector for Web3-React
Author: David Fu
Latest version: 1.2.1

# @venly/web3-react-venly

Venly connector for [web3-react](https://www.npmjs.com/package/web3-react)

### Example

```javascript
import { initializeConnector } from '@web3-react/core'
import { Venly } from '@venly/web3-react-venly';

export const [venly, hooks] = initializeConnector<Venly>(
  (actions) =>
    new Venly({
      actions,
      options: {
        clientId: 'YOUR_CLIENT_ID',
        environment: 'staging', //optional, defaults to production
        skipAuthentication: false
      },
    })
)
```

## Documentation
The full documentation of the Venly Web3 Provider can be found here: https://docs.venly.io/widget/web3-provider/getting-started

## What is Venly Wallet
Not sure yet what Venly is all about? Be sure to check out our website: https://www.venly.io/
npm package: @sinoform/app-context
Description: 智能表单应用使用到的上下文。
Latest version: 1.18.11

# @sinoform/app-context

智能表单应用使用到的上下文。

## 权限

### PermissionContext

创建权限上下文：

```tsx
import { PermissionContext } from '@sinoform/app-context';
import type { Permission } from '@sinoform/types';
import { usePermissionHelper } from '@sinoform/helper-permission';

function FormPage() {
  const { formData,  formState } = useDetailPage();
  const permission = usePermissionHelper(formData,formState);

  return <PermissionContext.Provider value={permission}>
    <Form>
      ...
    </Form>
    <Buttons />
  </PermissionContext>;
}
```

### usePermission

使用权限上下文：

```tsx
import type { ButtonConfig } from '@sinoform/types';
import { usePermission } from '@sinoform/app-context';

function Buttons() {
  const buttons: ButtonConfig = ...; // 获取到的按钮数据
  const permission = usePermission(); // 从权限上下文中取权限数据

    const renderButton = (button: ButtonConfig) => {
      return <Button {...button}/>
    };

  return <>
    {buttons
      .filter(button => !permission.isHidden(button.name))
      .map(button => renderButton(button))
    }
  </>
}
```

## 表单数据

### FormDataContext

创建表单数据上下文

```ts
import { FormDataContext } from '@sinoform/app-context';

function DetailPage() {
    const formDataContext = ...;// 表单数据上下文中的value
  return <FormDataContext.Provider value={formDataContext}>
          <MainFormPanel/>
         </FormDataContext.Provider>
}
```

### 使用表单数据

使用表单数据上下文

```ts
import { useFormData } from '@sinoform/app-context';

const FlowChartPanel: React.SFC = () => {
  const { formData, formState, formHelpers, workItemId } = useFormData();

  return <div>...</div>;
};
```

## 二次开发

### FormAppSettingContext

创建二次开发上下文

```ts
import { FormAppSettingContext } from '@sinoform/app-context';
import FlowConfigBuilder from '@sinoform/flow-config-builder-new';
import flowConfigBase from '@sinoform/flow-config-base';
import FormConfigBuilder from '@sinoform/form-config-builder-new';
import formConfigBase from '@sinoform/form-config-base';

function App() {
  const newFlowConfig = FlowConfigBuilder.from(base)
  .updateButton('save', {
    name: '修改保存按钮名称',
  })
  .addButton('auditFailed', '审核不通过', AuditFailedButton, {
    enabled: true,
    hidden: false,
  })
  .removeButton('send')
  .build();

  const newFormConfig = ...;

  return <FormAppSettingContext.Provider value={{
          flowConfig: newFlowConfig,
          formConfig: newFormConfig
        }}>
          <MainFormPanel/>
         </FormAppSettingContext.Provider>
}
```
npm package: @sinoform/app-setting
Description: > appSetting 为默认全局配置，其中包括表单配置、流程按钮配置、打印输出配置、仪表盘图表配置以及业务逻辑扩展配置。
Latest version: 1.18.11

# app-setting

> appSetting 为默认全局配置，其中包括表单配置、流程按钮配置、打印输出配置、仪表盘图表配置以及业务逻辑扩展配置。

模块结构：

```
packages
|__ app-setting
    |__ src
        |__ print-out-config
        |__ form-config
        |__ flow-config
        |__ dashboard-config
        |__ detail-page-extend-config
        |__ index.tsx
```

对外导出的 appSetting 数据结构如下：

```ts
interface AppSetting {
  /**
   * 表单配置
   */
  formConfig: FormConfig;
  /**
   * 流程配置
   */
  flowConfig: FlowConfig;
  /**
   * 打印输出配置
   */
  printOutConfig: PrintOutSetting;
  /**
   * 图表配置
   */
  dashboardConfig: DashboardConfig;
}
```

使用方式：

```tsx
import appSetting from '@sinoform/app-setting';

const { formConfig } = appSetting;

formConfig.addField({...}); // 新增字段配置
formConfig.field('input'); // 获取指定type的字段配置
formConfig.formConfigPanel = React.lazy(()=>import('@sinoform/form-config-panel'));  // 指定表单属性设置面板
```

使用规则：

除`form-designer`模块外，其他模块使用 appSetting 时，均需要从`@sinoform/app-setting`中直接引入。

`form-designer`模块中如果需要使用 conifg 配置，方式如下：

```tsx
const { formConfig } = useFormDesignerFormConfig();

formConfig.field('input'); // 获取表单字段配置
```
npm package: @sinoform/comp-auto-select-input
Description: 获取焦点时自动选中的输入框组件
Latest version: 0.1.0

# @sinoform/comp-auto-select-input

获取焦点时自动选中的输入框组件

## 安装

```shell
yarn add @sinoform/comp-auto-select-input
```

## 使用

```tsx
import AutoSelectInput from '@sinoform/comp-auto-select-input';

<AutoSelectInput />;
```
npm package: @sinoform/comp-clickable
Description: 可点击元素组件。
Latest version: 1.17.0

# @sinoform/comp-clickable

可点击元素组件。

使用方式：

```tsx
import Clickable from '@sinoform/comp-clickable';

<Clickable as={'button'} onClick={() => console.log('我被点击了')}>
  按钮
</Clickable>;
```
npm package: @sinoform/comp-config-item
Description: 表单字段项配置布局组件。
Latest version: 1.17.0

# @sinoform/comp-config-item

表单字段项配置布局组件。

## 安装

```shell
yarn add @sinoform/comp-config-item
```

## 使用

```tsx
import { TextInput, Label, Form } from '@sinoui/sinoui-components-forms';
import ConfigItem from '@sinoform/comp-config-item';

function SimpleDemo() {
  return (
    <Form>
      <ConfigItem>
        <Label>用户名</Label>
        <TextInput />
      </ConfigItem>
    </Form>
  );
}
```
npm package: @sinoform/comp-custom-print-layout
Description: ## 拖拽功能实现
Latest version: 1.18.11

# 自定义布局

## 拖拽功能实现

主要分为两个布局区域：表单项列表区域和自定义布局区域。拖拽功能的目标是将拖拽的表单项信息写入到自定义布局的单元格中。两个区域的组件可以独立开发，但需要两部分的组件共同完成整个拖拽过程，所以我们需要做一些约定来保证拖拽功能的实现。

- 表单项列表

在拖拽的开始阶段将拖拽的表单项信息写入到 event 事件的 dataTransfer 数据中，保证自定义布局组件能获取到当前拖拽的表单项信息。

```tsx
const handleDragStart = (event: any) => {
  // 定义当前拖拽的表单项信息
  const field = {
    ...item,
    fullId: `${
      parent ? `${parent.fieldName}.${item.fieldName}` : item.fieldName
    }`,
  };
  // 将表单项信息写入到event事件数据中
  event.dataTransfer.setData('field', JSON.stringify(field));
};
```

> 表单项数据中额外加了 `valueExp` 字段，表示包含父表单项在内的完整的表单名称路径

- 自定义布局组件

监听`onDragOver`事件，判断当前鼠标的悬浮位置是否支持释放鼠标

```tsx
const handleTdDragOver = (event: any) => {
  const target = closet(event.target as any, 'td') as HTMLElement;
  if (target && target.dataset?.rowid && target.dataset?.colid) {
    event.preventDefault();
  }
};
```

监听`onDrop`事件，处理鼠标释放之后的单元格内容变更

```ts
const handleTdDrop = (event: any) => {
  const target = closet(event.target as any, 'td') as HTMLElement;
  let field = event.dataTransfer.getData('field');
  if (!target || !target.dataset?.rowid || !target.dataset?.colid || !field) {
    return;
  }
  // 单元格内容处理 ...
};
```
npm package: @sinoform/comp-dept-select
Description: 人员部门选择配置面板中设置自定义部门范围的组件
Latest version: 0.1.1

# @sinoform/comp-dept-select

人员部门选择配置面板中设置自定义部门范围的组件

## 安装

```shell
yarn add @sinoform/comp-dept-select
```
npm package: @sinoform/comp-field-preview
Description: 字段预览组件。
Latest version: 0.1.0

# @sinoform/comp-field-preview

字段预览组件。

## 安装

```shell
yarn add @sinoform/comp-field-preview
```

## 使用

```tsx
import FieldPreview from '@sinoform/comp-field-preview';

function Demo() {
  return <FieldPreview>...</FieldPreview>;
}
```
npm package: @sinoform/comp-layout-config-item
Description: 字段项在表单中布局的设置组件。
Latest version: 0.1.0

# @sinoform/comp-layout-config-item

字段项在表单中布局的设置组件。

## 安装

```shell
yarn add @sinoform/comp-layout-config-item
```

## 使用

需要在`Form`上下文中使用。

```tsx
import { Form } from '@sinoui/sinoui-components-forms';
import LayoutConfigItem from '@sinoform/comp-layout-config-item';

function Demo() {
  return (
    <Form>
      <LayoutConfigItem />
    </Form>
  );
}
```
npm package: @sinoform/comp-option-list
Description: 选项列表组件
Latest version: 0.1.0

# @sinoform/comp-option-list

选项列表组件

## 安装

```shell
yarn add @sinoform/comp-option-list
```

## 使用

需要在 Form 上下文中使用：

```tsx
import MaintainableOptionListField from '@sinoform/comp-option-list';

function Demo() {
  return (
    <Form>
      <MaintainableOptionListField />
    </Form>
  );
}
```
npm package: @sinoform/comp-select-for-todo-title
Description: 设置是否作为待办标题的组件。
Latest version: 0.1.1

# @sinoform/comp-select-for-todo-title

设置是否作为待办标题的组件。

## 安装

```shell
yarn add @sinoform/comp-select-for-todo-title
```

## 使用

需要在 Form 上下文中使用。

```tsx
import SelectForTodoTitle from '@sinoform/comp-select-for-todo-title';
import { Form } from '@sinoui/sinoui-components-forms';

function Demo() {
  return (
    <Form>
      <SelectForTodoTitle />
    </Form>
  );
}
```
npm package: @sinoform/comp-width-tabs
Description: 宽度设置组件。
Latest version: 0.1.0

# @sinoform/comp-width-tabs

宽度设置组件。

## 安装

```shell
yarn add @sinoform/comp-width-tabs
```

## 使用

需要在`FormState`的上下文中使用。

```tsx
import WidthTabs from '@sinoform/comp-width-tabs';
import { Form } from '@sinoui/sinoui-components-forms';

function Demo() {
  return (
    <Form>
      <WidthTabs />
    </Form>
  );
}
```
npm package: @sinoform/field-address-selector
Description: 地址选择字段模块。
Latest version: 0.1.0

# @sinoform/field-address-selector

地址选择字段模块。

## 安装

```shell
yarn add @sinoform/field-address-selector
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import addressSelector from '@sinoform/field-address-selector';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(addressSelector);
```
npm package: @sinoform/field-checkbox-group
Description: 复选框按钮组字段模块。
Latest version: 0.1.1

# @sinoform/field-checkbox-group

复选框按钮组字段模块。

## 安装

```shell
yarn add @sinoform/field-checkbox-group
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import CheckboxGroup from '@sinoform/field-checkbox-group';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(CheckboxGroup);
```
npm package: @sinoform/field-date-range
Description: 日期区间字段模块。
Latest version: 0.1.0

# @sinoform/field-date-range

日期区间字段模块。

## 安装

```shell
yarn add @sinoform/field-date-range
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import DateRange from '@sinoform/field-date-range';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(DateRange);
```
npm package: @sinoform/field-datepicker
Description: 日期选择字段模块。
Latest version: 0.1.0

# @sinoform/field-datepicker

日期选择字段模块。

## 安装

```shell
yarn add @sinoform/field-datepicker
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import Datepicker from '@sinoform/field-datepicker';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(Datepicker);
```
npm package: @sinoform/field-dept-select
Description: 部门选择字段模块。
Latest version: 0.1.1

# @sinoform/field-dept-select

部门选择字段模块。

## 安装

```shell
yarn add @sinoform/field-dept-select
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import deptSelect from '@sinoform/field-dept-select';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(deptSelect);
```
npm package: @sinoform/field-file-upload
Description: 附件上传字段模块
Latest version: 0.1.0

# @sinoform/field-file-upload

附件上传字段模块

## 安装

```shell
yarn add @sinoform/field-file-upload
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import fileUpload from '@sinoform/field-file-upload';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(fileUpload);
```
npm package: @sinoform/field-input
Description: 单行文本输入框字段模块。
Latest version: 0.1.1

# @sinoform/field-input

单行文本输入框字段模块。

## 安装

```shell
yarn add @sinoform/field-input
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import FieldInput from '@sinoform/field-input';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(FieldInput);
```
npm package: @sinoform/field-number-input
Description: 数字输入框字段模块。
Latest version: 0.1.0

# @sinoform/field-number-input

数字输入框字段模块。

## 安装

```shell
yarn add @sinoform/field-number-input
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import FieldNumberInput from '@sinoform/field-number-input';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(FieldNumberInput);
```
npm package: @sinoform/field-radio-group
Description: 单选按钮组字段模块。
Latest version: 0.1.1

# @sinoform/field-radio-group

单选按钮组字段模块。

## 安装

```shell
yarn add @sinoform/field-radio-group
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import RadioGroup from '@sinoform/field-radio-group';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(RadioGroup);
```
npm package: @sinoform/field-select
Description: 下拉选择字段模块。
Latest version: 0.1.0

# @sinoform/field-select

下拉选择字段模块。

## 安装

```shell
yarn add @sinoform/field-select
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import Select from '@sinoform/field-select';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(Select);
```
npm package: @sinoform/field-subform
Description: 子表单字段模块。
Latest version: 0.1.0

# @sinoform/field-subform

子表单字段模块。

## 安装

```shell
yarn add @sinoform/field-subform
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import FieldSubform from '@sinoform/field-subform';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(FieldSubform);
```
npm package: @sinoform/field-textarea
Description: 多行文本字段模块。
Latest version: 0.1.0

# @sinoform/field-textarea

多行文本字段模块。

## 安装

```shell
yarn add @sinoform/field-textarea
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import FieldTextarea from '@sinoform/field-textarea';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(FieldTextarea);
```
npm package: @sinoform/field-timepicker
Description: 日期选择字段模块。
Latest version: 0.1.0

# @sinoform/field-datepicker

日期选择字段模块。

## 安装

```shell
yarn add @sinoform/field-datepicker
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import Datepicker from '@sinoform/field-datepicker';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(Datepicker);
```
npm package: @sinoform/field-user-select
Description: 人员选择字段模块。
Latest version: 0.1.1

# @sinoform/field-user-select

人员选择字段模块。

## 安装

```shell
yarn add @sinoform/field-user-select
```

## 使用

与 `form-config-builder` 结合使用：

```tsx
import userSelect from '@sinoform/field-user-select';
import FormConfigBuilder from '@sinoform/form-config-builder';
import base from '@sinoform/form-config-base';

FormConfigBuilder.from(base).addPlugin(userSelect);
```
npm package: @sinoform/flow-chart
Description: ```tsx import FlowChart, { formatFlowChartData, } from '@sinoform/flow-chart';
Latest version: 0.1.0

# 流程图 FlowChart

```tsx
import FlowChart, {
  formatFlowChartData,
} from '@sinoform/flow-chart';

function Demo({ flowConfig }) {
  const { nodes, lines } = flowConfig;
  const { data } = useDataApi('/api/flow-chart');
  const flowChartData = useMemo(() => formatFlowChartData(nodes, lines, data), [
    nodes,
    lines,
    data,
  ]); // formatFlowChartData() 方法会将工作流引擎返回的数据结构转换成 FlowChart 组件内部支持的数据结构

  return <FlowChart data={data} />;
}
```
npm package: @sinoform/flow-route-control-exec-context
Description: 提供流程控制公式执行上下文:
Latest version: 1.18.11

# flow-route-control-exec-context

提供流程控制公式执行上下文:

- 读取字段数据
- 定义各种操作符实际的执行逻辑（如等于、大于、包含等）

示例：

```ts
import buildExecContext from '@sinoform/flow-route-control-exec-context';
import interpreter from '@sinoform/flow-control-expression';

// 创建公式的执行环境
const execContext = buildExecContext(formData, currentUser);
// 解析并执行公式（备注，在执行公式时，需要通过execContext获取到表单字段的值以及各个操作符如何执行比较关系的函数）
const result = interpreter('发送人单位 == "公文处"', execContext);
```
npm package: @sinoform/flow-status-chart
Description: ```tsx import FlowChart, { formatFlowChartData, } from '@sinoform/flow-chart';
Latest version: 0.1.0

# 流程图 FlowChart

```tsx
import FlowChart, {
  formatFlowChartData,
} from '@sinoform/flow-chart';

function Demo({ flowConfig }) {
  const { nodes, lines } = flowConfig;
  const { data } = useDataApi('/api/flow-chart');
  const flowChartData = useMemo(() => formatFlowChartData(nodes, lines, data), [
    nodes,
    lines,
    data,
  ]); // formatFlowChartData() 方法会将工作流引擎返回的数据结构转换成 FlowChart 组件内部支持的数据结构

  return <FlowChart data={data} />;
}
```
npm package: @sinoform/global-ui
Description: 此模块主要用来做全局基础 UI 的替换，目前仅支持 message 和 Confirm 两个组件。
Latest version: 1.18.11

# @sinoform/global-ui

此模块主要用来做全局基础 UI 的替换，目前仅支持 message 和 Confirm 两个组件。

## 使用方式

```javascript
import globalUI from '@sinoform/global-ui';

globalUI.message.info('xxx');

<globalUI.Confirm
  message="xxx"
  onOk={() => console.log('确定按钮被点击')}
></globalUI.Confirm>;
```
npm package: @sinoform/helper-get-fields-permisson
Description: 需要处理以下特性对表单项可见性的影响：
Latest version: 1.11.8

# 获取表单项权限的帮助类

需要处理以下特性对表单项可见性的影响：

- 选项关联

## 使用方式

```typescript
import { useFieldsPermission } from '@sinoform/helper-get-fields-permission';

function useDetailPageData() {
  /**
   * 获取表单项的权限
   */
  const fieldsPermission = useFieldsPermission(
    formDesignSetting,
    formState,
    basePermissions,
  );

  const formDataContext = {
    asyncPermission: fieldsPermission,
  };

  return {
    formDataContext,
  };
}
```

## 选项关联

带有选项的表单项是可以通过选项关联来控制表单项的可见性的。规则：

单选按钮组（`表单项0`）有 A、B、C 三个选项，其中 A 选项关联显示 `表单项1`，B 选项关联显示 `表单项2`，C 选项关联显示 `表单项3`，表单上还有其他的表单项 `表单项4`、`表单项5`，如果单选按钮组选中的选项是 `表单项1`，那么应该出现以下表单项：

- 表单项 0
- 表单项 1
- 表单项 4
- 表单项 5

### 支持的表单项

以下内置的表单项均支持：

- 单选按钮组
- 复选按钮组
- 下拉选择框（单选、多选）

其他表单项只要具有以下两个重要特性，也会被认为是支持选项关联的表单项：

- 特性一：表单项配置有 `fieldsMapConfig` 字段
- 特性二：能够从 `formValues` 中自动获取到选项值

#### 特性一

特性一很好满足，在表单设计器的字段属性面板中添加上 `设置选项关联` 按钮就可以了。采用 `@sinoform/comp-fields-map-config` 模块导出的 `FieldsMapConfigButton` 组件即可，例如：

```tsx
import FieldsMapConfigButton from '@sinoform/comp-fields-map-config';

<ConfigPanel>
  <FieldsMapConfigButton />
</ConfigPanel>;
```

#### 特性二

表单项的值需要包含选中的选项值，并且符合下面几种数据格式中的一种即可：

1. 数据格式 1：选中的选项值直接作为表单项的值

   ```json
   {
     "field_name": "option1"
   }
   ```

2. 数据格式 2：选中的选项标题直接作为表单项的值

   ```json
   {
     "field_name": "选项一"
   }
   ```

3. 数据格式 3：多个选中的选项值数组作为表单项的值

   ```json
   {
     "field_name": ["option1", "option2"]
   }
   ```

4. 数据格式 4：多个选中的选项标题数组作为表单项的值

   ```json
   {
     "field_name": ["选项一", "选项二"]
   }
   ```

5. 数据格式 5：带有 `selectedId` 字段的对象作为表单项值（单选按钮组采用此数据格式）

   ```json
   {
     "field_name": {
       "selectedId": "option1"
     }
   }
   ```

6. 数据格式 6：带有 `selectedIds` 字段的对象作为表单项值（复选按钮组采用此数据格式）

   ```json
   {
     "field_name": {
       "selectedIds": ["option1", "option2"]
     }
   }
   ```

### 级联的选项关联规则

例如 `表单项A` 控制 `表单项B` 和 `表单项C`，`表单项B` 控制 `表单项D`，`表单项C` 控制 `表单项E` 和 `表单项F`。如果 `表单项A` 是不可见的，那么以下表单项均不可见：

- 表单项 B
- 表单项 C
- 表单项 D
- 表单项 E
- 表单项 F

### 非关联的表单项

此权限计算不会处理非关联的表单项，即使是带有关联选项表单项之后的表单项。
npm package: @sinoform/helper-get-todo-title
Description: 获取流程待办标题按照下列顺序排优先级：
Latest version: 1.18.11

# 获取表单流程待办标题

获取流程待办标题按照下列顺序排优先级：

- 首先根据自定义公式获取待办标题
- 根据文本输入框设置是否作为待办标题获取
- 如果上述两个都没设置，直接取表单的第一个文本输入框的值作为待办标题
- 上述都不成立，直接取表单标题

## 公式设置规则

自定义流程待办标题支持编写公式，如`{拟稿人}于{拟稿时间}发出的申请`，我们将会动态解析`{}`中的值。

关于公式参数说明：

- 支持除布局字段、附件上传字段之外的所有字段，使用字段标题或标识均可
- 支持拟稿人、创建人、流程发起人、填报人（均解析为拟稿人）
- 支持拟稿人部门、填报人部门、流程发起人部门、创建部门（均解析为创建部门）
- 支持创建时间、拟稿时间（均解析为拟稿时间）
- 支持发送人、办理人、当前登录人（均解析为当前登录人）
- 支持办理时间、发送时间（均解析为办理时间）
npm package: @sinoform/helper-permission
Description: 权限辅助工具。
Latest version: 1.18.11

# @sinoform/helper-permission

权限辅助工具。

使用方法：

```tsx
import type { Permission } from '@sinoform/types';
import { usePermissionHelper } from '@sinoform/helper-permission';

const { formData, formState, hooks } = useDetailPage();
const permissionHelper = usePermissionHelper(
  formData,
  formState,
  hooks.permission,
);

// 判断字段 `field_1` 的编辑权限
permissionHelper.isReadOnly('field_1');
// 判断字段 `field_1` 的可见性（注意：第二个参数须为 `false`，表示默认的`hidden` 是 `false`，而不是`permission.hidden`）
permissionHelper.isHidden('field_1', false);
// 判断按钮 `save-button` 的可见性
permissionHelper.isHidden('save-button');
```

## 获取表单项权限的帮助类

需要处理以下特性对表单项可见性的影响：

- 选项关联

### 使用方式

```typescript
import { useFieldsPermission } from '@sinoform/helper-get-fields-permission';

function useDetailPageData() {
  /**
   * 获取表单项的权限
   */
  const fieldsPermission = useFieldsPermission(
    formDesignSetting,
    formState,
    basePermissions,
  );

  const formDataContext = {
    asyncPermission: fieldsPermission,
  };

  return {
    formDataContext,
  };
}
```

### 选项关联

带有选项的表单项是可以通过选项关联来控制表单项的可见性的。规则：

单选按钮组（`表单项0`）有 A、B、C 三个选项，其中 A 选项关联显示 `表单项1`，B 选项关联显示 `表单项2`，C 选项关联显示 `表单项3`，表单上还有其他的表单项 `表单项4`、`表单项5`，如果单选按钮组选中的选项是 `表单项1`，那么应该出现以下表单项：

- 表单项 0
- 表单项 1
- 表单项 4
- 表单项 5

#### 支持的表单项

以下内置的表单项均支持：

- 单选按钮组
- 复选按钮组
- 下拉选择框（单选、多选）

其他表单项只要具有以下两个重要特性，也会被认为是支持选项关联的表单项：

- 特性一：表单项配置有 `fieldsMapConfig` 字段
- 特性二：能够从 `formValues` 中自动获取到选项值

##### 特性一

特性一很好满足，在表单设计器的字段属性面板中添加上 `设置选项关联` 按钮就可以了。采用 `@sinoform/comp-fields-map-config` 模块导出的 `FieldsMapConfigButton` 组件即可，例如：

```tsx
import FieldsMapConfigButton from '@sinoform/comp-fields-map-config';

<ConfigPanel>
  <FieldsMapConfigButton />
</ConfigPanel>;
```

##### 特性二

表单项的值需要包含选中的选项值，并且符合下面几种数据格式中的一种即可：

1. 数据格式 1：选中的选项值直接作为表单项的值

   ```json
   {
     "field_name": "option1"
   }
   ```

2. 数据格式 2：选中的选项标题直接作为表单项的值

   ```json
   {
     "field_name": "选项一"
   }
   ```

3. 数据格式 3：多个选中的选项值数组作为表单项的值

   ```json
   {
     "field_name": ["option1", "option2"]
   }
   ```

4. 数据格式 4：多个选中的选项标题数组作为表单项的值

   ```json
   {
     "field_name": ["选项一", "选项二"]
   }
   ```

5. 数据格式 5：带有 `selectedId` 字段的对象作为表单项值（单选按钮组采用此数据格式）

   ```json
   {
     "field_name": {
       "selectedId": "option1"
     }
   }
   ```

6. 数据格式 6：带有 `selectedIds` 字段的对象作为表单项值（复选按钮组采用此数据格式）

   ```json
   {
     "field_name": {
       "selectedIds": ["option1", "option2"]
     }
   }
   ```

#### 级联的选项关联规则

例如 `表单项A` 控制 `表单项B` 和 `表单项C`，`表单项B` 控制 `表单项D`，`表单项C` 控制 `表单项E` 和 `表单项F`。如果 `表单项A` 是不可见的，那么以下表单项均不可见：

- 表单项 B
- 表单项 C
- 表单项 D
- 表单项 E
- 表单项 F

#### 非关联的表单项

此权限计算不会处理非关联的表单项，即使是带有关联选项表单项之后的表单项。
npm package: @sinoform/helper-proxy-form-data
Description: 在很多情况下，需要通过表单项的标题（中文名称）获取表单项的值，例如打印输出和路由控制。 `helper-proxy-form-data`模块是用来帮助通过表单项标题获取表单项的值。
Latest version: 1.18.11

# helper-proxy-form-data

在很多情况下，需要通过表单项的标题（中文名称）获取表单项的值，例如打印输出和路由控制。 `helper-proxy-form-data`模块是用来帮助通过表单项标题获取表单项的值。

## 安装

```shell
yarn add @sinoform/helper-proxy-form-data
```

## 使用

```ts
import proxyFormData from '@sinoform/helper-proxy-form-data';

const formData = {
  field_1: '张三',
};

const formItems = [
  {
    fieldId: 'field_1',
    title: '姓名',
  },
];

const proxyedFormData = proxyFormData(formData, formItems);

console.log(proxyedFormData.姓名); // 输出：张三
console.log(proxyedFormDAta.field_1); // 输出：张三
```

或者指定 FormData 对象：

```ts
import proxyFormData from '@sinoform/helper-proxy-form-data';

// formData 是表单应用中的 FormData 类型的表单上下文数据
const proxyedFormValues = proxyFormData(formData);
```
npm package: @sinoform/helper-search-values
Description: 用于创建查询数据对象的模块。
Latest version: 1.18.11

# @sinoform/helper-search-values

用于创建查询数据对象的模块。

```typescript
import getSearchValues from '@sinoform/helper-search-values';

const searchValues = getSearchValues(formDesignSetting, formValues);
```
npm package: @sinoform/helper-user-info
Description: 用户信息辅助模块。
Latest version: 1.18.11

# helper-user-info

用户信息辅助模块。

## 获取全路径部门名称

例如张三属于 `xx局/人事司/部门A/处室1` 下，他的用户数据如下：

```json
{
  "deptInfoName": ["处室1", "部门A", "人事司", "xx局"]
}
```

通过 `getFullDeptName(userInfo)` 方法，可以得到全路径部门名称（不包括顶级部门），即 `人事司/部门A/处室1`。

示例 1：

```ts
import { getFullDeptName } from '@sinoform/helper-user-info';

const userInfo = {
  deptInfoName: ['处室1', '部门A', '人事司', 'xx局'],
};

const fullDeptName = getFullDeptName(userInfo); // 人事司/部门A/处室1
```

示例 2：

```ts
import { getFullDeptName } from '@sinoform/helper-user-info';

const userInfo = {
  deptInfoName: ['xx局'],
};

const fullDeptName = getFullDeptName(userInfo); // xx局
```
npm package: @sinoform/print-out-file-list
Description: 打印输出附件列表插件
Latest version: 0.1.0

# @sinoform/print-out-file-list

打印输出附件列表插件

## 安装

```shell
yarn add @sinoform/print-out-file-list
```

## 使用

```tsx
import FileList from '@sinoform/print-out-file-list';
```
npm package: @sinoform/refine-css
Description: 提炼指定 DOM 元素以及子孙元素的 CSS。
Latest version: 1.18.0

# @sinoform/refine-css

提炼指定 DOM 元素以及子孙元素的 CSS。

## 基本使用

```typescript
import refineCss from '@sinoform/refine-css';

const css = refineCss(document.querySelector('.element-1'));
```

例如，HTML 页面如下：

```html
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .element-1 {
        color: red;
      }

      .element-2 {
        color: blue;
      }
    </style>
    <style type="text/css">
      .element-1 {
        font-size: 18px;
      }

      .element-2 {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div class="element-1">这是第一行文本</div>
    <div class="element-2">这是第二行文本</div>
  </body>
</html>
```

通过上面的代码，获取到的 css 字符串如下：

```css
.element-1 {
  color: red;
  font-size: 18px;
}
```

## 限制

`refine-css` 不会提炼继承自父级元素的样式，以及属性选择器等。
npm package: @sinohope/hardhat-sinohope
Description: Hardhat plugin for integrating with Sinohope
Author: Sinohope
Latest version: 1.0.0

# Sinohope Hardhat Plugin

This is a [Hardhat](https://hardhat.org/) plugin for integrating with [Sinohope](https://www.sinohope.com/).

This plugin will help you to seamlessly integrate Sinohope into your Hardhat development stack.

You can use it to deploy contracts and sign transactions and messages.

## Installation

```bash
npm install @sinohope/hardhat-sinohope
```

Import the plugin in your `hardhat.config.js`:

```js
require("@sinohope/hardhat-sinohope");
const { ApiBaseUrl, ChainSymbol } = require("@sinohope/sinohope-web3-provider");
```

Or if you are using TypeScript, in your `hardhat.config.ts`:

```ts
import "@sinohope/hardhat-sinohope";
import { ApiBaseUrl, ChainSymbol } from "@sinohope/sinohope-web3-provider";
```

## Configuration

This plugin extends the `HttpNetworkUserConfig` object with an optional
`sinohope` field.

This is an example of how to set it:

```js
module.exports = {
  solidity: "0.8.20",
  networks: {
    sepolia: {
      url: "https://rpc.sepolia.org",
      sinohope: {
        // apiBaseUrl: ApiBaseUrl.Sandbox, // If using a sandbox workspace
        chainSymbol: ChainSymbol.SEPOLIA,
        privateKey: process.env.SINOHOPE_API_PRIVATE_KEY!,
        publicKey: process.env.SINOHOPE_API_PUBLIC_KEY!,
        vaultWalletIds: process.env.SINOHOPE_VAULT_WALLET_IDS,
      }
    },
  },
};
```

## Usage
Now, you can use the network configured with the sinohope parameters normally.

```
import { ethers } from "hardhat";
const [account] = await ethers.getSigners();
console.log("Current Account Address:", account.address);
```
npm package: @sinokit/cli
Description: [![NPM version](https://img.shields.io/npm/v/@sinokit/cli.svg?style=flat-square)](https://www.npmjs.com/package/@sinokit/cli)
Author: giscafer
Latest version: 0.3.2

# @sinokit/cli

[![NPM version](https://img.shields.io/npm/v/@sinokit/cli.svg?style=flat-square)](https://www.npmjs.com/package/@sinokit/cli)

SinoKit 脚手架工具

![](./demo.png)

## Quick Start

快速使用 cli 工具说明

安装工具，即可全局使用 `sino`

```
npm i @sinokit/cli -g
```

使用 `sino create` 命令从模板创建工程

```bash
sino create vue-demo
cd vue-demo
npm run dev
```

## License

MIT @giscafer
npm package: @sinokit/components
Description: 组件
Author: giscafer
Latest version: 0.3.3

# @sinokit/components

![NPM version](https://img.shields.io/npm/v/@sinokit/components.svg?style=flat-square)

Sinokit 组件

## Usage

```js
import SinokitComponents from '@sinokit/components';

Vue.use(SinokitComponents);
```

详细用法见文档：http://blog.giscafer.com/sinokit/#/
npm package: @sinokit/utils
Description: 工具函数
Author: giscafer
Latest version: 0.3.3

# @sinokit/utils

![NPM version](https://img.shields.io/npm/v/@sinokit/utils.svg?style=flat-square)

工具函数

## Usage

```js
import { logger } from '@sinokit/utils';

logger(null, '日记信息');
```

## Other

- [使用 Rollup 开发 React 组件库](https://blog.csdn.net/mjzhang1993/article/details/85063754)
npm package: @sinolink/evolution
Description: evolution
Author: jinyuanche
Latest version: 1.2.13

# evolution

## 支持的功能

- 提供 getAppId() pageInit() goBackPage() setTitles() callphone() checkLogin() beginLogin() pageInitWithToken() pageInitWithSession() 等方法

## 安装

`npm install @sinolink/evolution`

## 使用

请参考 dist/docs 文档

### 请参考 native hybrid 交互规范及接口文档

## 例子

```typescript
请参考Webapps / jssdkTest项目
```

## 说明

## 开发和调试

- npm install
- npm link
- npm link evolution
- npm run start
npm package: @sinolink/jssdk
Description: jssdk
Author: jinyuanche
Latest version: 1.2.9

# @sinolink/jssdk


## 安装

`npm install @sinolink/jssdk`

## 说明

请参考 `dist/docs` 文档  
部分功能号原理请参考`native hybrid 交互规范及接口文档`

## 用例

请参考`webapps/jssdkTest`项目
npm package: @sinolink/login
Description: login
Author: jinyuanche
Latest version: 1.1.13

# login

## 支持的功能

* webapps login 方法 封装

* 依赖外部模块

    * @sinolink/jssdk

    * @sinolink/evolution

## 安装

`npm install @sinolink/login`


## 使用

请参考 dist/docs 文档

### 请参考native hybrid 交互规范及接口文档

## 例子


>请参考aI-intelligent-studio/login-demo页面