CleanShots 手机录屏背景填充

<div class="control-group">
  <label>背景颜色</label>
  <input type="color" v-model="config.bgColor" />
</div>

<div class="control-group">
  <label>纹理</label>
  <select v-model="config.patternType" @change="currentPattern = generatePattern(config.patternType)">
    <option value="none">无</option>
    <option value="noise">噪点</option>
    <option value="dot">点阵</option>
    <option value="graph">网格</option>
  </select>
</div>

<div class="control-group">
  <label>纹理透明度</label>
  <input type="range" v-model.number="config.patternOpacity" min="0" max="1" step="0.01" />
</div>
<div class="control-group">
  <label>缩放</label>
  <input type="range" v-model.number="config.scale" min="0.3" max="0.95" step="0.01" />
</div>
<div class="control-group">
  <label>圆角</label>
  <input type="range" v-model.number="config.radius" min="0" max="300" step="1" />
</div>
<div class="control-group">
  <label>阴影透明度</label>
  <input type="range" v-model.number="config.shadowOpacity" min="0" max="1" step="0.01" />
</div>

<button @click="exportVideo" :disabled="!isVideoLoaded || isExporting">
  导出视频
</button>