update

src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue

@@ -1,13 +1,133 @@
 <template>
   <div class="line-style-panel">
-    line-style-panel
+    <div class="row">
+      <div style="flex: 2;">线条样式：</div>
+      <Select 
+        style="flex: 3;" 
+        :value="handleElement.style" 
+        @change="value => updateLine({ 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="handleElement.color"
+            @update:modelValue="value => updateLine({ color: value })"
+          />
+        </template>
+        <ColorButton :color="handleElement.color" style="flex: 3;" />
+      </Popover>
+    </div>
+    <div class="row">
+      <div style="flex: 2;">线条宽度：</div>
+      <InputNumber 
+        :value="handleElement.width" 
+        @change="value => updateLine({ width: value })" 
+        style="flex: 3;" 
+      />
+    </div>
+    
+    <div class="row">
+      <div style="flex: 2;">起点样式：</div>
+      <Select 
+        style="flex: 3;" 
+        :value="handleElement.points[0]" 
+        @change="value => updateLine({ points: [value, handleElement.points[1]] })"
+      >
+        <SelectOption value="">无</SelectOption>
+        <SelectOption value="arrow">箭头</SelectOption>
+        <SelectOption value="dot">圆点</SelectOption>
+      </Select>
+    </div>
+    <div class="row">
+      <div style="flex: 2;">终点样式：</div>
+      <Select 
+        style="flex: 3;" 
+        :value="handleElement.points[1]" 
+        @change="value => updateLine({ points: [handleElement.points[0], value] })"
+      >
+        <SelectOption value="">无</SelectOption>
+        <SelectOption value="arrow">箭头</SelectOption>
+        <SelectOption value="dot">圆点</SelectOption>
+      </Select>
+    </div>
+
+    <Divider />
+    <ElementShadow />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent, Ref } from 'vue'
+import { useStore } from 'vuex'
+import { MutationTypes, State } from '@/store'
+import { PPTLineElement } from '@/types/slides'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+import ElementShadow from '../common/ElementShadow.vue'
+import ColorButton from '../common/ColorButton.vue'
 
 export default defineComponent({
   name: 'line-style-panel',
+  components: {
+    ElementShadow,
+    ColorButton,
+  },
+  setup() {
+    const store = useStore<State>()
+    const handleElement: Ref<PPTLineElement> = computed(() => store.getters.handleElement)
+
+    const { addHistorySnapshot } = useHistorySnapshot()
+
+    const updateLine = (props: Partial<PPTLineElement>) => {
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+      addHistorySnapshot()
+    }
+
+    return {
+      handleElement,
+      updateLine,
+    }
+  }
 })
 </script>
+
+<style lang="scss" scoped>
+.row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.line-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 !important;
+
+  .line-wrapper {
+    margin-left: 8px;
+  }
+}
+.line-wrapper {
+  overflow: visible;
+}
+.line-btn-icon {
+  width: 30px;
+  font-size: 12px;
+  margin-top: 2px;
+  color: #bfbfbf;
+}
+.preset-point-style {
+  padding: 0 10px;
+
+  & + .preset-point-style {
+    margin-top: 10px;
+  }
+}
+</style>

src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue

@@ -1,13 +1,79 @@
 <template>
   <div class="shape-style-panel">
-    shape-style-panel
+    <div class="row">
+      <div style="flex: 2;">填充颜色：</div>
+      <Popover trigger="click">
+        <template #content>
+          <ColorPicker
+            :modelValue="fill"
+            @update:modelValue="value => updateFill(value)"
+          />
+        </template>
+        <ColorButton :color="fill" style="flex: 3;" />
+      </Popover>
+    </div>
+
+    <Divider />
+    <ElementOutline />
+    <Divider />
+    <ElementShadow />
+    <Divider />
+    <ElementOpacity />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent, ref, Ref, watch } from 'vue'
+import { useStore } from 'vuex'
+import { MutationTypes, State } from '@/store'
+import { PPTShapeElement } from '@/types/slides'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+import ElementOpacity from '../common/ElementOpacity.vue'
+import ElementOutline from '../common/ElementOutline.vue'
+import ElementShadow from '../common/ElementShadow.vue'
+import ColorButton from '../common/ColorButton.vue'
 
 export default defineComponent({
   name: 'shape-style-panel',
+  components: {
+    ElementOpacity,
+    ElementOutline,
+    ElementShadow,
+    ColorButton,
+  },
+  setup() {
+    const store = useStore<State>()
+    const handleElement: Ref<PPTShapeElement> = computed(() => store.getters.handleElement)
+
+    const fill = ref<string>()
+
+    watch(handleElement, () => {
+      if(!handleElement.value) return
+      fill.value = handleElement.value.fill || '#000'
+    }, { deep: true, immediate: true })
+
+    const { addHistorySnapshot } = useHistorySnapshot()
+
+    const updateFill = (value: string) => {
+      const props = { fill: value }
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+      addHistorySnapshot()
+    }
+
+    return {
+      fill,
+      updateFill,
+    }
+  },
 })
 </script>
+
+<style lang="scss" scoped>
+.row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+</style>