# Data 设计

```
image group id ($gid),
image list ($list)
==>| $UIImage

$gid =( localStorage )=> $UIState

$UIState := {
  $currImage := 对应 $imageName

  map : $imageName => {
    $left, $top, $mode
  }
}

$mode = 0%, 60%, 100%, diff

$list := {
  list: ($imageName, $src)
}


$imageName, $list ===> $src

$UIImage :== (
  $UIState
  $viewMode
)

$viewMode = on, off 
```

# 键盘

- 全局 : cmd + k (开启 / 关闭)
- 开启状态下 : 
  - cmd + 1, 2, 3, 4 对应不同的 `mode`
  - 上下左右微调
  - 打开/关闭鼠标穿透能力

# UI

- 设置器 : 开关 / 设置
- 容器 : 提供 "混合方式"
  - 图片 : 提供定位
- 页面内容

## localStorage dumper

```
$groupKey, $key ==>| $dumper

$groupKey, $key, $data ==>| localStorage
$groupKey, $key ==( localStorage )=> $data

$id = $groupKey/$key

$dumper :== (
  $groupKey
  $key
  
  $updatedAt: 时间戳
  
  $clear($groupKey?, $key?) : 
    - 全清除
    - 清除 group
    - 清除特定 data
    
  $setProps(partial<$data>) :
    - debounce set state
      - 更新 updatedAt 
    - 更新 state
)
```

# 设计图

- ![img.png](image/设计图_ui-image_流程_模块结构.png)