# winskin 标签 API 文档
本文档由 `DeepSeek R1` 模型生成并微调。
---
```mermaid
graph LR
WinskinProps --> BaseProps
click BaseProps "./BaseProps"
```
---
## 接口定义
```typescript
interface WinskinProps extends BaseProps {
/**
* 窗口皮肤图片资源ID
*/
image: ImageIds;
/**
* 边框粗细
* - 设置为 32 时表示原始大小（16 像素宽度），默认为 32
* - 设为0时仅显示中心内容区
*/
borderSize?: number;
}
```
---
## 核心功能演示
### 示例 1：基础窗口皮肤
```tsx
// 使用默认边框（borderSize=32）
```
---
### 示例 2：不同边框粗细对比
```tsx
// 细边框（borderSize=16）
;
// 粗边框（borderSize=32）
;
// 无边框（borderSize=0）
;
```
**效果差异**：
- 细边框：内容区域更大，适合信息密集场景
- 粗边框：装饰性更强，适合标题窗口
- 无边框：仅保留中心纹理，适合全屏背景
---
## 九宫格原理示意图
```typescript
/*
+-------------------+
| 1 top 2 | ← borderSize
| |
| |
left | 4 center 3 | right
| |
| |
| 5 bottom 6 |
+-------------------+
*/
```
---
## 高级用法示例
### 动态边框动画
```tsx
import { hyper } from 'mutate-animate';
import { transitioned } from '@user/client-modules';
import { onTick } from '@motajs/render-vue';
const border = transitioned(16, 1000, hyper('sin', 'in-out'));
onTick(() => {
if (border.value === 16) border.set(32);
if (border.value === 32) border.set(16)
})
;
```