PPTist/src/views/Editor/Toolbar/common/ElementOutline.vue

<template>
  <div class="element-outline">
    <div class="row">
      <div style="flex: 2;">启用边框：</div>
      <div class="switch-wrapper" style="flex: 3;">
        <Switch 
          :checked="hasOutline" 
          @change="checked => toggleOutline(checked)" 
        />
      </div>
    </div>
    <template v-if="hasOutline">
      <div class="row">
        <div style="flex: 2;">边框样式：</div>
        <Select 
          style="flex: 3;" 
          :value="outline.style" 
          @change="value => updateOutline({ style: value })"
        >
          <SelectOption value="solid">实线边框</SelectOption>
          <SelectOption value="dashed">虚线边框</SelectOption>
        </Select>
      </div>
      <div class="row">
        <div style="flex: 2;">边框颜色：</div>
        <Popover trigger="click">
          <template #content>
            <ColorPicker
              :modelValue="outline.color"
              @update:modelValue="value => updateOutline({ color: value })"
            />
          </template>
          <ColorButton :color="outline.color" style="flex: 3;" />
        </Popover>
      </div>
      <div class="row">
        <div style="flex: 2;">边框粗细：</div>
        <InputNumber 
          :value="outline.width" 
          @change="value => updateOutline({ width: value })" 
          style="flex: 3;" 
        />
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import { useStore } from 'vuex'
import { MutationTypes, State } from '@/store'
import { PPTElement, PPTElementOutline } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'

import ColorButton from './ColorButton.vue'

export default defineComponent({
  name: 'element-outline',
  components: {
    ColorButton,
  },
  setup() {
    const store = useStore<State>()
    const handleElement = computed<PPTElement>(() => store.getters.handleElement)

    const outline = ref<PPTElementOutline>()
    const hasOutline = ref(false)

    watch(handleElement, () => {
      if(!handleElement.value) return
      outline.value = 'outline' in handleElement.value ? handleElement.value.outline : undefined
      hasOutline.value = !!outline.value
    }, { deep: true, immediate: true })

    const { addHistorySnapshot } = useHistorySnapshot()

    const updateOutline = (outlineProps: Partial<PPTElementOutline>) => {
      const props = { outline: { ...outline.value, ...outlineProps } }
      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
      addHistorySnapshot()
    }

    const toggleOutline = (checked: boolean) => {
      let props: { outline?: PPTElementOutline } = { outline: undefined }
      if(checked) {
        props = { outline: { width: 2, color: '#000', style: 'solid' } }
      }
      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
      addHistorySnapshot()
    }

    return {
      outline,
      hasOutline,
      toggleOutline,
      updateOutline,
    }
  },
})
</script>

<style lang="scss" scoped>
.row {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.switch-wrapper {
  text-align: right;
}
</style>