### Qqmap - Map Location Component
Source: https://kanban.cqkqinfo.com/docs/kaiqiao-admin/components/qqmap
A map location selection component that can be used directly within FormItem. It allows searching for locations, displaying POI details, and selecting coordinates and addresses.
```APIDOC
## GET /api/qqmap
### Description
A map location selection component usable within FormItem. Search for keywords to display POI on the map, view details on the left, and select points to update the top coordinates and address.
### Method
GET
### Endpoint
/api/qqmap
### Parameters
#### Query Parameters
- **key** (string) - Optional - Your Tencent Map key. The deployed project requires domain whitelisting.
- **value** (object) - Optional - Specifies the initial value for the map component.
- **address** (string) - The initial address.
- **lat** (number | string) - The initial latitude.
- **lng** (number | string) - The initial longitude.
#### Callback Functions
- **onChange** (function) - Callback function that is triggered when the value changes. It receives the `value` object as an argument: `(value) => void`.
### Request Example
```json
{
"key": "YOUR_TENCENT_MAP_KEY",
"value": {
"address": "重庆市渝北区红锦大道89号",
"lat": 29.595399,
"lng": 106.521407
},
"onChange": "(value) => console.log(value)"
}
```
### Response
#### Success Response (200)
This component primarily functions through user interaction and callbacks. There is no direct API response body for a GET request in the traditional sense, but the `onChange` callback will provide the updated location data.
- **value** (object) - Contains the selected location details.
- **address** (string) - The selected address.
- **lat** (number | string) - The selected latitude.
- **lng** (number | string) - The selected longitude.
#### Response Example (via onChange callback)
```json
{
"address": "重庆市渝北区红锦大道89号",
"lat": 29.595399,
"lng": 106.521407
}
```
```
--------------------------------
### Image Preview Modal API
Source: https://kanban.cqkqinfo.com/docs/kaiqiao-admin/components/preview-img-modal
Provides a controlled image preview modal based on Antd's Image component, allowing for controlled opening and closing.
```APIDOC
## PreviewImgModal API
### Description
Based on Antd `Image`'s preview capability, provides a controlled image preview modal.
### API
| Attribute | Description | Type |
|---|---|---|
| `visible` | Whether to display the preview | `boolean` |
| `setVisible` | Switch display status | `(visible: boolean) => void` |
| `img` | Image address | `string` |
### Behavior Description
* Structure: The component itself renders `Image` in a hidden container, using only its preview layer.
* Controlled: Controlled by `visible` and `onVisibleChange` to open/close.
```
--------------------------------
### DayRangePicker Component API
Source: https://kanban.cqkqinfo.com/docs/kaiqiao-admin/components/day-range-picker
API documentation for the DayRangePicker component, which allows users to select a range of dates and optionally times. It supports value normalization and custom output formats.
```APIDOC
## DayRangePicker Component API
### Description
The DayRangePicker component allows users to select a range of dates and optionally times. It normalizes start and end times to `00:00:00` and `23:59:59` respectively when `showTime` is not enabled or `picker` is not 'time'. It supports outputting values in a specified format or as an ISO string.
### Method
N/A (Component API)
### Endpoint
N/A (Component API)
### Parameters
#### Props
- **valueFormat** (string) - Optional - Specifies the output format for the date range values (e.g., 'YYYY-MM-DD HH:mm:ss').
- **stringValue** (boolean) - Optional - If true, the value will be output as an ISO string. Defaults to `false`.
- **picker** (string) - Optional - The type of picker (e.g., 'date', 'time'). Refer to Ant Design for available options.
- **showTime** (boolean) - Optional - If true, enables time selection within the date range. Defaults to `false`.
- **Other** (any) - Optional - All other props are passed directly to the Ant Design `RangePicker` component.
### Request Example
N/A (Component Usage)
### Response
#### Component Value Output
- **value** (string | string[]) - The selected date range, formatted according to `valueFormat` or as an ISO string if `stringValue` is true. If `showTime` is enabled, it will include time.
#### Response Example
```json
{
"startDate": "2023-10-26 00:00:00",
"endDate": "2023-10-27 23:59:59"
}
```
> For more detailed API options, refer to the Ant Design DatePicker documentation: https://ant.design/components/date-picker-cn/#DatePicker
```
--------------------------------
### WaterMark Component API
Source: https://kanban.cqkqinfo.com/docs/kaiqiao-admin/components/water-mark
Documentation for the WaterMark component, used to add watermarks to specific areas of a page, indicating copyright or ownership.
```APIDOC
## WaterMark Component API
### Description
Adds a watermark to a specific area of a page, typically used for copyright or branding purposes.
### Use Cases
- Displaying copyright information on sensitive or proprietary content.
- Branding specific sections of an admin interface.
### Basic Parameters
| Parameter | Description | Type | Default Value | Version |
|---|---|---|---|---|
| `width` | The width of the watermark. | `number` | `120` | `2.2.0` |
| `height` | The height of the watermark. | `number` | `64` | `2.2.0` |
| `rotate` | The rotation angle for the watermark in degrees. | `number` | `-22` | `2.2.0` |
| `image` | The source URL for an image watermark. Recommended to use a high-resolution image (2x or 3x). | `string` | `-` | `2.2.0` |
| `zIndex` | The z-index for the watermark element. | `number` | `9` | `2.2.0` |
| `content` | The text content for the watermark. | `string` | `-` | `2.2.0` |
| `fontColor` | The color of the watermark text. | `string` | `rgba(0,0,0,.15)` | `2.2.0` |
| `fontSize` | The font size of the watermark text. | `number` | `16` | `2.2.0` |
### Advanced Parameters
| Parameter | Description | Type | Default Value | Version |
|---|---|---|---|---|
| `markStyle` | Custom CSS styles for the watermark layer. | `React.CSSProperties` | `-` | `2.3.0` |
| `markClassName` | Custom CSS class names for the watermark layer. | `string` | `-` | `2.3.0` |
| `gapX` | Horizontal spacing between watermarks. | `number` | `212` | `2.4.0` |
| `gapY` | Vertical spacing between watermarks. | `number` | `222` | `2.4.0` |
| `offsetLeft` | Horizontal offset for drawing the watermark on the canvas. | `number` | `gapX / 2` | `2.4.0` |
| `offsetTop` | Vertical offset for drawing the watermark on the canvas. | `number` | `gapY / 2` | `2.4.0` |
### Usage Examples
#### Text Watermark
```jsx
import { WaterMark } from 'parsec-admin-components';
```
#### Image Watermark
```jsx
import { WaterMark } from 'parsec-admin-components';
```
### API Visualization
This section provides a visual representation of the WaterMark API. (Last updated: 12/8/2025 12:54:03)
```
--------------------------------
### Upload Component API
Source: https://kanban.cqkqinfo.com/docs/kaiqiao-admin/components/upload
Details for the general upload component used within the Parsec Admin system. This component supports direct use in FormItems and handles file uploads via clicking or dragging.
```APIDOC
## Upload Component API
### Description
This component is designed for direct use within FormItems, allowing users to upload files by clicking or dragging.
### Method
N/A (Component API)
### Endpoint
N/A (Component API)
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```json
{
"example": "This is a general description, specific request examples depend on form context."
}
```
### Response
#### Success Response (200)
- **fileList** (Array) - The list of uploaded files.
- **uploadStatus** (String) - The current status of the upload.
#### Response Example
```json
{
"fileList": [
{
"uid": "-1",
"name": "example.png",
"status": "done",
"url": "http://example.com/path/to/example.png"
}
],
"uploadStatus": "done"
}
```
### API Properties
| Property | Description | Default Value |
|---|---|---|
| length | Maximum number of files allowed for upload. | 1 |
| renderFileName | Function to customize the rendering of file names. | - |
| maxSize | Maximum allowed size for uploaded files. | - |
| onMaxError | Callback function executed when the maximum file size is exceeded. | - |
| arrValue | If `length` is 1, specifies whether the value should be returned as an array. | `true` |
| onFileListChange | Callback function executed when the file list changes. | - |
| fileValue | If set, returns the file value directly without initiating an upload. | - |
```
--------------------------------
### CheckboxGroup Component API
Source: https://kanban.cqkqinfo.com/docs/kaiqiao-admin/components/checkbox-group
The CheckboxGroup component allows for the generation of `Checkbox.Group` based on provided options. It supports features like 'select all', controlled indeterminate states, and value mapping to object format.
```APIDOC
## CheckboxGroup Component API
### Description
Generates `Checkbox.Group` based on `options`. Supports 'select all', controlled indeterminate state, and mapping values to objects (`objValue`).
### Method
N/A (Component API)
### Endpoint
N/A (Component API)
### Parameters
#### Properties
- **options** ( `{ label: string; value: string|number|boolean }[]` ) - Required - Array of options.
- **value** ( `(string|number|boolean)[] | Record` ) - Optional - Controlled value: array or object mapping.
- **onChange** ( `(value?: Value) => void` ) - Optional - Value change callback.
- **objValue** ( `boolean` ) - Optional - Returns object mapping (unselected is `false`, selected is `true`). Default: `false`.
- **hideCheckAll** ( `boolean` ) - Optional - Hides the 'select all' item. Default: `false`.
- **disabled** ( `boolean` ) - Optional - Disables all selections. Default: `false`.
### Request Example
```json
{
"options": [
{"label": "Option 1", "value": "1"},
{"label": "Option 2", "value": "2"}
],
"value": ["1"],
"objValue": true
}
```
### Response
#### Success Response (Component Render)
- **rendered component** - Displays checkboxes based on options and current value.
#### Response Example
```json
{
"currentValue": ["1"],
"currentObjValue": {"1": true, "2": false}
}
```
### Behavior Notes
- **Select All & Indeterminate State**: Automatically calculates `checked` and `indeterminate` based on the current selection count.
- **Object Value Mode**: When `objValue=true`, returns a mapping like `{ 1:true, 2:false }`; returns `undefined` if no value is passed.
- **Controlled Mode**: `value` changes automatically synchronize the select all and indeterminate states.
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.