open-index/open-npm huggingface dataset:
npm package: @pagoda-tools/swagger-ui
Description: swagger-ui
Latest version: 1.0.0-beta.41

# @pagoda-tools/swagger-ui

## 安装

```shell
# install npm
npm install @pagoda-tools/swagger-ui -S

# install yarn
yarn add @pagoda-tools/swagger-ui -S
```

## 文档编写示例

1. 根目录新增配置文件 `swagger.config.js`

```ts
import { defineSwaggerConfig } from '@pagoda-tools/swagger-ui';

export default defineSwaggerConfig({
  info: {
    title: '测试文档标题',
    version: '1.0.0',
  },
  server: [
    {
      url: 'http://www.xxx.com',
      description: '测试环境',
    },
  ],
});
```

2. 在 src 任意目录下新建 `xx.dto.ts`，示例代码如下：

```ts
import {
  defineSwaggerConfig,
  defineSwaggerApi,
  IsInt,
  IsString,
  Type,
  ValidateNested,
} from '@pagoda-tools/swagger-ui';

class User {
  @IsString()
  name: string;
}

export class TestInput {
  @IsInt()
  @JSONSchema({
    description: '字段描述',
  })
  a: number;

  @ValidateNested({ each: true })
  @Type(() => User)
  @JSONSchema({
    description: '字段描述',
  })
  users: User[];
}

export class TestOutput {
  @IsInt()
  a: number;
}

export default defineSwaggerApi({
  method: 'get',
  summary: '接口名称',
  input: TestInput,
  output: TestOutput,
});
```

3. 在 `package.json` 的 `scripts` 中新增命令

```json
{
  "scripts": {
    "doc-serve": "pd-swagger-ui serve",
    "export-doc-json": "pd-swagger-ui json"
  }
}
```

4. 执行 `npm run doc-serve`

### swagger.config.js 配置项

```ts
interface SwaggerConfig {
  info?: {
    // 文档标题
    title?: string;
    // 文档描述
    description?: string;
    // 文档版本
    version?: string;
  };
  server?: {
    // 接口环境地址
    url: string;
    // 接口环境地址描述
    description?: string;
  }[];
}
```

- `IsInt` 等修饰器参考 [class-validator](https://github.com/typestack/class-validator#validation-decorators)
npm package: @pagoda-tools/watermark
Description: ## 安装
Latest version: 2.0.0

# @pagoda-tools/watermark

## 安装

```bash
yarn add @pagoda-tools/watermark
```

## 基本用法

```js
import { Watermark } from '@pagoda-tools/watermark';

const watermarker = new Watermark();

const watermarkRender = watermarker.render('.selector', '网页内容');

// 切换水印禁用状态
watermarkRender.toggleDisabled();
// 更新水印
watermarkRender.update();
// 销毁水印
watermarkRender.destroy();
```

## 移动端自适应

```js
import { Watermark } from '@pagoda-tools/watermark';

const watermarker = new Watermark({
  // 设置 rootValue 可以开启水印大小自适应
  // 例如你正在以iPhone7作为参考来配置水印样式，则设置 rootValue 为 iPhone7 的屏幕宽度 375
  rootValue: 375,
});
```

## 默认配置

```json
{
  "mode": "modal",
  "setPosition": true,
  "textStyle": {
    "left": 80,
    "top": 100,
    "rotate": -15,
    "fontSize": 14,
    "fontFamily": "\"PingFang SC\", \"helvetica neue\", \"hiragino sans gb\", \"arial\", \"microsoft yahei ui\", \"microsoft yahei\", \"simsun\", \"sans-serif\"",
    "alpha": 1,
    "color": "rgba(0, 0, 0, .08)",
    "lineHeight": 20,
    "align": "center",
    "baseLine": "middle"
  },
  "background": {
    "color": "transparent",
    "repeat": "repeat",
    "position": "left top",
    "attachment": "scroll",
    "origin": "padding-box"
  },
  "modal": {
    "position": "absolute",
    "top": 0,
    "right": "auto",
    "bottom": "auto",
    "left": 0,
    "zIndex": 999
  },
  "width": 200,
  "height": 160
}
```

## API

```ts
class Watermark {
  constructor(options: WatermarkOptions): Watermark;

  render(
    selector: string | HTMLElement,
    content?: WatermarkOptions['content'],
  ): renderInstance | undefined;
}

export interface WatermarkOptions {
  mode?: 'background' | 'modal';
  textStyle?: {
    left?: number;
    top?: number;
    rotate?: number;
    fontSize?: number;
    fontFamily?: string;
    alpha?: CanvasCompositing['globalAlpha'];
    color?: CanvasFillStrokeStyles['fillStyle'];
    lineHeight?: number;
    align?: CanvasTextDrawingStyles['textAlign'];
    baseLine?: CanvasTextDrawingStyles['textBaseline'];
  };
  background?: {
    repeat?: Property.BackgroundRepeat;
    position?: Property.BackgroundPosition;
    origin?: Property.BackgroundOrigin;
    attachment?: Property.BackgroundAttachment;
    color?: Property.BackgroundColor;
  };
  modal?: {
    position?: Property.Position;
    top?: Property.Left;
    right?: Property.Right;
    bottom?: Property.Bottom;
    left?: Property.Left;
    width?: Property.Width;
    height?: Property.Height;
    zIndex?: Property.ZIndex;
  };
  rootValue?: number;
  setPosition?: boolean;
  width?: number;
  height?: number;
  drawText?: (ctx: CanvasRenderingContext2D) => void;
  content?: string | string[];
}

interface renderInstance {
  toggleDisabled(val?: boolean): void;
  update(): void;
  destroy(): void;
}
```