screenshot-2/ds.ts at main · chaosll/screenshot-2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
// 定义按钮配置
const buttonConfigs = [
  {
    id: 'fontWeight',
    key: 'fontWeight',
    label: '加粗',
    styleKey: 'fontWeight',
    activeValue: '700',           // 激活时的样式值
    inactiveValue: '400',         // 非激活时的样式值（正常字重）
    toggleValue: 'initial'        // 点击切换时的值
  },
  {
    id: 'fontStyle',
    key: 'fontStyle',
    label: '斜体',
    styleKey: 'fontStyle',
    activeValue: 'italic',        // 激活时的样式值
    inactiveValue: 'normal',      // 非激活时的样式值（正常字体）
    toggleValue: 'initial'
  },
  {
    id: 'underline',
    key: 'textDecoration',
    label: '下划线',
    styleKey: 'textDecorationLine',
    activeValue: 'underline',     // 激活时的样式值
    inactiveValue: 'none',        // 非激活时的样式值（无装饰）
    toggleValue: 'none'
  },
  {
    id: 'lineThrough',
    key: 'textDecoration',
    label: '删除线',
    styleKey: 'textDecorationLine',
    activeValue: 'line-through',  // 激活时的样式值
    inactiveValue: 'none',        // 非激活时的样式值（无装饰）
    toggleValue: 'none'
  },
  {
    id: 'writingMode',
    key: 'writingMode',
    label: '文字竖排',
    styleKey: 'writingMode',
    activeValue: 'vertical-lr',   // 激活时的样式值
    inactiveValue: 'horizontal-tb', // 非激活时的样式值（水平排列）
    toggleValue: 'initial',
    useLayerValue: true
  }
]

// 根据配置生成 btnMap（初始化时使用 inactiveValue）
const btnMap = reactive<Record<string, BtnItem>>({})
buttonConfigs.forEach(config => {
  btnMap[config.id] = {
    key: config.key,
    nextValue: config.inactiveValue, // 初始化为非激活状态的值
    label: config.label,
    active: false
  }
})

// 统一的样式状态更新函数
const updateButtonState = (config, isActive) => {
  btnMap[config.id].active = isActive
  btnMap[config.id].nextValue = isActive ? config.toggleValue : config.inactiveValue
}

// 统一的样式监听
watch(() => elementStore.innerSpanStyles, (newVal) => {
  console.log('样式==========', newVal)

  buttonConfigs.forEach(config => {
    if (config.useLayerValue) return

    const styleValue = newVal[config.styleKey]
    const isActive = styleValue?.isSame && styleValue.styles[0] === config.activeValue

    updateButtonState(config, isActive)
  })
}, { deep: true })

// writingMode 的特殊监听
watch(() => elementStore.selectedActiveLayer?.writingMode, (newVal) => {
  const writingModeConfig = buttonConfigs.find(config => config.id === 'writingMode')
  if (!writingModeConfig) return

  const isActive = newVal === writingModeConfig.activeValue
  updateButtonState(writingModeConfig, isActive)

  console.log('widget', elementStore.selectedActiveLayer)
})